Ant Design Table组件：如何动态修改展开行的其他列样式？

在 Ant Design 的 Table 组件中，如果你想动态修改展开行的其他列样式，可以通过 rowClassName 和 expandedRowRender 属性来实现。具体步骤如下：

1. 使用 rowClassName 动态设置行样式

rowClassName 是一个函数，可以根据行的数据动态返回类名。你可以通过判断某一行是否展开来返回不同的类名。

2. 使用 expandedRowRender 渲染展开内容

expandedRowRender 用于渲染展开行的内容。你可以在这里返回一个自定义的组件或 HTML 结构。

3. 结合 rowClassName 和 expandedRowRender 实现样式修改

通过 rowClassName 判断某一行是否展开，然后返回不同的类名，再通过 CSS 来控制样式。

示例代码

import React, { useState } from 'react';
import { Table } from 'antd';
import './styles.css'; // 引入自定义样式

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const MyTable = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  const handleExpand = (expanded, record) => {
    if (expanded) {
      setExpandedRowKeys([record.key]);
    } else {
      setExpandedRowKeys([]);
    }
  };

  const rowClassName = (record) => {
    return expandedRowKeys.includes(record.key) ? 'expanded-row' : '';
  };

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      expandable={{
        expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.address}</p>,
        onExpand: handleExpand,
      }}
      rowClassName={rowClassName}
    />
  );
};

export default MyTable;

自定义样式 (styles.css)

/* 为展开的行添加样式 */
.expanded-row td {
  background-color: #f0f0f0; /* 修改背景色 */
  font-weight: bold; /* 修改字体加粗 */
}

/* 其他自定义样式 */

解释

1. rowClassName: 通过 rowClassName 函数判断当前行是否展开，如果是展开的行，返回 expanded-row 类名。
2. expandedRowRender: 用于渲染展开行的内容。
3. handleExpand: 处理展开/收起事件，更新 expandedRowKeys 状态。
4. CSS: 通过 .expanded-row td 选择器来修改展开行的样式。

总结

通过结合 rowClassName 和 expandedRowRender，你可以轻松实现动态修改展开行的其他列样式。这种方法不仅灵活，而且易于维护。