ant-design / ant-design/pro-components
🧐[问题]ProTable列设置的拖动列位置会覆盖columns设置的fixed值
- 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
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