ant design react 表格table 默认勾选几项

在 ant design react 中 ， 表格的第一列是联动的选择框

截一张官方文档图，图示最后一排就是禁用状态

image.png

点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。

 onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },

默认禁用disable 某项时，官方文档给出了例子：

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

主要是getCheckboxProps 里面的disabled 属性控制的。

默认选中某项时，需要 getCheckboxProps 里面的defaultChecked 属性控制：

业务场景：勾选了几项保存之后，下次进来编辑还是需要展示之前勾选的项，这时候就用到了默认勾选的属性

   const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: record => ({
        defaultChecked: selectedRowKeys.includes(`${record.id  }`),
      }),
    };

如有错误或疑问，欢迎指出~