vue结合elementui表格el-table实现弹窗checkbox自定义列显示隐藏,刷新保持上次勾选不丢失,附完整代码

news2024/12/23 8:33:30

el-table实现自定义列显示隐藏

有时候表格太多列,要是默认全都显示就会很拥挤,又不能固定只显示某些列,这时候我们可以让用户自定义要显示隐藏哪些列。
网上很多教程都是用的v-if,但是v-if非常麻烦,每一列都要写判断条件,本篇文章将用动态渲染的方式来控制表格列的显示隐藏

功能点

  • 表格数据以及列动态渲染关键点
  • 弹窗可以使用checkbox多选框自定义某些列显示/隐藏
  • 刷新以及下次打开,保持上次显示和勾选

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现的完整代码

核心:监听checkboxcheckbox改变时,重新渲染表格列,同步保存到本地缓存。
完整代码:


                

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

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

相关文章

【Linux】perf使用和FrameGraph

本文主要说明perf和FrameGraph的使用,例如:火焰图的输出,系统性能状态查看等。 Author:mayimin perf version 3.10.0-1160.80.1.el7.x86_64.debug 参考资料:perf example: https://www.brendangregg.com/perf.html 一…

100天精通Golang(基础入门篇)——第7天:深入学习键盘输入和打印输出,掌握常用函数和包

🌷 博主 libin9iOak带您 Go to Golang Language.✨ 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《I…

【UE】滑动UI

效果 步骤 1. 新建一个控件蓝图,这里命名为“WBP_Slide” 2. 在关卡蓝图添加如下节点来显示控件蓝图 3. 打开“WBP_Slide”,添加一个滚动框控件 设置滚动框的锚点 设置滚动朝向为水平 在滚动框中添加一个画布面板 在画布面板中添加一个图像控件 由于我有…

设计优质微信小程序的实用指南!

微信小程序是一种快速发展的应用形式,设计良好的小程序能够提升用户体验并吸引更多的用户。在设计微信小程序时,有一些关键的指南可以帮助我们做出出色的设计。以下是即时设计总结的一些设计指南,希望能对准备设计微信小程序的人有所帮助。 …

64位和32位相比优势是什么(二)

程序的执行过程 当 CPU 执行程序的时候: 1.首先,CPU 读取 PC 指针指向的指令,将它导入指令寄存器。具体来说,完成读取指令这件事情有 3 个步骤: 步骤 1:CPU 的控制单元操作地址总线指定需要访问的内存地…

[CKA]考试之备份还原 etcd

由于最新的CKA考试改版,不允许存储书签,本博客致力怎么一步步从官网把答案找到,如何修改把题做对,下面开始我们的 CKA之旅 题目为: Task 首先,为运行在https://127.0.0.1:2379上的现有 etcd 实例创建快照…

36 # 加载 json 的处理流程

require 源码大致过程 mod.require 会默认调用 require 语法Module.prototype.require 模块的原型上有 require 方法Module._load 调用模块的加载方法,最终返回的是 module.exportsModule._resolveFilename 解析文件名,将文件名变成绝对路径&#xff0c…

UTF是变长编码

在阅读关于UTF8变长编码的文档时,看到如下内容, 文档中1110表示涉及3个字节,10表示涉及一个字节,还有后面的1110高位有三个1,表示从当前字节起有3字节参与表示UNICODE,后面的高位有1个1,表示从当…

Netty实战(十六)

UDP广播事件(二)编写广播者和监视器 一、编写广播者二、编写监视器三、运行 LogEventBroadcaster 和 LogEventMonitor 一、编写广播者 Netty 提供了大量的类来支持 UDP 应用程序的编写。下面我们列出一些要用到的类型: 名 称描 述interface…

价格·歧视

一级价格歧视与耳机价格歧视 价格歧视指的是厂商对于两个完全一样的产品收取不同的价格,无论是对同一消费者还是对不同消费者。 一级价格歧视(完全价格歧视) 对于每一个消费者都收取不同的价格,而且价格定在消费者最多愿意支付的…

基于Java新生报到系统设计与实现(源码+lw+部署文档+讲解等)

博主介绍: ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…

ZooKeeper【客户端命令行】

客户端连接ZooKeeper服务器 启动ZooKeeper集群 ./zkServer.sh start 启动客户端 ./zkCli.sh 我们发现启动客户端时它会默认连接本地的服务器,这是因为zookeeper客户端启动时默认连接的是本地模式。 指定连接集群中的服务器 ./zkServer.sh start -server hadoo…

C语言之结构体讲解

目录 结构体类型的声明 结构体初始化 结构体成员访问 结构体传参 对于上期指针初阶(2)我们后期还会讲数组指针是什么?大家可以先思考一下,后期我们会讲 1.结构体的声明 结构是一些值的集合,这些值被称为成员变量&am…

swagger解析

1.引用swagger包&#xff1a; !-- swagger --> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0</version> </dependency> <dependency><groupId>io…

【Android -- JNI 和 NDK】Java 和 C/C++ 之间传递参数和返回值

本文主要介绍 JNI 的数据传递上&#xff0c;即 Java 如何传递对象给 C; 而 C 又如何将数据封装成 Java 所需的对象。 1. 基本数据类型 传递 java 的基本类型是非常简单而直接的&#xff0c;一个 jxxx 之类的类型已经定义在本地系统中了&#xff0c;比如&#xff1a;jint, jby…

RHCE shell 作业一

1. 设置邮箱 [rootserver ~]# yum install s-nail -y [rootserver ~]# vim /etc/s-nail.rc 编写脚本 [rootserver ~]# vim homework1.sh 设置定时任务 [rootserver ~]# vim /etc/crontab 2. [rootserver ~]# vim homework2.sh 测试&#xff1a; 3. [rootserve…

Maven配置多个镜像源 SpringBoot配置多个镜像源

Maven配置多个镜像源 SpringBoot配置多个镜像源 当在 Maven 中配置多个镜像源&#xff0c;并在 Spring Boot 项目中配置多个镜像源时&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. Maven 中配置多个镜像源 在 Maven 的 settings.xml 文件中&#xff0c;按照以下示例配…

背单词学英语20年经验总结

推荐一款最近开发的单词小程序&#xff1a; 悟道单词&#xff0c;融入了卡片记忆&#xff0c;图像记忆等&#xff0c;融入了我20年背单词经验。 从这个小程序里我悟出了两大记忆原则 两个记忆原则&#xff1a; 1. 图像是文字之本法则 想一想我们原来是怎么记住中文字词的&#…

【文生图系列】基础篇-马尔可夫链

文章目录 马尔可夫链转移矩阵例子 应用实例参考 在阅读论文Denoising Diffusion Probabilistic Models时&#xff0c;发现论文里面介绍扩散概率模型&#xff08;diffusion probabilistic model&#xff09;是一个参数化的马尔科夫链&#xff08;parameterized Markov chain&…

List数组高效率去重

List数组高效率去重 一、环境准备–生成包含重复元素的list数组 /*** 生成包含重复元素的list数组* return*/ private static List<String> getList(){List<String> list new ArrayList<>();for (int i 1; i < 10000; i) {list.add(String.valueOf(i)…