Ant Design表格展开行：如何动态修改同一行其他列的样式？

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

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

rowClassName 是一个函数，它可以根据行的数据动态返回一个类名。你可以在这个函数中判断当前行是否展开，然后返回相应的类名。

2. 使用 expandedRowRender 渲染展开内容

expandedRowRender 是一个函数，用于渲染展开行的内容。你可以在这个函数中返回你想要展示的内容。

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

你可以在 rowClassName 中根据行的展开状态来动态设置类名，然后在 CSS 中定义这些类名的样式。

示例代码

import React, { useState } from 'react';
import { Table } from 'antd';
import './index.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',
  },
];

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

const App = () => {
  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>{record.address}</p>,
        onExpand: handleExpand,
      }}
      rowClassName={rowClassName}
    />
  );
};

export default App;

4. 定义 CSS 样式

在 index.css 文件中定义 expanded-row 类的样式：

.expanded-row td {
  background-color: #f0f0f0; /* 修改背景色 */
  font-weight: bold; /* 修改字体加粗 */
}

解释

• expandedRowKeys 用于存储当前展开的行的 key。
• handleExpand 函数用于处理行的展开和收起事件，更新 expandedRowKeys。
• rowClassName 函数根据 expandedRowKeys 动态返回类名 expanded-row。
• 在 CSS 中，expanded-row 类用于修改展开行的样式。

通过这种方式，你可以在 Ant Design 的 Table 组件中动态修改展开行的其他列样式。