写点什么

el-table 分页全选功能讲解

作者:CRMEB
  • 2022 年 6 月 20 日
  • 本文字数:1442 字

    阅读完需:约 5 分钟

el-table 分页全选功能讲解

今天和大家一起学习一个 el-table 分页全选的功能我们在用 el-table 组件的时候,肯定会用到分页功能,不管是长列表下拉分页还是用 element-UI 的 el-pagination 分页。但是我们在具有选择功能的 el-table 的时候,会遇到一个问题,在点击进行分页之后,之前选择的数据没了,这个问题真的是困扰我良久。在后面的我又开始面向百度开发,找到一个没有 bug 的方法这个方法是:在 el-table 中,通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”,在第一行,也就是多选框的那一列上,加上 :reserve-selection="true", 直接上代码,仅供大家参考。

<template>
<div>
<el-table
ref="table"
:data="tableData"
size="small"
height="100%"
row-key=“id”
@selection-change="handleSelectChange"
@select="handleSelect"
>
<el-table-column width="50" type="selection" />
<el-table-column type="index" label="序号" width="50">
<template scope="scope">
<span>{{
(pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1
}}</span>
</template>
</el-table-column>
<el-table-column label="名称1" />
<el-table-column label="名称2" />
<el-table-column label="名称3" />
<el-table-column label="名称4" />
<el-table-column label="名称5" />
</el-table>
</div>
</template>


<script>
export default {
data() {
return {
tableData: [],
selectedObj: {},
selectedData: []
}
},
methods: {
getList() {
// 查数据的地方,处理分页选中状态
this.handleRowSelection(this.tableData)
},
handleSelectChange(selection) {
// 全选取消,删除当前页所有数据
if (selection.length === 0) {
this.tableData.forEach(item => {
delete this.selectedObj[item.id]
})
}
// 勾选数据 添加
selection.forEach(item => {
this.selectedObj[item.id] = item
})
// 获取所有分页勾选的数据
this.selectedData = []
for (const key in this.selectedObj) {
this.selectedData.push(this.selectedObj[key])
}
},
handleSelect(selection, row) {
// 取消单个勾选时,删除对应属性
if (!selection.some(item => item.id === row.id)) {
delete this.selectedObj[row.id]
}
},
// 处理当前列表选中状态 handleRowSelection(data) {
data.forEach(item => {
if (this.selectedObj[item.id]) {
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(item)
})
}
})
}
}
}</script>
复制代码

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27
复制代码

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:http://github.crmeb.net/u/defu

Github 地址:http://github.crmeb.net/u/defu

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
el-table 分页全选功能讲解_CRMEB_InfoQ写作社区