Ant Design 表格自定义行编辑：实现点击按钮变输入框并自定义样式

要实现在 Ant Design 表格中每一条数据下新增一条自定义行，并且点击操作按钮后，自定义行变成输入框可编辑，以及修改自定义行的样式，可以按照以下步骤进行操作：

在表格的 columns 中添加一个自定义的列，用于显示操作按钮，并在 render 函数中返回一个按钮组件。

const columns = [
  // 其他列配置...
  {
    title: '操作',
    dataIndex: 'operation',
    render: (text, record, index) => (
      <Button onClick={() => handleEdit(index)}>编辑</Button>
    ),
  },
];

在表格的 dataSource 中新增一条自定义行的数据，可以通过在数据源中插入一个空对象实现。

const dataSource = [
  // 其他数据...
  {},
];

添加一个状态变量，用于记录自定义行的编辑状态。

const [editingIndex, setEditingIndex] = useState(-1);

编写一个 handleEdit 函数，用于处理自定义行的编辑操作。该函数接收一个索引参数，表示要编辑的自定义行的索引。

const handleEdit = (index) => {
  setEditingIndex(index);
};

在表格的 render 函数中，根据 editingIndex 的值判断自定义行是否处于编辑状态，如果是，则返回一个带有输入框的自定义行，否则返回普通的自定义行。

const renderCustomRow = (record, index) => {
  if (index === editingIndex) {
    return (
      <Form>
        <Form.Item>
          <Input defaultValue={record.someField} />
        </Form.Item>
        {/* 其他输入框... */}
      </Form>
    );
  }
  return (
    <div>
      {/* 自定义行的内容 */}
    </div>
  );
};

在表格的 rowClassName 属性中设置一个回调函数，用于根据 editingIndex 的值给自定义行添加不同的样式。

const getRowClassName = (record, index) => {
  if (index === editingIndex) {
    return 'editing-row';
  }
  return '';
};

在 CSS 样式文件中定义 editing-row 类的样式，用于修改自定义行的样式。

.editing-row {
  background-color: #f0f0f0;
  /* 其他样式... */
}

最后，在表格组件中使用上述配置。

<Table
  columns={columns}
  dataSource={dataSource}
  rowClassName={getRowClassName}
  rowRender={renderCustomRow}
/>

通过以上步骤，就可以实现在 Ant Design 表格中每一条数据下新增一条自定义行，并且点击操作按钮后，自定义行变成输入框可编辑，并且可以修改自定义行的样式。