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博客
标签:缓存,const,localStorage,设置,ProTable,组件,Antd From: https://www.cnblogs.com/wwssgg/p/18025242