如果需要使用跨页的selectedRows;如下
// template
<a-table :rowSelection="{selectedKeys:selectedRowKeys,onChange:onSelectChange}">
slotxxx
</a-table>
//script
<script>
data(){
return {
selectedRowKeys :[],// 选中项的key值集合
selectedRows :[],// 选中项的rows 集合 组件默认为当前页选中项
}
}
methods:
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys;
let allRows = this.selectedRows.concat(selectedRows);
let curRows = allRows.filter((item) => {
return selectedRowKeys.includes(item.id);
})
let filtered = curRows.reduce((total, next) => {
let has = total.some((f) => {
return f.id === next.id
})
return has ? total : total.concat([next])
}, [])
this.selectedRows = filtered;
}
</script>
版本信息
- ant-design-vue:"^1.3.16"
- selectedRowKeys 组件抛出的变量 自身携带 跨页功能
- allRows合并之前的数据和当前页的数据
- filtered 是对allRows进行去重主键是id ,可用其他任意去重方法
- filtered 主要是因为当前页数据多次操作 会出现重复数据选中项目