如何在 mui-datatables 中默认取消选择 selectableRows 中的复选框（当没有数据行时）？答案

【问题标题】：How to unselect the checkbox in the selectableRows by default (when there are no data rows) in mui-datatables?如何在 mui-datatables 中默认取消选择 selectableRows 中的复选框（当没有数据行时）？
【发布时间】：2020-03-23 17:42:16
【问题描述】：

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

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

 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>
  ),
};

如果我运行上面的代码，我会得到空表。

有人可以帮助我如何删除它吗？

提前谢谢你。

【问题讨论】：

标签： reactjs material-ui mui-datatable

【解决方案1】：

您好，请在以下选项中使用 selectableRowsHeader。这里的数据是填充到 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>
    ),
};

【讨论】：