首页 > 其他分享 >Antd的ProTable高级表格缓存列设置

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

时间:2024-02-21 15:13:53浏览次数:30  
标签:缓存 const localStorage 设置 ProTable 组件 Antd

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

相关文章

  • antd 单元格合并处理
    实现效果代码tableData为Table的数据constmergeCells=(text,dataSource,index,key)=>{//上一行该列数据是否一样if(index!==0&&text===dataSource[index-1][key]){return0}letrowSpan=1//判断下一行是否相等f......
  • JetCacheUtil 删除本地及远端缓存
    publicclassJetCacheUtil{privateJetCacheUtil(){}/***删除缓存**/publicstaticbooleanremoveCache(CacheLocatecacheLocate){Assert.isTrue(StringUtils.hasText(cacheLocate.getCacheKey())&&StringUtils.hasT......
  • 面试官:如何实现多级缓存?
    对于高并发系统来说,有三个重要的机制来保障其高效运行,它们分别是:缓存、限流和熔断。而缓存是排在最前面也是高并发系统之所以高效运行的关键手段,那么问题来了:缓存只使用Redis就够了吗?1.冗余设计理念当然不是,不要把所有鸡蛋放到一个篮子里,成熟的系统在关键功能实现时一定会考......
  • 认识Redis:不只是缓存,还有这些厉害的功能!
    在当今数据驱动的世界中,快速存取信息成为了技术发展的关键。而在众多存储解决方案中,Redis以其独特的魅力和强大的功能,成为了开发者们的宠儿。今天,就让我们一起来认识一下Redis。一、Redis是什么,可以用来干什么?Redis,英文全称是RemoteDictionaryServer(远程字典服务),是一个开源......
  • ProTable双击可编辑
    要实现在AntDesign的Table组件中双击单元格修改内容,你可以通过以下步骤来实现:创建一个React组件,并引入所需的依赖:npminstallantd编写示例代码:importReact,{useState}from'react';import{Table,Input}from'antd';constEditableTable=()=>{c......
  • redis高频问题--缓存--数据淘汰策略
    redis-数据淘汰策略redis具体的有八种淘汰策略数据淘汰策略建议总结问答......
  • redis高频问题--缓存--数据过期策略
    redis的数据过期策略惰性删除定期删除总结回答......
  • redis高频问题--缓存击穿
    缓存击穿互斥锁==分布式锁互斥锁多用于关于钱的业务,保持强一致性性能差一些,因为需要互相等待逻辑过期保证高可用性,注重于用户的体验......
  • Vulkan中的同步与缓存控制
    1.IntroductionVulkan提供显式的同步结构,允许CPU与GPU同步命令的执行。并且还可以控制GPU中命令的执行顺序。所有执行的Vulkan命令都将进入队列,并以某种未定义的顺序“不间断”执行。有时,我们明确希望在执行新操作之前确保某些操作已完成。在编写vulkan应用时,虽然对给......
  • 分布式缓存应用:Memcache 或 Redis
    为什么要使用分布式缓存高并发环境下,例如典型的淘宝双11秒杀,几分钟内上亿的用户涌入淘宝,这个时候如果访问不加拦截,让大量的读写请求涌向数据库,由于磁盘的处理速度与内存显然不在一个量级,服务器马上就要宕机。缓存可以将经常读取的数据存储在快速的内存中,从而避免了频繁访问慢速......