在写业务的时候难免遇到table多选，翻页后需要回显的功能，以前写react antd 组件是提供一个所有保存rowKeys的数组保存的，自动回显，然后可以自定义key，比如用每条数据的id做key，一般后端给的数据的id都是唯一的，所以没有问题。
但是在写vue的时候发现，不管是element还是iview 都没有提供自定义table数据key的功能，所以做回显自能自己写逻辑，因为最近在用iview 就用iview做例子
on-select 在多选模式下有效，选中某一项时触发 selection：已选项数据 row：刚选择的项数据
on-select-cancel 在多选模式下有效，取消选中某一项时触发 selection：已选项数据
row：取消选择的项数据
需要用到的就是这两个方法，然后加上
通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能。
给 data 项设置特殊 key _checked: true 可以默认选中当前项。
下面上代码
<Table
:columns="tableColumn"
:data="tableData"
ref="table"
@on-select="selectChange"
@on-select-cancel="selectChangeCancel"
>
</Table>
// 勾选
selectChangeOut(el, row) {
let productData = JSON.parse(JSON.stringify(this.productData))
productData.push(row)
this.productData = productData
},
// 取消选择
selectChangeCancel(el, row) {
let productData = JSON.parse(JSON.stringify(this.productData))
let newProductData = productData.filter(item => {
return item.id != row.id
})
this.productData = newProductData
},
// 回显勾选
selectedTrue(selects) {
setTimeout(() => {
let tableData = JSON.parse(JSON.stringify(this.tableData))
this.productData.forEach(el => {
let index = tableData.findIndex(i => {
return el.id == i.id
})
if (index != -1) {
this.$refs.table.objData[index]._isChecked = true
}
})
}, 0)
},
在每次分页请求之后调用这个方法就好了，为什么要setTimeout，是因为如果不加，那么这个方法执行会在table数据填充之前 ，找不到able的objData属性。各位有其他更好的回显方法也可以试试
回显方法个人建议，直接放在 请求后端接口的方法里面，比如我个人喜欢用getData做请求接口函数名
// 调接口查询数据
getData: async function() {
let res = await xxxx()
this.selectedTrue()
}
以上
这么写会有一个bug 就是点击全选的时候，数据并不能保存在 this.productData里面，可以自己再写一个全选的，或者用on-selection-change换掉on-select 逻辑就大家自己写了哦
