ant-design / ant-design/pro-components

🧐[问题]ProTable列设置的拖动列位置会覆盖columns设置的fixed值

Open
#9,688 0 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

### 🧐 问题描述
依赖如下:
```
"@ant-design/pro-components": "^2.8.10",
"react": "18.3.1",
"react-dom": "18.3.1",
"antd": "^5.29.2"
```
页面加载完成后,我点击列设置,并拖动“创建时间”到“更新时间”后,想要改变列的位置,拖动结束后,“测试11”和“操作”列没有固定在最初的位置了。看localStorage存的值对应字段也没有fixed的值。针对dataIndex是数组的,存储的key存在“test-test1”和“test.test1”两种。

最终我希望拖动后“测试11”和“操作”列能保持之前的展示,固定在之前的位置。

### 💻 代码

```
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable, TableDropdown } from "@ant-design/pro-components";
import { useRef } from "react";
import request from "umi-request";

type GithubIssueItem = {
id: number;
test: {
test1: string;
test2: string;
};
created_at: string;
updated_at: string;
};

const columns: ProColumns[] = [
{
title: "测试11",
dataIndex: ["test", "test1"],
fixed: "left",
},
{
title: "测试22",
dataIndex: ["test", "test2"],
ellipsis: true,
},
{
title: "创建时间",
dataIndex: "created_at",
sorter: true,
},
{
title: "更新时间",
dataIndex: "update_at",
},
{
title: "操作",
dataIndex: "option",
fixed: "right",
render: (text, record, _, action) => [
{
action?.startEditable?.(record.id);
}}
>
编辑
,
],
},
];

const Demo = () => {
const actionRef = useRef();
return (

columns={columns}
actionRef={actionRef}
cardBordered
columnsState={{
persistenceKey: "pro-table-singe-demos",
persistenceType: "localStorage",
onChange: (values) => {
console.log("onChange values", values);
},
}}
rowKey="id"
dataSource={[
{
id: 1111111,
test: {
test1: "wwwwwwwwww",
test2: "LS1111111111",
},
},
]}
columnsState={{
onChange: (values) => {
console.log("va", values);
},
persistenceKey: "wwww",
persistenceType: "localStorage",
}}
/>
);
};

export default () => (




);

```

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Reproduce the provided ProTable example with columnsState persistence enabled, then start at the ProTable columnsState implementation and inspect how dragged-column values are stored and restored. Verify the behavior for fixed left/right columns and array dataIndex keys; done means dragging columns preserves the original fixed placement and uses one consistent persisted key.

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
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.