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博客

posted @ 2024-02-21 15:02  信铁寒胜  阅读(805)  评论(0)    收藏  举报