如何保存Ant Design Pro Table的表格设置避免刷新重置？

要实现列隐藏、列顺序调整后的设置持久化，核心是利用Pro Table提供的列变更回调，将状态保存到localStorage，页面初始化时再读取恢复。

1. 监听列变更事件，保存状态到localStorage #

Pro Table提供了onColumnsChange（列显示/隐藏变更）和onColumnOrderChange（列顺序变更）两个回调，可在回调里把最新的列配置存到本地存储：

import { ProTable } from '@ant-design/pro-components';
import { useState } from 'react';

const TableWithPersistentSettings = () => {
  // 表格唯一标识，区分多个表格的配置
  const TABLE_KEY = 'user-list-table-settings';

  // 默认列配置
  const defaultColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age', hide: false },
    // 其他列配置...
  ];

  // 初始化时读取本地存储的配置，无则用默认值
  const [columns, setColumns] = useState(() => {
    const savedColumns = localStorage.getItem(TABLE_KEY);
    return savedColumns ? JSON.parse(savedColumns) : defaultColumns;
  });

  // 列显示/隐藏变更时保存配置
  const handleColumnsChange = (newColumns) => {
    setColumns(newColumns);
    try {
      localStorage.setItem(TABLE_KEY, JSON.stringify(newColumns));
    } catch (e) {
      console.warn('无法保存表格列配置:', e);
    }
  };

  // 列顺序变更时保存配置
  const handleColumnOrderChange = (newColumns) => {
    setColumns(newColumns);
    try {
      localStorage.setItem(TABLE_KEY, JSON.stringify(newColumns));
    } catch (e) {
      console.warn('无法保存表格列配置:', e);
    }
  };

  return (
    <ProTable
      columns={columns}
      onColumnsChange={handleColumnsChange}
      onColumnOrderChange={handleColumnOrderChange}
      rowKey="id"
      // 其他表格配置...
    />
  );
};

export default TableWithPersistentSettings;

2. 关键注意事项 #

• 唯一标识：每个需要持久化的表格要设置不同的TABLE_KEY，避免多表格配置互相覆盖。
• 异常兼容：给localStorage操作添加try-catch，处理浏览器禁用本地存储或存储配额不足的情况。
• 配置兼容：如果后续默认列有新增/修改，可在初始化时做配置合并，确保新列能正常显示。

内容的提问来源于stack exchange，提问作者Uğur