material-table 如何做可选择和可编辑的表格？

Posted 2023-02-22

【中文标题】material-table 如何做可选择和可编辑的表格？

【英文标题】：material-table How to do selectable and editable table?

【发布时间】：2020-01-28 16:40:07

【问题描述】：

我想做这个（选择的一些动作和每行的一些动作）。请帮忙，谢谢！

我使用material-table 和ReactJS。现在我在每一行上都有动作，没有可选择的，如果添加选择道具，这些动作就会消失。我不知道如何将每行操作与多个操作结合起来..

【参考方案1】：

您可以将 position: 'row' 属性添加到操作中。 position 属性有 4 个选项可用：auto'、toolbar、toolbarOnSelect、row

这个最小的代码 sn-p 应该可以工作

   <MaterialTable
          actions=[
            
              icon: 'save',
              tooltip: 'Save User',
              position: 'row',
              onClick: (event, rowData) => alert('You saved ' + rowData.name)
            ,
            
              icon: 'delete',
              tooltip: 'Delete User',
              position: 'row',
              onClick: (event, rowData) =>
                alert('You want to delete ' + rowData.name)
            
          ]
          columns=[
             title: 'Name', field: 'name' ,
             title: 'Surname', field: 'surname' ,
             title: 'Birth Year', field: 'birthYear', type: 'numeric' ,
            
              title: 'Birth Place',
              field: 'birthCity',
              lookup:  34: 'İstanbul', 63: 'Şanlıurfa' 
            
          ]
          data=[
            
              name: 'Mehmet',
              surname: 'Baran',
              birthYear: 1987,
              birthCity: 63
            ,
            
              name: 'Zerya Betül',
              surname: 'Baran',
              birthYear: 2017,
              birthCity: 34
            
          ]
          options=
            selection: true,
            actionsColumnIndex: -1
          
          title="Positioning Actions Column Preview"
        />

【讨论】：

这行得通！它不在材料表网站上的文档中，但它确实有效。

这也对我有用，我认为这应该是选择的答案@oHorbachov

在使用动作作为函数的情况下它不起作用，例如 (rowData) => ( position: "row", onClick: ... ) ！

【参考方案2】：

这里是the exact place 源中的selection 属性设置为 true 时决定是否显示操作列：

if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection).length > 0) 
    // ... 

另一个这样的地方在renderActionsmethod:

const actions = this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection);

所以它要么必须是isFreeAction，要么应该将selection 设置为false。目前，您可以自定义它的唯一方法是覆盖 Row 组件 - 基本上是复制/粘贴它，修改这些条件，将结果作为新组件导入并在 material-table 配置的 components 属性中提供它作为Row 的覆盖。

代码沙盒：https://codesandbox.io/s/jovial-architecture-ggnrl