ant-design / ant-design/pro-components
🐛[BUG]ProTable中加了Table.EXPAND_COLUMN但是扩展列出现的位置不正确
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
需要调整ProTable展开列的位置,因此我在column定义的时候加入了Table.EXPAND_COLUMN,但是无论我把Table.EXPAND_COLUMN放在哪,展开列始终在第二列
### 📷 复现步骤
创建ProTable,在column的最后一列前面加入Table.EXPAND_COLUMN以调整展开列的位置到此处
### 🏞 期望结果
展开列出现在倒数第二列
### 💻 复现代码
```
import React from 'react'
import { DownOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Tag,Table } from 'antd';
export type Status = {
color: string;
text: string;
};
const statusMap = {
0: {
color: 'blue',
text: '进行中',
},
1: {
color: 'green',
text: '已完成',
},
2: {
color: 'volcano',
text: '警告',
},
3: {
color: 'red',
text: '失败',
},
4: {
color: '',
text: '未完成',
},
};
export type TableListItem = {
key: number;
name: string;
containers: number;
creator: string;
status: Status;
createdAt: number;
};
const tableListDataSource: TableListItem[] = [];
const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
key: i,
name: 'AppName',
containers: Math.floor(Math.random() * 20),
creator: creators[Math.floor(Math.random() * creators.length)],
status: statusMap[((Math.floor(Math.random() * 10) % 5) + '') as '0'],
createdAt: Date.now() - Math.floor(Math.random() * 100000),
});
}
const columns: ProColumns[] = [
{
title: '应用名称',
width: 120,
dataIndex: 'name',
render: (_) => {_},
},
{
title: '状态',
width: 120,
dataIndex: 'status',
render: (_, record) => (
{record.status.text}
),
},
{
title: '容器数量',
width: 120,
dataIndex: 'containers',
align: 'right',
sorter: (a, b) => a.containers - b.containers,
},
Table.EXPAND_COLUMN,
{
title: '创建者',
width: 120,
dataIndex: 'creator',
valueEnum: {
all: { text: '全部' },
付小小: { text: '付小小' },
曲丽丽: { text: '曲丽丽' },
林东东: { text: '林东东' },
陈帅帅: { text: '陈帅帅' },
兼某某: { text: '兼某某' },
},
},
];
const expandedRowRender = () => {
const data = [];
for (let i = 0; i < 3; i += 1) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return (
[Pause, Stop],
},
]}
headerTitle={false}
search={false}
options={false}
dataSource={data}
pagination={false}
/>
);
};
function App() {
return (
columns={columns}
request={(params, sorter, filter) => {
// 表单搜索项会从 params 传入,传递给后端接口。
console.log(params, sorter, filter);
return Promise.resolve({
data: tableListDataSource,
success: true,
});
}}
rowKey="key"
pagination={{
showQuickJumper: true,
}}
expandable={{ expandedRowRender }}
search={false}
dateFormatter="string"
headerTitle="嵌套表格"
options={false}
toolBarRender={() => [
查看日志,
导出数据
,
创建应用
,
]}
/>
)
}
export default App
```
### © 版本信息
- ProComponents 版本: 2.6.49
- umi 版本
- 浏览器环境 [Chrome、Firefox]
- 开发环境 [Ubuntu、Windows]
### 🚑 其他信息

Contributor guide
Research direction
Start by running the supplied ProTable reproduction with Table.EXPAND_COLUMN placed before the final column, then inspect how ProTable processes the columns and expandable configuration. Done means the expand column appears in the position specified by the columns array, with the reproduction continuing to work in the reported environments.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100