Antd的ProTable高级表格缓存列设置

1、目的：要将 ProTable 组件的列设置缓存到 localStorage 中，你可以使用浏览器的 localStorage API。通过监听 onColumnsStateChange 事件，你可以在每次列的显示和隐藏状态发生变化时，将最新的列设置保存到 localStorage 中。然后，在组件初始化时，从 localStorage 中读取之前保存的列设置，并将其应用到 ProTable 组件。

2、以下是一个示例代码：

import React, { useEffect, useState } from 'react';
import { ProTable } from '@ant-design/pro-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John',
    age: 30,
    address: '123 Street, City',
  },
  {
    key: '2',
    name: 'Jane',
    age: 25,
    address: '456 Avenue, Town',
  },
];

function MyTable() {
  const [columnsStateMap, setColumnsStateMap] = useState({});

  useEffect(() => {
    // 从 localStorage 中读取列设置
    const savedColumnsStateMap = JSON.parse(localStorage.getItem('proTableColumnsStateMap'));

    if (savedColumnsStateMap) {
      setColumnsStateMap(savedColumnsStateMap);
    }
  }, []);

  const handleColumnsStateChange = (newColumnsStateMap) => {
    // 将最新的列设置保存到 localStorage 中
    localStorage.setItem('proTableColumnsStateMap', JSON.stringify(newColumnsStateMap));
    setColumnsStateMap(newColumnsStateMap);
  };

  return (
    <ProTable
      columns={columns}
      dataSource={data}
      columnsState={{
          value: columnsStateMap, //列状态的值，支持受控模式
          onChange: handleColumnsStateChange, //列状态的值发生改变之后触发
      }}
    />
  );
}

export default MyTable;

　　

在上面的示例中，我们使用 useEffect 钩子，在组件初始化时从 localStorage 中读取之前保存的列设置，并将其应用到 ProTable 组件。然后，通过监听 onColumnsStateChange 事件，将最新的列设置保存到 localStorage 中。

这样，每次用户改变列的显示和隐藏状态时，列设置都会被缓存到 localStorage 中，并在下次打开页面时恢复。

希望这个示例对你有所帮助。如果有任何疑问，请随时提问。

 

参考：1、ChartGpt

　　　 2、antd Protable高级表格 缓存列设置_protable的setting列设置-CSDN博客