【问题标题】:Material-Table replace checkboxes with radio buttonsMaterial-Table 用单选按钮替换复选框
【发布时间】:2020-07-09 12:21:13
【问题描述】:

我正在使用material-table 来显示一些数据,现在我想一次选择一行以将该行的数据传递给另一个组件,因此能够同时选择多行不是我想要的'我正在寻找,主要的建议是选择一个单选按钮。那么有没有办法用单选按钮替换表格上的复选框或使选择选项只允许一次选择一行?

【问题讨论】:

    标签: reactjs material-ui material-table


    【解决方案1】:

    根据documentation,你的双手被绑住了。但是,这可能有效:

    1. 为使用MaterialTable的组件添加selectedRow
    2. 创建一些方法或函数,例如handleSelection 并将其传递给 onSelectionChange 道具。这个函数的参数是一个数组,handleSelection 返回
    3. 当用户选择某行时,将selectedRow 设置为该行对象
    4. 如果用户单击“选择所有”复选框(左上角) - 显示不支持操作的通知。如果无法以编程方式取消选择所有复选框 - 卸载并安装 MaterialTable(重置复选框)
    5. 如果已经选择了一行,则选择另一行(这会选择两行)- 重复步骤“4”

    我知道这有点复杂,但这是我目前能想到的最好的方法

    n.b.您可以做的另一件事(强制用户只选择一行)是在多选时隐藏表格并显示有关他们可以做什么的消息。消息可以关闭。当消息关闭时,可能会出现新表(再次安装)。

    更新

    刚刚找到了另一个可能对您有用的选项。查看“简单操作示例”中的this page。那里有按钮而不是复选框。我开始认为:

     options={{
       selection: true
     }}
    

    不是你的正确选择。

    【讨论】:

      猜你喜欢
      • 2014-09-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-18
      • 2018-12-17
      • 1970-01-01
      相关资源
      最近更新 更多