禁用他人选择的表格行

Question

我正在使用react material-table，我想知道是否有选择表行的方法来禁用同一表的其他行。我正在使用：

material-table selection: true 

我看到有一个“ onSelectionChange”，但我无法使其适用于我的情况。

Answer 1

是的，有可能： 如果选中某行以删除悬停动画，则首先将选定的行保存为状态并返回undefined： onRowClick={!this.state.selectedRow ? ((evt, selectedRow) => this.setState({ selectedRow })): undefined}。

此外，您可以覆盖选项中的rowStyle以使文本颜色变灰以使行看起来被禁用：

options={{
         rowStyle: rowData => ({
            color: (this.state.selectedRow && this.state.selectedRow.tableData.id !== rowData.tableData.id) ? '#AAA' : '#000'
       })
}}

点击前的外观如下： 点击后就像这样： 当然，您可以根据自己的喜好更改颜色和行为。

如果选择了父母，这里是codesandbox以防止孩子。有帮助吗？

Answer 2

在jsx元素中使用disabled，如下所示：

`<td disabled={true} />`

或者您也可以在大括号中设置自己的逻辑，何时应禁用它！

谢谢！