ant-design / ant-design/pro-components

🐛[BUG]取消嵌套列的全选后,选中子列,表格不渲染

Open
#9,225 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

取消嵌套列的全选后,选中子列,表格不渲染

### 📷 复现步骤

取消列全选

Image

选择子项后,表格没有渲染

Image

### 🏞 期望结果

表格应该渲染该列
Image

### 💻 复现代码

```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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.