项目中有个需求，表格中设置默认选中

框架

vue+antd

网上好多例子都是用下面的方法

  getCheckboxProps(record) {
    return {
      defaultChecked: record.id === 1,
    }
  },

用上面的方法进行设置一直没有效果，后来发现我用的是vue3，上面的方法在vue3中是没有效果的，vue3中表格设置默认选中需要用下面的方法：

1、table标签设置

<a-table
    :columns="columns"
    //在table中第一列加上复选框
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :row-key="record => record.id"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
>
</a-table>

2、data设置

data() {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns,
      selectedRowKeys: [],
    };
  },

其中selectedRowKeys是用来设置默认需要的表格中的某些行，可以直接设置默认值，也可以通过从后台获取数据，然后对其进行赋值，selectedRowKeys中存放的是table中属性row-key的值

3、从后台获取默认选中的数据

axios.get("/group/getGroupNodeIds/" + this.$route.query.id).then((res) => {
        this.selectedRowKeys = res.data;
      });

这样在打开表格的时候就会默认选中selectedRowKeys中存放的值对应的列

4、设置点击复选框的时候selectedRowKeys中的值会跟着改变

onSelectChange(selectedRowKeys) {
    this.selectedRowKeys = selectedRowKeys
    console.log(selectedRowKeys)
},

如果在onChange事件中不加上this.selectedRowKeys = selectedRowKeys这一句，那么点击复选框的时候会没有效果

最终效果：

 版本不同用的方法也不同，希望能帮助到大家。