Question

我要执行此操作（某些动作用于选定行，某些动作用于每一行）。请帮助，谢谢！

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

Answer 1

您可以将position: 'row'道具添加到动作中。 position道具有4个可用选项：auto'，toolbar，toolbarOnSelect，row

此最小代码段应该有效

   <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"
        />

Answer 2

此处是the exact place的来源，当selection属性设置为 true 时，决定是否显示操作列：

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

另一个这样的地方在renderActions method中：

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

因此它必须是isFreeAction或selection应该设置为 false 。目前，您可以自定义此方法的唯一方法是覆盖Row组件-基本复制/粘贴，修改条件，将结果导入为新组件并将其提供给components配置为material-table的替代。

CodeSandbox：https://codesandbox.io/s/jovial-architecture-ggnrl

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

2 个答案: