需求概要:实现默认勾选列表某些选项,如图
<template>
<a-table
:row-selection="rowSelection"
:columns="columns"
:data-source="data"
>
</a-table>
</template>
<script>
import { defineComponent, ref, reactive,computed,toRefs } from "vue";
export default defineComponent({
setup(){
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',
},
];
const selectedRowKeys = ref(['2','3'])
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected) => {
let changedId = record.key;
let removeIndex = 0
selectedRowKeys.value.filter((c,index) => {
if(c === changedId){
removeIndex = index
}
})
if (selected){
selectedRowKeys.value.push(changedId);
} else{
selectedRowKeys.value.splice(removeIndex, 1);
}
},
onSelectAll: (selected, selectedRows) => {
if(selected){
selectedRows.map((elements) => {
selectedRowKeys.value.push(elements.key)
})
}else{
selectedRowKeys.value.splice(0);
}
},
getCheckboxProps: record => {
return {
props: {
// disabled: record.name === 'Disabled User',
// name: record.name,
defaultChecked: selectedRowKeys.value.includes(record.key) // 该属性用于默认勾选处理
},
}
},
};
return{
columns,
data,
rowSelection
}
}
})
</script>
主要引用getCheckboxProps中的defaultChecked属性