需求
在使用ant design of vue 的table表格时需要让之前已选择的数据显示勾选状态，还要支持跨页勾选
思路
需要指定row-key绑定的值必须唯一
ant-design-vue的表格对于跨页勾选支持的非常友好，只要设置绑定一下rowKey就可以了，我这里绑定的是workerId
代码
<!-- 表格 -->
<a-table
class="FormData"
:columns="columns"
:data-source="data"
:pagination="ipageination"
:rowSelection="rowSelection"
rowKey="workerId"
bordered :scroll="{ y: 350 }"
@change="handleTablePages"
@showSizeChange="handleTableSizeChange"
>
<template slot="operation" slot-scope="text, record">
<a-space>
<!-- <a-button @click="edit(record)">编辑</a-button> -->
<a-button @click="edit(record)">编辑</a-button>
<a-button @click="delPersonnel(record)">删除</a-button>
</a-space>
</template>
</a-table>
onSelect是点击勾选事件，selectedRowKeys是勾选的rowKey值的数组
在点击勾选事件里，判断是否勾选（selected）然后去操作rowSelection.selectedRowKeys，
这个数组是用来指定选中项的 key 数组
getCheckboxProps 是选择框的默认属性配置，这个函数可获得已选择的workerId的数组，让其数据勾选回显
data() {
return{
workerIdList: [],
rowSelection: {
type: "checkbox",
// 不使用箭头函数就无法获取this
//单选
onSelect: (record, selected, selectedRows, nativeEvent) => {
// console.log(record, selected, selectedRows, nativeEvent)
const list = this.workerIdList
const selectedRowKeys = this.rowSelection.selectedRowKeys
console.log(list,selectedRowKeys);
if(!selected){
// 这里是取消勾选，删除对应的数组项
selectedRowKeys.map((x,item) => {
if(x === record.workerId){
selectedRowKeys.splice(item,1)
}
})
list.map((x,item) => {
if(x === record.workerId){
list.splice(item,1)
}
})
console.log(this.rowSelection.selectedRowKeys)
}
if(selected) {
// 这里是点击勾选，添加workerId字段到selectedRowKeys数组里
this.rowSelection.selectedRowKeys.push(record.workerId)
console.log(this.rowSelection.selectedRowKeys)
}
},
//全选
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows)
if(selected) {
changeRows.map((x)=>{
this.rowSelection.selectedRowKeys.push(x.workerId)
})
}
if(!selected) {
const list = this.workerIdList
changeRows.map((item,k)=>{
list.map((x,i)=>{
if(x.workerId == item.workerId) {
list.splice(i,1)
}
})
})
this.workerIdList = list
this.rowSelection.selectedRowKeys = []
}
},
selectedRowKeys: [],
getCheckboxProps:(record) => {
if(record.picked !== 0){
this.electedRowKeys.push(record.workerId)
this.workerIdList.push(record.workerId)
this.rowSelection.selectedRowKeys = this.workerIdList
}
return{
props:{
defaultChecked:record.picked !== 0,
},
}
},
},
}
}