根据您提供的信息,可以尝试以下步骤来解决问题:

  1. 确保您已经正确引入了antd和react相关的依赖。

  2. 确保您的表格组件已经正确配置了columns和dataSource属性。

  3. 确保您的自定义行组件已经正确定义,并且在components.body中引用了该组件。

  4. 确保您的自定义行组件能够正确接收并显示数据。

  5. 确保您的编辑功能已经正确实现,包括将自定义行切换为输入框,并能够正确保存修改的数据。

以下是一个简单的示例代码,演示了如何使用antd表格和自定义行组件来实现所描述的功能:

import React, { useState } from 'react';
import { Table, Input } from 'antd';

const CustomRow = ({ record, handleEdit }) => {
  const [value, setValue] = useState(record.data);

  const handleInputChange = e => {
    setValue(e.target.value);
  };

  return (
    <tr>
      <td>{record.name}</td>
      <td>
        {record.isEditing ? (
          <Input value={value} onChange={handleInputChange} />
        ) : (
          record.data
        )}
      </td>
      <td>
        {record.isEditing ? (
          <button onClick={() => handleEdit(record.id, value)}>Save</button>
        ) : (
          <button onClick={() => handleEdit(record.id)}>Edit</button>
        )}
      </td>
    </tr>
  );
};

const MyTable = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', data: 'Data 1', isEditing: false },
    { id: 2, name: 'Jane', data: 'Data 2', isEditing: false },
    // Add more data here
  ]);

  const handleEdit = (id, value) => {
    setData(prevData =>
      prevData.map(item =>
        item.id === id ? { ...item, data: value, isEditing: !item.isEditing } : item
      )
    );
  };

  const columns = [
    { title: 'Name', dataIndex: 'name' },
    { title: 'Data', dataIndex: 'data', render: (_, record) => <CustomRow record={record} handleEdit={handleEdit} /> },
    { title: 'Action', dataIndex: '', render: (_, record) => <CustomRow record={record} handleEdit={handleEdit} /> },
  ];

  return <Table columns={columns} dataSource={data} />;
};

export default MyTable;

在上面的示例代码中,我们使用useState钩子函数来管理表格数据。每一条数据都有一个isEditing属性,用于表示当前是否处于编辑状态。当点击编辑按钮时,会切换isEditing的值。同时,我们还使用了render属性来渲染自定义行组件,并传递了handleEdit函数用于保存编辑后的数据。

您可以根据实际需求进行修改和扩展。希望以上信息对您有所帮助!

React Antd 表格自定义行自动回显数据,编辑切换输入框,无数据显示表格

原文地址: https://www.cveoy.top/t/topic/o33g 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录