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

news2024/9/23 2:44:31

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

齿轮浮窗这里代码如下:

    <el-popover
          class<

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

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

相关文章

【解决】Unity Profiler | Sempaphore.WaitForSignal

开发平台&#xff1a;Unity 2022 版本以上 开发语言&#xff1a;CSharp 6.0 编程平台&#xff1a;Visual Studio 2022 关键词&#xff1a;Sempaphore.WaitForSignal   问题背景 开发过程中出现 Waiting to excute code… 长时间阻碍运行。使用 逐对象排查法 确认影响无法运行…

mineadmin前端安装启动

在上一篇文章中&#xff0c; 我们已经搭建好了后端环境并启动 mineadmin 快速安装部署&#xff08;docker环境&#xff09; 一、下载前端项目 1、在搭建后端时候&#xff0c;使用php bin/hyperf.php mine:install 的时候&#xff0c;有一个步骤是安装前端项目的。安装目录为&a…

Altair Compose® 数学运算、编程、数据分析及可视化

Altair Compose 数学运算、编程、数据分析及可视化 分析数据、开发算法或创建模型 - Altair Compose 旨在将你的想法付诸实施。 Altair Compose 是一个用于数学计算、数据操作和可视化、编程和调试脚本的环境&#xff0c;对重复运算和流程自动化非常有用。Altair Compose 让用…

Chrome 插件打包发布

插件打包发布 一、打包成 zip 包 最简单方便的一种其实就是打包成 zip 包&#xff0c;通过下载链接进行下载&#xff0c;在包里面通过设置版本号和数据库的版本号对比来提醒用户进行新包的下载。 二、发布到 Chrome 应用商店 1. 注册成为开发者 在发布到 chrome 应用商店之…

C++第十一弹---类与对象(八)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、友元 1.1、友元函数 1.2、友元类 2、内部类 3、匿名对象 4、拷贝对象时的一些编译器优化 总结 1、友元 友元提供了一种突破封装的方式&a…

伦敦金与纸黄金有什么区别?怎么选?

伦敦金与纸黄金都是与黄金相关的投资品种&#xff0c;近期黄金市场的上涨吸引了投资者的关注&#xff0c;那投资者想开户入场成为黄金投资者应该选择纸黄金还是伦敦金呢&#xff1f;两者有何区别呢&#xff1f;下面我们就来讨论一下。 伦敦金是一种起源于伦敦的标准化黄金交易合…

ssm+vue的消防物资存储系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的消防物资存储系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

MixKG: Mixing for harder negative samples in knowledge graph---没代码

摘要 知识图嵌入(KGE)旨在将实体和关系表示为低维向量&#xff0c;用于许多现实世界的应用。实体和关系的表征是通过对比正负三联体来学习的。因此&#xff0c;高质量的阴性样品在KGE中是非常重要的。然而&#xff0c;目前的KGE模型要么依赖于简单的负抽样方法&#xff0c;这使…

基于深度学习的面部情绪识别算法仿真与分析

声明&#xff1a;以下内容均属于本人本科论文内容&#xff0c;禁止盗用&#xff0c;否则将追究相关责任 基于深度学习的面部情绪识别算法仿真与分析 摘要结果分析1、本次设计通过网络爬虫技术获取了七种面部情绪图片&#xff1a;吃惊、恐惧、厌恶、高兴、伤心、愤怒、自然各若…

橘子疾病检测4种YOLOV8

橘子检测YOLOV8&#xff0c;检测4种疾病&#xff0c;采用YOLOV8-NANO&#xff0c;训练得到PT模型转换成ONNX&#xff0c;最后OPENCV调用&#xff0c;支持C/PYTHON/ANDROID 橘子检测YOLOV8&#xff0c;检测4种疾病

算法---动态规划练习-2(使用最小花费爬楼梯)

使用最小花费爬楼梯 1. 题目解析2. 讲解算法原理方法一&#xff1a;方法二&#xff1a; 3. 编写代码解法一解法二 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 方法一&#xff1a; 首先&#xff0c;定义一个大小为n1的数组dp&#xff0c;用于存储到达每个台阶的最…

开源博客项目Blog .NET Core源码学习(10:App.Framwork项目结构分析)

开源博客项目Blog的解决方案总共包括4个项目&#xff0c;其中App.Hosting项目包括所有的页面及控制器类&#xff0c;其它项目主要提供数据库访问、基础类型定义等。这四个项目的依赖关系如下图所示&#xff0c;本文主要分析App.Framwork项目的主要结构及主要文件的用途。   …

使用ggplot2绘制带星号的热图

原文链接:使用ggplot2绘制带星号"*"的热图 本期教程内容 本期教程所有数据和代码,及往期教程数据和代码可在社群中获得 绘制教程 导入相关的R包###@导入相关的R包 library(readxl) library(tidyverse) library(readxl) library(ggsci) library(viridis) library(R…

Python开源项目周排行 2024年第6周

Python 趋势周报&#xff0c;按周浏览往期 GitHub,Gitee 等最热门的Python开源项目&#xff0c;入选的项目主要参考GitHub Trending,部分参考了Gitee和其他。排名不分先后&#xff0c;都是当周相对热门的项目。 入选公式&#xff1d;70%GitHub Trending20%Gitee10%其他 关注微…

CentOS7安装mysql-5.7.44单机和主从复制

官网下载地址&#xff1a; https://downloads.mysql.com/archives/community/ 1、单机安装 安装依赖 yum -y install libaio 解压安装 tar -zxvf mysql-5.7.44-linux-glibc2.12-x86_64.tar.gzmv mysql-5.7.44-linux-glibc2.12-x86_64 /usr/local/mysqlcd /usr/local/mysql…

吴恩达深度学习笔记:神经网络的编程基础2.1-2.4

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.1 二分类(Binary Classification)2.2 逻辑回归(Logistic Regression)2.3 逻辑回归的代价函数&#xff08;Lo…

计数DP

J - The King‘s Walk 思路&#xff1a;dx abs(x1 - x2), dy abs(y1 - y2), 那么最短距离一定是,然后就是状态表示了&#xff0c;表示当前点向上走i步且最终在第j列的方案数&#xff0c;我们知道我们每一步都要缩短短距离&#xff0c;也就是向上走&#xff0c;那么我们转移…

vue3怎么读取本地json数据

在Vue 3中&#xff0c;可以使用fetch API或其他HTTP客户端来读取本地JSON数据。以下是一个使用fetch的示例&#xff1a; <template><div><h1>本地JSON数据</h1><div v-if"data">{{ data }}</div></div> </template>…

JAVA校园失物招领网站源码带后台

开发环境是Eclipse none&#xff0c;Mysql5.6数据库&#xff0c;Spring MVC框架&#xff0c;jdk1.7&#xff0c;Tomcat 8.0.27,静态页面是参照网上设计的&#xff0c;系统功能基本完善&#xff0c;目前还没有发现有需要解决的bug

vim编辑器和gcc/g++编辑器的使用讲解

vim编辑器 1 vim的基本概念 vim是Linux的编写代码的工具&#xff0c;是一种多模式的编辑器。 Linux中vim的常用的模式大概可以分为三种&#xff0c;分别是&#xff1a; 命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式…