antd 踩坑

1. tree table rowSelection

树形表格 在树形的数据每层前面都会有CheckBox,但是需要需要里层的CheckBox隐藏,可以这么做
.tsx

  const rowSelection: TableRowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: !record.use,
      className: !record.use && styles.tableSelectCheckboxHide
    })
  };

.less

.tableSelectCheckboxHide {
  display: none;
}

但是我们点击全选的时候,被隐藏的里层CheckBox的key还是会被放到selectedRowKeys里,怎么解决这个问题

  const rowSelection: TableRowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: !record.use, // 里层的CheckBox设置为disabled就不会被选中
      className: !record.use && styles.tableSelectCheckboxHide // 控制里层checkbox不显示
    })
  };

table rowSelection 支持指定某一行的 checkbox 是否是 disabled

你可能感兴趣的:(react.js,antd,ant-design)