ant design vue table table selects specific items by default

There is really no way to say about the answer on the Internet, it seems that they are all funded by the same person, not much nonsense, and the code:

<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>

Focus:

• There are examples to be found on the official website, but it is a positive example, where ['2','3'] in defaultChecked is actually the set we want to select, and the actual combination of business logic here can be understood as putting it in an array It is all the id to be selected (your data must have the id attribute), and record.key can be understood as the id of each item in your data (your data must have the id attribute)

If you want to reselect the data, you must combine the following code, and the specific business logic must be combined with the actual content:

//先要在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));
 }