Question

我有一个包含多行的表，我希望能够一次使它们全部可编辑。使用editable标记，我已经能够进入编辑模式并一次使一行可编辑，但是如果我从一行移到另一行，则不会保存更改。我需要停下来，然后单击一个按钮来保存更改。我希望能够在整个表中进行更改，然后再点击保存按钮。有没有办法用材料表做到这一点？

class Editable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
        { 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 },
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  const index = data.indexOf(oldData);
                  data[index] = newData;
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
}

Answer 1

您始终可以选择覆盖EditRow组件，例如，添加选项卡后可以保存该行。恐怕目前没有其他方法可以合并这种功能。

物料表可编辑：使所有行一次可编辑

1 个答案: