使用反应使 MaterialTable 中的列不可编辑

Question

我使用的是最新版本的 MaterialTable (https://material-table.com)，我有 3 列，用户只能编辑一列：

const [columns, setColums] = useState([
    {title: "Number", field: 'itemNumber', editable: 'never'},
    {title: "Description", field: 'itemDescription', editable: 'never'},
    {title: "Amount", field: 'amount', editable:'always'},
    ]);
return (
       <MaterialTable
           title=""
           columns={columns}
           data={this.state.Items}
           editable={{
                onRowUpdate: (newData, oldData) =>
                     new Promise((resolve) => {
                         setTimeout(() => {
                             resolve();
                             this.onRowEditSave(newData);
                         }, 600);
                     }),
           />
       )

在 onRowEditSave() 中我调用了一个 restservice，当我不使用 editable in colums 时它正在工作。
在第二个例子中https://material-table.com/#/docs/features/editable可以看出，它应该是怎样的。

我收到错误：

Types of property 'editable' are incompatible.
Type 'string' is not assignable to type '"never" | "always" | "onUpdate" | "onAdd" | ((columnDef: Column, rowData: IReservedStockItem) => boolean) | undefined'.

(IReservedStockItem is the datastructur of this.state.Items)

有人可以解释错误吗？因为我看不出文档有什么不同。

Answer 1

对于遇到同样问题的人：问题出在 Typescript 上，解决方案是在列定义中写入：

editable: 'never' as string

Answer 2

这就是最终对我有用的东西：

  const never:
  | "always"
  | "onUpdate"
  | "onAdd"
  | "never" = "never";
  
  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname' },
    { title: 'Birth Year', field: 'birthYear',  editable: never},
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]);

我排除了另一种类型，但我还不需要它：

((columnDef: Column<RowData>, rowData: RowData) => boolean);

希望这对某人有所帮助并节省几个小时。

使用反应使 MaterialTable 中的列不可编辑

Making a column not editable in MaterialTable using react

reactjs

material-ui

material-design

material-table