Ant Design Vue丨 Table中默认项实现，但不影响勾选

Table中默认项实现，但不影响勾选

• 通过设置table属性中row-selection，同时需设置rowKey

<Table :columns="columns" 
   :row-selection="rowSelection" 
   :pagination="false"
  :row-key="record => record.roleId" 
  :dataSource="roles">
</Table>

• 注意：
  • rowSelection属性传入值 需要是计算属性
  • 坑： 最初根据官网文档，只设置rowSelection属性中的selectedRowKeys和onChange，能够实现默认选中的效果。但是点击勾选则失效；
  • 解决： 通过设置getCheckboxProps属性中defaultChecked属性就可以实现点击勾选效果

const rowSelection = computed(() => {
  return {
    // 设置默认选项的key值
    selectedRowKeys: roleIds.value,
    // 选项变化时回调函数
    onChange: (selectedRowKeys, selectedRows) => {
      roleIds.value = selectedRowKeys
    },
    // 选择框的默认属性配置
    getCheckboxProps: record => {
      return {
        props: {
          defaultChecked: roleIds.value.includes(record.roleId),
        },
      }
    },
  }
})