Question

目前，我有一个使用material-table的员工表。有些员工带有某些标志，这些标志使背景行变成红色。看起来像这样：

我想要做的是能够编辑红色背景的行，并且仅行。我不想将editable道具放在整个桌子上，因为那样会占用每行的图标占用空间，但是我只想使用这些特殊标志。

这是我的React代码。请注意，forgotClockOut是我拥有的特殊标志。

<MaterialTable
    icons={icons}
    title="Daily Report"
    columns={[
        { title: 'Name', field: 'name' },
        {
            title: 'Time In',
            field: 'started',
            render: ({ started }) =>
                started
                    ? moment(started).format('h:mm A')
                    : 'Not yet',
            cellStyle: (value, { started, clockedOut }) => {
                if (!started) {
                    return null;
                }

                if (clockedOut) {
                    return { color: 'red' };
                }

                return { color: '#06c92d' };
            },
        },
        { title: 'Time Out', field: 'clockedOut', render: ({clockedOut}) => clockedOut ? moment(clockedOut).format('h:mm A') : 'Not yet'},
        { title: 'Time Worked', field: 'minutesWorked', render: ({minutesWorked}) => `${Math.floor(minutesWorked / 60)}h ${minutesWorked % 60}m`},
    ]}
    options={{
        rowStyle: ({forgotClockOut}) => {
            if(forgotClockOut) {
                return { backgroundColor: '#ffaaaa' };
            }
        }
    }}
    onRowClick={(event, rowData) => {
        const {forgotClockOut} = rowData;
        // ?? What to do here ??
    }}
    data={employees}
/>

有什么办法只能编辑使用material-table制成的表中的某些行？

Answer 1

您可以使用编辑道具来定义：

<MaterialTable
    editable={{
        isEditable: rowData => rowData.name === 'a', // only name(a) rows would be editable
}}/>

您可以在文档中看到：https://material-table.com/#/docs/features/editable

Answer 2

即使使用道具isEditable和isDeletable，也无法隐藏这两个图标。如果要完全隐藏它们，请尝试使用Conditionals Actions。

如果您需要快速解决此问题的方法，则可以创建一个在隐藏道具的情况下显示的动作。

const actions={
  [
    rowData => ({
      icon: 'delete',
      isFreeAction: false,
      tooltip: 'Delete User',
      hidden: !rowData.deletable
      onClick:() => {...}
      })
  ]}

如何使材料表中的仅一行可编辑？

2 个答案: