Question

我正在尝试创建一个包含具有下拉菜单的内联可编辑字段的MaterialTable。问题似乎出在列对象中。使用查找属性，可以将key：value对指定为下拉列表项。我的困境似乎是我无法遍历列表并以下面的动态方式添加键值对。它似乎只能以 lookup：{1：“测试值”，2：“测试值2”}} 的形式工作。请解释我的理解是否正确。

<MaterialTable
    title="Available Attributes"
    icons={this.tableIcons}
    data={availableAttributesList}
    columns={[
      { title: 'Attribute', field: 'name' },
      {
        title: 'Data Type',
        field: 'dataType',
        lookup: { dataTypePayload.map((attribute, name) => ({
         attribute.id : attribute.dataType
        }))}
      }
    ]}
    options={{
      actionsColumnIndex: -1
    }}
    editable={{

      onRowAdd: newData =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = editableAvailableAttributesList;
              data.push(newData);
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        }),
      onRowUpdate: (newData, oldData) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              const data = editableAvailableAttributesList;
              const index = data.indexOf(oldData);
              data[index] = newData;
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        }),
      onRowDelete: oldData =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            {
              let data = availableAttributesList;
              const index = data.indexOf(oldData);
              data.splice(index, 1);
              this.setState({ data }, () => resolve());
            }
            resolve();
          }, 1000);
        })
    }}
  />

Answer 1

map创建一个对象数组，然后将其放置在另一个对象中。

您已经注意到，这将无法正常工作。要获得所需的格式，请尝试以下操作：

<MaterialTable
  // ...other props
  columns={[
    { title: 'Attribute', field: 'name' },
    {
      title: 'Data Type',
      field: 'dataType',
      lookup: dataTypePayload.reduce((acc: any, attribute: any) => {
        acc[attribute.id] = attribute.dataType
        return acc
      }, {})
    }
  ]}
  // ...other props
/>

希望有帮助！

内联MaterialTable编辑和下拉菜单

1 个答案: