关于网上这个答案真的无法言说,仿佛都出资同一人手笔,废话不多说,上代码:
<template>
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
<a slot="name" slot-scope="text">{
{
text }}</a>
</a-table>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
scopedSlots: {
customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
];
export default {
data() {
return {
data,
columns,
};
},
computed: {
rowSelection() {
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${
selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
props: {
defaultChecked: ['2','3'].includes(record.key)
},
}),
};
},
},
};
</script>
重点:
- 官网是有例子可寻的,只不过给的是正向的例子,其中defaultChecked里[‘2’,‘3’]其实是我们要选中的集合,这里实际结合业务逻辑,可以理解为数组里放的全是要选中的id(你的数据里必须要有id这个属性),record.key则可以理解为你data数据中每一项中的id(你的数据里必须要有id这个属性)
如果要数据重新给选中,则要结合下面的代码,具体业务逻辑要结合实际内容:
//先要在data中定义
record: '',
rowSelection: {
selectedRowKeys: [],
onChange: this.onSelectChange
}
//这里需要在methods中写,不能直接暴露在外面,结合自己的业务
this.rowSelection = {
selectedRowKeys: selectedRowKeys, //这里指的是选中的数组集合,例如["2","3"]
onChange: this.onSelectChange, //使用getCheckboxProps必须结合onChange,官网有介绍
getCheckboxProps: record => {
//record代表的是上边示例data的数据
return {
props: {
defaultChecked: selectedRowKeys.includes(record.key) //这里意思是选中key为2,3的两项
}
};
}
onSelectChange (selectedRowKeys) {
// 去重 Array.from(new Set(arr))
this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
}