ant-design / ant-design/pro-components
🐛[BUG]取消嵌套列的全选后,选中子列,表格不渲染
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
取消嵌套列的全选后,选中子列,表格不渲染
### 📷 复现步骤
取消列全选
选择子项后,表格没有渲染
### 🏞 期望结果
表格应该渲染该列
### 💻 复现代码
```tsx
import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
const valueEnum = {
0: 'close',
1: 'running',
2: 'online',
3: 'error',
};
export type TableListItem = {
key: number;
name: string;
status: string;
updatedAt: number;
createdAt: number;
progress: number;
money: number;
};
const tableListDataSource: TableListItem[] = [];
for (let i = 0; i < 2; i += 1) {
tableListDataSource.push({
key: i,
name: `TradeCode ${i}`,
status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
updatedAt: Date.now() - Math.floor(Math.random() * 1000),
createdAt: Date.now() - Math.floor(Math.random() * 2000),
money: Math.floor(Math.random() * 2000) * i,
progress: Math.ceil(Math.random() * 100) + 1,
});
}
const timeAwait = (waitTime: number): Promise =>
new Promise((res) =>
window.setTimeout(() => {
res();
}, waitTime),
);
const columns: ProColumns[] = [
{
title: '序号',
dataIndex: 'index',
valueType: 'index',
width: 80,
},
{
title: '状态',
dataIndex: 'status',
initialValue: 'all',
filters: true,
onFilter: true,
valueEnum: {
all: { text: '全部', status: 'Default' },
close: { text: '关闭', status: 'Default' },
running: { text: '运行中', status: 'Processing' },
online: { text: '已上线', status: 'Success' },
error: { text: '异常', status: 'Error' },
},
},
{
title: '进度',
key: 'progress',
dataIndex: 'progress',
valueType: (item) => ({
type: 'progress',
status: item.status !== 'error' ? 'active' : 'exception',
}),
},
{
title: '时间',
key: 'since',
dataIndex: 'createdAt',
valueType: 'date',
children: [
{
title: '创建时间',
dataIndex: 'createdAt',
valueType: 'date',
},
{
title: '更新时间',
dataIndex: 'updatedAt',
valueType: 'date',
},
],
},
];
export default () => {
const [time, setTime] = useState(() => Date.now());
const [polling, setPolling] = useState(2000);
return (
columns={columns}
rowKey="key"
pagination={{
showSizeChanger: true,
}}
polling={polling}
request={async () => {
await timeAwait(2000);
setTime(Date.now());
return {
data: tableListDataSource,
success: true,
total: tableListDataSource.length,
};
}}
dateFormatter="string"
headerTitle={`上次更新时间:${dayjs(time).format('HH:mm:ss')}`}
toolBarRender={() => [
{
if (polling) {
setPolling(0);
return;
}
setPolling(2000);
}}
>
{polling ? : }
{polling ? '停止轮询' : '开始轮询'}
,
]}
/>
);
};
```
### © 版本信息
- ProComponents 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境 Chrome 版本 138.0.7204.184(正式版本) (arm64)
- 开发环境 [e.g. mac OS]
Contributor guide
Research direction
Start with the provided TypeScript ProTable reproduction and trace how nested-column selection changes are handled after clearing the parent selection. Reproduce the interaction in Chrome 138, then verify that selecting a child column causes the table to render that column as shown in the expected result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100