React Antd 表格：为每行数据添加可编辑自定义行内容

React 使用 Antd 表格为每行数据添加可编辑自定义行内容

想要在 Antd 表格的每条数据下新增一个空对象，用于存放可编辑的自定义行内容，需要以下步骤：

1. 修改数据源：

   • 在数据源中的每个对象中新增一个空对象，可以使用 map 方法遍历数据源，并使用 Object.assign 方法将空对象添加到每个对象中。

   const newData = data.map(item => ({
     ...item,
     'editableRow': {}
   }));
   

2. 添加自定义列：

   • 在 Antd 表格的 columns 属性中添加一个自定义列，该列用于显示可编辑的行。该列需要使用 render 方法来生成可编辑的行。

   const columns = [
     // 其他列...
     {
       title: '操作',
       dataIndex: 'editableRow',
       render: (_, record) => (
         <Input
           value={record.editableRow}
           onChange={e => handleInputChange(e, record)}
         />
       ),
     },
   ];
   

3. 创建输入框变化处理方法：

   • 创建一个方法来处理输入框的变化，并更新数据源中的空对象。

   const handleInputChange = (e, record) => {
     const { value } = e.target;
     const updatedData = newData.map(item => {
       if (item.id === record.id) {
         return {
           ...item,
           'editableRow': value,
         };
       }
       return item;
     });
     setData(updatedData);
   };
   

4. 将数据源和列传递给表格组件：

   • 最后，将更新后的数据源和 columns 属性传递给 Antd 的 Table 组件。

   <Table
     columns={columns}
     dataSource={newData}
   />
   

通过以上步骤，你就能在 Antd 表格的每条数据下新增一个空对象，并使用该对象存放可编辑的行内容。