Vxe UI vxe-table custom 实现自定义列服务端保存,服务端恢复状态,实现用户个性化列信息保存

Vxe UI vue vxe-table custom 实现自定义列服务端保存,服务端恢复状态,实现用户个性化列信息保存

支持将自定义列状态信息,列宽、冻结列、列排序、列显示隐藏 等状态信息保存到本地或服务端

代码

实现自定义列状态保存功能,只需要自定义两个方法即可,支持局部设置,也可以通过 setConfig({}) 全局设置。

custom-config
storage 用于开启状态保存功能,默认是自动保存在 localStorage 本地
restoreStore 用于自定义恢复方法,异步从服务端获取数据,恢复状态
updateStore 用于保存方法,异步将数据保存到服务端

<template><div><vxe-toolbar ref="toolbarRef" custom></vxe-toolbar><vxe-tableid="myCustomUpdate"ref="tableRef":custom-config="customConfig":data="tableData"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column></vxe-table></div>
</template><script setup>
import { onMounted, ref, reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const toolbarRef = ref()
const tableRef = ref()const tableData = ref([{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])// 模拟查询接口
const findCustomSetting = (id) => {return new Promise(resolve => {setTimeout(() => {try {if (sessionStorage.getItem(id)) {resolve(JSON.parse(sessionStorage.getItem(id) || ''))VxeUI.modal.message({status: 'success',content: '异步还原用户个性化数据成功'})} else {resolve({})}} catch (e) {resolve({})}}, 300)})
}// 模拟保存接口
const saveCustomSetting = (id, storeData) => {return new Promise(resolve => {setTimeout(() => {console.log(storeData)sessionStorage.setItem(id, JSON.stringify(storeData))VxeUI.modal.message({status: 'success',content: '保存用户个性化数据成功'})resolve()}, 200)})
}const customConfig = reactive({storage: true, // 启用自定义列状态保存功能restoreStore ({ id }) {// 从服务端调用接口获取当前用户表格自定义列数据,支持异步,返回 Promisereturn findCustomSetting(id)},updateStore ({ id, storeData }) {// 当 storage 启用后,默认会自动保存在浏览器本地 localStorage 里面,可以通过自定义改方法,使用服务端保存// 将用户自定义的列数据保存到服务端,支持异步,返回 Promisereturn saveCustomSetting(id, storeData)}
})onMounted(() => {const $table = tableRef.valueconst $toolbar = toolbarRef.value// 关联工具栏if ($table && $toolbar) {$table.connect($toolbar)}
})
</script>

效果

将自定义列状态信息,列宽、冻结列、列排序、列显示隐藏 等状态信息保存到服务端
请添加图片描述
操作之后,再次进来页面,从服务端恢复列状态

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26315.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在气膜建筑中运动,我们会感觉到不舒服吗—轻空间

气膜建筑是一种以膜材为主要结构&#xff0c;通过空气压力支撑的新型建筑形式&#xff0c;广泛应用于体育场馆、游泳馆和多功能运动场等领域。然而&#xff0c;人们常常担心在这种建筑中运动是否会感到不适。本文将探讨气膜建筑中运动的舒适度问题&#xff0c;并结合相关的技术…

【深度学习】IP-Adapter 和 InstantID 的核心机制比较

IP-Adapter 和 InstantID 是两个在图像生成中具有不同优势和应用场景的模型。以下是这两个模型的区别及其理论分析。 IP-Adapter 特点: 图像提示能力: IP-Adapter 通过引入图像提示能力&#xff0c;使得预训练的文本到图像扩散模型可以接受图像作为提示&#xff0c;从而生成…

区间预测 | 带有置信区间的BP神经网络时间序列未来趋势预测Matlab实现

下面是一个使用带有置信区间的BP神经网络进行时间序列未来趋势预测的简化示例的Matlab代码。请注意&#xff0c;这只是一个示例&#xff0c;并且可能需要根据您的具体数据和问题进行适当的修改和调整。 matlab % 步骤1&#xff1a;准备数据 % 假设有时间序列数据(time_series…

GaN VCSEL:工艺革新引领精准波长控制新纪元

日本工程师们凭借精湛的技艺&#xff0c;开创了一种革命性的生产工艺&#xff0c;让VCSEL的制造达到了前所未有的高效与精准。这一成果由名城大学与国家先进工业科学技术研究所的精英们联手铸就&#xff0c;将氮化镓基VCSELs的商业化进程推向了新的高峰。它们将有望成为自适应前…

Spring Cloud 之 GateWay

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言前言1、通过API网关访问服务2、Spring Cloud GateWay 最主要的功能就是路由…

SQL调优方案

1、尽量避免使用in或not in语句&#xff0c;发生数据库的全表扫描 2、尽量避免使用&#xff01;或< >号&#xff0c;发生数据库的全表扫描 3、在查询多的情况下要使用索引提高查询效率&#xff0c;但也降低了insert或update的操作&#xff0c;对于一个表所要建立的索引…

Web前端转盘抽奖:技术与创意的完美结合

Web前端转盘抽奖&#xff1a;技术与创意的完美结合 在Web前端开发中&#xff0c;转盘抽奖作为一种常见的互动形式&#xff0c;既增加了用户参与度&#xff0c;又提升了用户体验。本文将深入探讨Web前端转盘抽奖的四个方面、五个方面、六个方面和七个方面&#xff0c;带你领略其…

Java中json字符串与json对象

1、json本质 json是一种数据交换格式。 常说的json格式的字符串 > 发送和接收时都只是一个字符串&#xff0c;它遵循json这种格式。 2、前后端交互传输的json是什么&#xff1f; 前后端交互传输的json都是json字符串 比如&#xff1a; 2.1响应过程&#xff1a;后端响应…

JVM的几种常见垃圾回收算法

引言&#xff1a; Java Virtual Machine&#xff08;JVM&#xff09;作为Java程序运行的核心&#xff0c;其垃圾回收&#xff08;Garbage Collection, GC&#xff09;机制在内存管理中起着至关重要的作用。垃圾回收算法是JVM性能优化的重要方面。本文将详细介绍几种常见的垃圾回…

代理IP池功能组件

1.IP池管理器&#xff1a;用于管理IP池&#xff0c;包括IP地址的添加、删除、查询和更新等操作。 2.代理IP获取器&#xff1a;用于从外部资源中获取代理IP&#xff0c;例如从公开代理IP网站上爬取代理IP、从代理服务商订购代理IP等。 3.IP质量检测器&#xff1a;用于检测代理…

树莓派启动后安装向日葵客户端用于唤醒局域网其他机器

11:05 2024/6/11 树莓派启动后安装向日葵客户端 reated symlink /etc/systemd/system/multi-user.target.wants/phtunnel.service → /lib/systemd/system/phtunnel.service. Installation, please later... Successful installation of Phddns Service. -------------------…

ui自动化中,几种文件上传整理2024

input标签的 对于input标签实现的文件上传&#xff0c;看成输入框&#xff0c;直接send_keys 非input标签的 要使用第三方库&#xff1a; 方式1&#xff1a; pip install pypiwin32 要点&#xff1a;图片路径要写路径 方式2&#xff1a;pip install pyautogui 方式3&#…

2024-6-12(沉默JavaIO,Java异常)

1.文件流(开发中操作十分频繁&#xff0c;eg:躺着一个Apache FileUtils类) File 类是文件和目录的抽象表示&#xff0c;主要用于文件和目录的创建、查找和删除等操作。要想修改文件内容&#xff0c;需要借助输入输出流。 2.字节流&#xff1a;JavaIO的基石 一切文件&#xf…

打造你的专属扭蛋机:淘宝扭蛋机小程序搭建全攻略

想要在互联网娱乐领域大展拳脚吗&#xff1f;淘宝扭蛋机小程序或许是你的不二选择。本文将为你提供详细的搭建教程&#xff0c;帮助你轻松打造属于自己的扭蛋机小程序。 一、了解扭蛋机小程序的基本原理 在开始搭建之前&#xff0c;我们需要了解扭蛋机小程序的基本原理。扭蛋机…

Vue26-内置指令03:v-cloak指令

一、需求 将引入本地JS的代码&#xff0c;换成引入外部JS&#xff0c;且引入的外部JS要等待5S。 【备注】&#xff1a;浏览器也能调节网速 二、js阻塞 <body>的最下方也能引入JS&#xff1a; 此时&#xff0c;用户能在5S内看到root容器未编译的部分。 解决该问题&#x…

国思RDIF.vNext全新低代码快速开发框架平台6.1版本发布(支持vue2、vue3)

1、平台介绍 RDIF.vNext&#xff0c;全新低代码快速开发集成框架平台&#xff0c;给用户和开发者最佳的.Net框架平台方案&#xff0c;为企业快速构建跨平台、企业级的应用提供强大支持。 RDIF.vNext的前身是RDIFramework框架&#xff0c;RDIF(Rapid develop Integrate Framewor…

HBase中的CRUD

Table接口&#xff1a;负责表数据的基本操作。 Admin类&#xff1a;负责管理建表、删表、该表等元数据操作的接口。 1、Put方法 1.1、了解put方法之前&#xff0c;必须知道的相关知识。 在HBase中有一个理念&#xff1a;所有的数据皆为bytes。因此在HBase中所有的数据最终都…

【云原生| K8S系列】Kubernetes Daemonset,全面指南

Kubernetes中的DaemonSet是什么? Kubernetes是一个分布式系统&#xff0c;Kubernetes平台管理员应该有一些功能可以在所有节点上运行特定于平台的应用程序。例如&#xff0c;在所有Kubernetes节点上运行日志代理。 这就是Daemonset发挥作用的地方。 Daemonset是一个原生的K…

yolo-inference多后端+多任务+多算法+多精度模型 框架开发记录(cpp版)

先贴出github地址&#xff0c;欢迎大家批评指正&#xff1a;https://github.com/taifyang/yolo-inference 不知不觉LZ已经快工作两年了&#xff0c;由于之前的工作内容主要和模型部署相关&#xff0c;想着利用闲暇时间写一些推理方面的经验总结&#xff0c;于是有了这个工程。其…

JsSIP+FreeSwitch+Vue实现WebRtc音视频通话

效果 让同事帮我测的&#xff0c;在两个电脑分别打开该页面&#xff0c;一个注册 1007 分机号&#xff0c;另一个注册 1005&#xff0c;然后拨打视频电话 依赖版本 jssip&#xff1a;3.6.1 freeswitch&#xff1a;1.10.5-release~64bit vue&#xff1a;2.6.12 488错误解…