在mui-datatables中默认情况下（当没有数据行时，如何取消选择selectableRows中的复选框？

Posted 2021-04-30

如果有数据，就可以正常工作。但是，虽然没有数据，但默认情况下会选择它。

这是我的代码，用于选项。

 const options = {
  selectableRows: "multiple",
  //selectableRowsOnClick: true,
  rowsSelected: this.state.rowsSelected,
  onRowsSelect: (rowsSelected, allRows) => {
    this.setState({ rowsSelected: allRows.map(row => row.dataIndex) });
  },
  customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
    <div className="mailIconDiv">
      <IconButton
        color="primary"
        onClick={() => this.handleClick()}
      >
        <i className="zmdi zmdi-email"></i>
      </IconButton>
    </div>
  ),
};

如果我运行上述代码，则会得到空表。

有人可以帮我移除它吗？

谢谢你。

答案

您好，在以下选项中使用selectableRowsHeader。这里的data是填充到mui-datatable的集合。如果数据为空，则selectableRowsHeader将被隐藏。

const options = {
    selectableRows: "multiple",
    selectableRowsHeader: data.length > 0,
    //selectableRowsOnClick: true,
    rowsSelected: this.state.rowsSelected,
    onRowsSelect: (rowsSelected, allRows) => {
        this.setState({rowsSelected: allRows.map(row => row.dataIndex)});
    },
    customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
        <div className="mailIconDiv">
            <IconButton
                color="primary"
                onClick={() => this.handleClick()}
            >
                <i className="zmdi zmdi-email"></i>
            </IconButton>
        </div>
    ),
};