ant-design / ant-design/pro-components

🐛[BUG]ProTable中加了Table.EXPAND_COLUMN但是扩展列出现的位置不正确

Open
#8,913 0 comments 2 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 描述

需要调整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]

### 🚑 其他信息

![微信截图_20241210164553](https://github.com/user-attachments/assets/0b566114-e902-4065-9406-46ededaa509f)

Contributor guide

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.