今天和大家一起学习一个 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
评论