elementUI的el-table多页面选checkbox回显，拿到既可以使用
关于el-table的多选，相信只要做过项目的朋友都会用过，这其中有一个坑，是很大概率会踩到的，就是第一页选中了之后，切到第二页选择完之后，切换回第一页发现第一页选择的不见了，怎么办？？？
这个坑，老实说不难，但由于经常碰到，我总结了一下
- 利用 reserve-selection与row-key结合
使用方法：
1）在表格加上属性 :row-key="(row) => { return row.id }"
row-key绑定一个函数，该函数返回每行数据的唯一标识
2）在多选的column标签加上 :reserve-selection=“true” 开启
大功告成！是不是很快？
优点：快捷简单方便
缺点：1. elementUI的版本不能太低
2.某些需求无法满足，比如先给你一组选中的数据
2.选中数据后台获取回显
1.获取后台数据
// 调用列表表格
getList (val) {
this.loading = true
api
.quotedPriceAgentList({
pageSize: this.size,
pageNum: this.page,
order: this.order,
sort: this.sort,
currencyName: this.formSearch.currencyName,
name: this.formSearch.name,
remark: this.formSearch.remark,
id: val.rolesId,
agentId: val.uid
})
.then((res) => {
if (res.code === 200) {
this.tableData = res.data.list
this.total = res.data.total
this.loading = false
// 多选框回显
this.rowMultipleChecked(res.data.list)
} else {
this.$message({ type: 'error', message: res.msg })
}
})
},
2.多选框回显方法
rowMultipleChecked (data) {
if (data.length) {
this.$nextTick(function () {
data.forEach(item => {
// 如果数据中的bindingStatus === true的话 让这一列选中
if (item.bindingStatus === true) {
// multipleTable 是这个表格的ref属性 true为选中状态
this.$refs.multipleTable.toggleRowSelection(item, true)
} else {
this.$refs.multipleTable.toggleRowSelection(item, false)
}
})
})
}
},
3.分页调用回显方法
// 列表页数事件
handleChange (val) {
this.size = val
this.getList(this.row)
// 多选框回显
this.rowMultipleChecked(this.tableData)
},
大坑:
elementUI中el-table多选表格数据删除后，再次删除时复选框依旧是选中状态
解决:查了文档得出在清空之后所选数据之后要另外添加一句。dataTable是table用ref添加的名字。clearSelection()是elementUI内部的方法
在删除方法的最后添加一段代码
this.$refs.dataTable.clearSelection(); //清除之前的选中状态
