reactjs - Material-Table 如何制作可选择和可编辑的表格？

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