antd表格每一条数据下新增一条自定义行且可以修改自定义行的样式

要在antd表格中为每一条数据下新增一条自定义行，并且可以修改自定义行的样式，可以按照以下步骤进行操作：

首先，需要在表格的columns配置项中添加一个自定义行的配置。例如，可以添加一个名为"customRow"的字段，用于渲染自定义行的内容。

const columns = [
  // 其他列配置项...
  {
    title: '操作',
    dataIndex: 'customRow',
    render: (text, record) => (
      <div className="custom-row">
        {/* 自定义行的内容 */}
        {/* 可以根据record的值来动态渲染不同的内容 */}
      </div>
    ),
  },
];

接下来，可以在表格的dataSource中为每一条数据添加一个自定义行的数据。可以在数据源中的每一项对象中添加一个名为"customRow"的字段，用于存储自定义行的内容。

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    customRow: 'Custom row 1',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    customRow: 'Custom row 2',
  },
  // 其他数据项...
];

在自定义行的render方法中，可以根据record的值来动态渲染不同的内容。可以使用record的字段值来控制自定义行的样式。

render: (text, record) => (
  <div className={`custom-row ${record.age > 30 ? 'highlight' : ''}`}>
    {/* 自定义行的内容 */}
    {/* 可以根据record的值来动态渲染不同的内容 */}
  </div>
),

最后，可以使用CSS来修改自定义行的样式。可以在自定义行的外层div元素上添加自定义的类名，并在CSS中定义对应的样式。

.custom-row {
  /* 自定义行的样式 */
}

.highlight {
  /* 高亮样式 */
}

通过以上步骤，就可以在antd表格中为每一条数据下新增一条自定义行，并且可以修改自定义行的样式