Vue动态设置控制表格列表展现列

最近遇到一个需求,表格列表默认不展示某一列,当我设置后可以展示该列,也可以展示和隐藏别的列,起到可以对整个表格列展示隐藏控制的效果,如下示例,默认不展示“单位名称”这一列,在我点击设置齿轮后可以看到,有“单位名称”这一列,但未打钩:
在这里插入图片描述
当我勾中“单位名称”,去掉“地址”的勾中后,列表可以看到“单位名称”这一列,看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是:列表展示列我们用到了tableHead,然后我们定义了一个数组showListS用于控制展示列集合,
齿轮里我们用到了el-tree组件,其数据data我们绑定的是一个数组tableHeadArray,默认不展示“单位名称”,我们需要tableHead赋值给tableHeadArray,然后对tableHead过滤掉placeName,当用户勾选或取消勾选某项时,showListS会发生改变,我们watch监听其改变,然后tableHeadArray里找到showListS对应要展示的列,然后赋值给tableHead,达到列表回显的效果。

齿轮浮窗这里代码如下:

    <el-popoverclass<

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

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

相关文章

第2讲-Memory(5)外存

磁盘存储器 组成 记录原理 性能指标 (磁盘存取时间的计算) 磁盘地址 工作过程 优点 ①存储容量大,位价格低; ②记录介质可重复使用; ③记录信息可长期保存而不丢失,甚至可脱机存档; ④非破坏性读出,读出时不需要再生。 缺点 存取速度慢,机械结构复杂,对工作环境…

在wps的word中如何引用正确引用参考文献

目录 插入参考文献编号把插入的编号置于右上角最终效果 插入参考文献编号 把插入的编号置于右上角 最终效果

面试算法-88-反转链表

题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 解 class Solution {public ListNode reverseList(ListNode head) {if(head null || hea…

大数据技术在工厂生产数字转型中的应用与价值

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 随着大数据技术的快速发展&#xff0c;越来越多的企业开始关注并应用大数据技术&#x…

HCIP-Datacom(H12-821)新题

最新 HCIP-Datacom&#xff08;H12-821&#xff09;完整题库请扫描上方二维码访问&#xff0c;持续更新中。 以下关于OSPF的描述&#xff0c;哪些项是正确的&#xff1f; A. 第二类外部路由的开销值只是AS外部开销值&#xff0c;忽略AS内部开销值 B. AS-External-LSA描述的是…

prettier + eslint 配置

vue-cli 新建项目选择 ESLint Prettier 会自动下载相关包 settings.json {"editor.formatOnSave": true, // 开启保存文件自动格式化代码"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具// "prettier.r…

【C++航海王:追寻罗杰的编程之路】stack

目录 1 -> stack的介绍和使用 1.1 -> stack的介绍 1.2 -> stack的使用 1.3 -> stack的模拟实现 1 -> stack的介绍和使用 1.1 -> stack的介绍 stack的文档介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c…

力扣---零钱兑换---动态规划

思路&#xff1a; 这是一道典型的动态规划问题&#xff08;希望下次不用提示&#xff0c;能直接认出来&#xff09;&#xff1a;我将g[i]定义为总金币为i所需的最少硬币个数。所以递推公式可以表示为&#xff1a;g[i]min(g[i-1],g[i-2],g[i-5])1&#xff0c;也就是g[i]min(g[i-…

【Python音视频技术】玩AI视频创作引发写Python音视频技术系列文章1---视频添加字幕

最近对视频创作感兴趣&#xff0c; 详情见之前写的几篇文章。 【AI应用】模仿爆款视频二次创作短视频操作步骤 【人工智能】AI数字人视频演示 【人工智能】AI视频二次创作演示 作为程序员出身的我&#xff0c;看到一些功能, 我都有猎奇的习惯&#xff0c; 想着自己用什么技…

js数据流详细讲解

文章目录 单向数据流单向数据流示例: 双向数据流双向数据流示例: 延伸和扩展状态管理Redux 示例&#xff1a; 异步数据流异步操作示例&#xff08;使用 async/await&#xff09;&#xff1a; 数据转换和处理数据处理示例&#xff08;使用 lodash&#xff09;&#xff1a; 实时数…

【软件测试】探索和学习在模型中的软件测试

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-JIGESSc1ecUpVUnH {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

七种查找方式(Java)

一、基本查找 也叫做顺序查找 说明&#xff1a;顺序查找适合于存储结构为数组或者链表。 基本思想&#xff1a;顺序查找也称为线形查找&#xff0c;属于无序查找算法。从数据结构线的一端开始&#xff0c;顺序扫描&#xff0c;依次将遍历到的结点与要查找的值相比较&#xff…

数字功放VS模拟功放,选择适合你的音频解决方案

数字功放和模拟功放是音频系统中常用的两种功放技术&#xff0c;适用于不同的音频应用&#xff0c;都具有各自的优势和特点。本文将为您详细介绍数字功放和模拟功放的差异&#xff0c;并帮助您找到适合自己的音频解决方案。 1、数字功放是一种利用数字信号处理技术的功放。它将…

Unity:2D

目录 1. 简介 2. 2D Sorting 3. 9-slicing Sprites 3.1 9-slicing and Colliders 4. Sprite Renderer 5. Sprite Creator 6. Sprite Editor 6.1 Slice 6.1 Resize polygons 6.2 Custom Outline 6.3 Custom Physics Shape 6.4 Secondary Textures 6.5 Data Provider…

基础:TCP四次挥手做了什么,为什么要挥手?

1. TCP 四次挥手在做些什么 1. 第一次挥手 &#xff1a; 1&#xff09;挥手作用&#xff1a;主机1发送指令告诉主机2&#xff0c;我没有数据发送给你了。 2&#xff09;数据处理&#xff1a;主机1&#xff08;可以是客户端&#xff0c;也可以是服务端&#xff09;&#xff0c…

常见六大WEB安全问题

一、XSS跨站脚本攻击 1.Cross-Site Scripting&#xff08;跨站脚本攻击&#xff09;简称 XSS&#xff08;因为缩写和 CSS重叠&#xff0c;所以只能叫 XSS&#xff09;&#xff0c;是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本&#xff0c;使之在用户的浏览器上运行…

力扣---全排列---回溯

思路&#xff1a; 递归做法&#xff0c;一般会有visit数组来判断第 i 位是否被考虑了。我们先考虑第0位&#xff0c;再考虑第1位&#xff0c;再考虑第2位...dfs函数中还是老套路&#xff0c;先判定特殊条件&#xff0c;再从当下的角度&#xff08;决定第 j 位是哪个元素&#x…

Java 枚举(超详细讲解)

Java语言的强大之处在于它提供了多种多样的类库&#xff0c;从而大大提高了程序的编程效率和质量。 一、枚举 事先考虑到某一变量可能的取值&#xff0c;尽可能用自然语言忠表意清楚的单词来表示它的每一个值&#xff0c;用这中思路定义的类型被称为枚举类型。 枚举事由一组固…

获取淘宝商品评论的爬虫技术分享(已封装API,可测试)

item_review-获得淘宝商品评论 公共参数 请求地址: taobao/item_review 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,it…

零基础机器学习(4)之线性回归的基本原理

文章目录 一、线性回归的基本原理1.相关与回归2.线性回归的原理分析①线性回归的一般公式②线性回归的损失函数③线性回归方程的参数求解方法A.最小二乘法B.梯度下降法 一、线性回归的基本原理 1.相关与回归 相关描述的是变量之间的一种关系。 从统计角度看&#xff0c;变量之…