Ant Design表格展开行：巧妙实现样式动态调整
在使用Ant Design的Table组件时，我们经常会用到expandable属性来实现表格行的展开功能。然而，有时我们需要在展开行时动态修改同一行其他列的样式，例如改变文字颜色或背景色，以增强用户体验。本文将详细讲解如何实现这一功能。
问题： 如何在Ant Design Table组件中，动态修改可展开行展开后其他列的样式？例如，只改变展开行的“name”列的文字颜色？
解决方案： 关键在于利用expandedRowKeys属性判断当前行是否处于展开状态。Ant Design的Table组件提供render函数，我们可以利用它根据expandedRowKeys动态控制样式。
具体实现： 在表格列的render方法中添加条件判断逻辑。expandedRowKeys是一个数组，包含所有已展开行的key值。通过判断当前行的key是否包含在expandedRowKeys中，即可确定当前行是否已展开。如果是展开状态，则应用相应的样式；否则，保持原有样式。
例如，假设表格数据结构如下：
const data = [
{ key: 1, name: 'john doe', age: 30 },
{ key: 2, name: 'jane doe', age: 25 },
];
那么，在name列的render方法中，可以这样写：
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text, record, index) => {
const isExpanded = expandedRowKeys.includes(record.key);
return <span style={{ color: isExpanded ? 'red' : 'black' }}>{text}</span>;
},
},
// ... other columns
];
代码中，expandedRowKeys是从Table组件状态中获取的已展开行key数组。根据isExpanded的值，动态设置name列文字的颜色。已展开的行文字颜色为红色，否则为黑色。 您可以根据需要修改其他样式属性。 记住，需要将expandedRowKeys作为props传递到Table组件中。
通过这种方法，即可实现点击展开行时，动态改变同一行其他列样式的需求，提升用户界面的交互体验。
