javascript - 是否可以使用 Ant.design 将表格插入表格的每一行？

Question

我正在使用 React + Ant.design 并且我需要制作一个表格，其中每一行将是一个带有多个输入的表单，这些输入代表该行的字段，用户可以编辑每个字段中的值并在末尾按下 Save每一行。

但我不知道该怎么做，因为在 Table 组件中只有 datasource 属性用于 JSON 格式的纯数据。

    const dataSource = [
  {
    id: 1,
    name: 'Name 1',
    number: 1,
    username: 'user1',
    date: '09-09-2011',
    status: 'reviewed'
  },
  {
    id: 2,
    name: 'Name 2',
    number: 2,
    username: 'user2',
    date: '01-10-2021',
    status: 'reviewed'
  }
]

<Table
        size="small"
        rowKey="id"
        dataSource={dataSource}  <-- row data here, need to have form with input for each field
        columns={this.columns}
        bordered={false}
        rowClassName={(record, index) => {
          return cssClasses.tableRow
        }}
        title={TableTitle}
      >

表格行中是否有可能有表单，或者最好只使用 React 组件？

Answer 1

我不完全理解你的问题

你的意思是来自 columns 的渲染回调吗？ Prop ？

您可以在 columns Prop 中定义以呈现输入:

const column = [
  {
    title: 'input',
    dataIndex: 'value',
    render: (value, row, index) => { return <input /> }  // just an example
  }
]

有关更多信息，请查看此示例:

https://ant.design/components/table/#components-table-demo-edit-row