控制el-table的列显示隐藏

控制el-table的列显示隐藏,一般的话可以通过循环来实现,但是假如业务及页面比较复杂的话,list数组循环并不好用。

在我们的页面中el-table-column是固定的,因为现在是对现有的进行维护和迭代更新。

对需要控制列显示隐藏的页面进行控制。

1.封装的组件代码如下:

1.1 el-tooltip用于文字提示:不明白el-tooltip点击此处了解

1.2 el-row内3个按钮分别为form表单显示隐藏,页面刷新,控制列弹层。

1.3 el-transfer为打开的弹层(穿梭框):不明白el-transfer点击此处了解

<template><div class="top-right-btn" :style="style"><el-row><el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"><el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /></el-tooltip><el-tooltip class="item" effect="dark" content="刷新" placement="top"><el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" /></el-tooltip><el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"><el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" /></el-tooltip></el-row><el-dialog :title="title" :visible.sync="open" append-to-body><el-transfer:titles="['显示', '隐藏']"v-model="value":data="columns"@change="dataChange"></el-transfer></el-dialog></div>
</template>

 2.js代码:

<script>
export default {name: "RightToolbar",data() {return {// 显隐数据value: [],// 弹出层标题title: "显示/隐藏",// 是否显示弹出层open: false,};},props: {showSearch: {type: Boolean,default: true,},columns: {type: Array,},search: {type: Boolean,default: true,},gutter: {type: Number,default: 10,},},computed: {style() {const ret = {};if (this.gutter) {ret.marginRight = `${this.gutter / 2}px`;}return ret;}},created() {// 显隐列初始默认隐藏列for (let item in this.columns) {if (this.columns[item].visible === false) {this.value.push(parseInt(item));}}},methods: {// 搜索toggleSearch() {this.$emit("update:showSearch", !this.showSearch);},// 刷新refresh() {this.$emit("queryTable");},// 右侧列表元素变化dataChange(data) {for (let item in this.columns) {const key = this.columns[item].key;this.columns[item].visible = !data.includes(key);}},// 打开显隐列dialogshowColumn() {this.open = true;},},
};
</script>

3.页面样式如下两图所示:

左边为页面的三个按钮,下面为弹层样式(一眼知道蒸馍操作了哦)

4.在data中·定义变量

用于控制form表单显示隐藏showSearch,以及table的列名数组columns

 data() {return {showSearch:true,columns: [{ key: 0, label: `多选列`, visible: true },{ key: 1, label: `序号列`, visible: true },{ key: 2, label: `库存编号`, visible: true },{ key: 3, label: `库区名称`, visible: true },{ key: 4, label: `状态`, visible: true },{ key: 5, label: `平台仓库`, visible: true },{ key: 6, label: `负责人`, visible: true },{ key: 7, label: `拣货方式`, visible: true },{ key: 8, label: `库区类型`, visible: true },{ key: 9, label: `操作`, visible: true },],

5.在页面中引入使用:

(搞成全局的就不用一个个引入了)

  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" />

其中showSearch和colums上面讲了,还有一个getList就是页面获取数据的函数

6.对搜索和列进行显示隐藏:

对需要显示隐藏的列加上如下就行,并且和定义的columns设定的key需要一致哦。

if="columns[num].visible"
    表单:<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"v-show="showSearch">btn按钮:
<el-button icon="el-icon-search" size="small" @click="handleQuery"v-show="showSearch">搜索</el-button><el-button icon="el-icon-refresh-left" size="small" @click="resetQuery" 
class="white_black2" v-show="showSearch">重置</el-button>需要控制显示隐藏的el-table-column列:<el-table-column prop="branchName" align="center" label="平台仓库"v-if="columns[5].visible"></el-table-column>

控制el-talbe列的显示隐藏完成。

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

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

相关文章

【EI会议征稿通知】第三届仿真设计与计算建模国际学术会议(SDCM 2024)

The 3rd International Conference on Simulation Design and Computational Modeling 第三届仿真设计与计算建模国际学术会议&#xff08;SDCM 2024&#xff09; 第三届仿真设计与计算建模国际会议&#xff08;SDCM 2024&#xff09;将于 4 月 26-28 日在中国重庆召开。第二届…

【博士每天一篇文-算法】Graph Structure of Neural Networks

阅读时间&#xff1a;2023-11-12 1 介绍 年份&#xff1a;2020 作者&#xff1a;尤家轩 斯坦福大学 期刊&#xff1a; International Conference on Machine Learning. 引用量&#xff1a;130 论文探讨了神经网络的图结构与其预测性能之间的关系。作者提出了一种新的基于图的…

【leetcode】力扣算法之旋转图像【难度中等】

题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 用例 输入&#xff1a; matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&…

java 体育明星管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web 体育明星管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysq…

2000-2022各省、地级市风险投资(VC)数据

2000-2022各省、地级市风险投资&#xff08;VC&#xff09;数据 1、时间&#xff1a;2000-2022年 2、范围&#xff1a;350个地级市&#xff0c;34省 3、指标&#xff1a;包含投资机构层面的风险投资原始数据&#xff0c;汇总到省市层面的结果数据&#xff0c;具体指标如下&a…

【Java集合篇】ConcurrentHashMap是如何保证fail- safe的

ConcurrentHashMap是如何保证fail-safe的 ✅典型解析✅拓展知识仓✅分段锁☑️分段锁适用于什么情况&#x1f7e1;分段锁的锁争用情况,是否会带来一定的性能影响✔️分段锁的优缺点&#x1f7e2; 还有哪些其他的线程安全哈希表实现&#x1f7e0;Hashtable和 Collections区别&am…

二叉树及其实现

二叉树 一.树的概念及结构1.1树的概念1.2相关概念 2.二叉树的概念及结构2.1 概念2.2 特殊的二叉树 3.二叉树的遍历3.1 前序、中序以及后序遍历3.2 层序遍历3.3 判断二叉树是否是完全二叉树3.4 二叉树的高度3.5 二叉树的叶子节点个数3.6 二叉树的第k层的节点个数3.7 二叉树销毁3…

Java面向对象综合练习(拼图小游戏),用java图形化界面实现拼图小游戏

1. 设计游戏的目的 锻炼逻辑思维能力利用Java的图形化界面&#xff0c;写一个项目&#xff0c;知道前面学习的知识点在实际开发中的应用场景 2. 游戏的最终效果呈现 Hello&#xff0c;各位同学大家好。今天&#xff0c;我们要写一个非常有意思的小游戏 —《拼图小游戏》 我们…

自行车商城网站网页设计与制作web前端设计html+css+js成品。电脑网站制作代开发。vscodeDrea

【自行车商城网站网页设计与制作web前端设计htmlcssjs成品。电脑网站制作代开发。vscodeDrea】 https://www.bilibili.com/video/BV1wT4y1p7jq/?share_sourcecopy_web&vd_sourced43766e8ddfffd1f1a1165a3e72d7605

您的计算机已被.LIVE勒索病毒感染?恢复您的数据的方法在这里!

引言&#xff1a; 在数字时代&#xff0c;.LIVE勒索病毒如暗夜中的黑暗调&#xff0c;威胁着个人和企业的数字安全。本文将深入介绍.LIVE勒索病毒的特征&#xff0c;提供解密数据的方法&#xff0c;并讨论预防措施&#xff0c;让我们共同筑起数字世界的防护之墙。数据的重要性…

太惨了,又一个程序员被渣的开年大瓜

今天闲暇之余浏览了一下mm&#xff0c;忽然看见一条瓜&#xff1a;某东pdf瓜&#xff0c;一份19页的PDF文件&#xff0c;题为《婚房变赠予&#xff0c;京东渣女出轨连环套设计冤大头程序员》&#xff0c;点进去看了一下&#xff0c;简直炸裂了三观&#xff0c;男同志们一定要保…

什么是预训练Pre-training—— AIGC必备知识点,您get了吗?

Look&#xff01;&#x1f440;我们的大模型商业化落地产品&#x1f4d6;更多AI资讯请&#x1f449;&#x1f3fe;关注Free三天集训营助教在线为您火热答疑&#x1f469;&#x1f3fc;‍&#x1f3eb; 随着人工智能(AI)不断重塑我们的世界&#xff0c;其发展的一个关键方面已经…

数据结构之单调栈、单调队列

今天学习了单调栈还有单调队列的概念和使用&#xff0c;接下来我将对其定义并配合几道习题进行讲解&#xff1a; 首先先来复习一下栈与队列&#xff1a; 然后我们来看一下单调栈的定义&#xff1a; 单调栈中的元素从栈底到栈顶的元素的大小是按照单调递增或者单调递减的关系进…

Javaweb之SpringBootWeb案例的详细解析

SpringBootWeb案例 前面我们已经讲解了Web前端开发的基础知识&#xff0c;也讲解了Web后端开发的基础(HTTP协议、请求响应)&#xff0c;并且也讲解了数据库MySQL&#xff0c;以及通过Mybatis框架如何来完成数据库的基本操作。 那接下来&#xff0c;我们就通过一个案例&#xf…

生信 R语言

11.芯片表达矩阵下游分析 ​rm(list ls())#清除所有变量 options(stringsAsFactors F) #BiocManager::install("CLL") suppressPackageStartupMessages(library(CLL)) data("sCLLex") sCLLex ## ExpressionSet (storageMode: lockedEnvironment) ## as…

centos下系统全局检测工具dstat使用

目录 一&#xff1a;没有需要安装 二&#xff1a;dstat命令参数 三、监测界面各参数含义&#xff08;部分&#xff09; 四、dstat的高级用法 一&#xff1a;没有需要安装 yum install dstat 二&#xff1a;dstat命令参数 有默认选项&#xff0c;执行dstat命令不加任何参数…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷②

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷2 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷2 模块一 …

Java中什么序列化?

在Java中&#xff0c;序列化是一种将对象转换为字节序列的机制&#xff0c;使得对象可以在网络上传输或存储到文件中&#xff0c;而后可以通过反序列化还原为对象。Java提供了java.io.Serializable接口&#xff0c;通过实现这个接口的类可以实现对象的序列化和反序列化。 序列…

HTTP 代理原理及实现(二)

在上篇《HTTP 代理原理及实现&#xff08;一&#xff09;》里&#xff0c;我介绍了 HTTP 代理的两种形式&#xff0c;并用 Node.js 实现了一个可用的普通 / 隧道代理。普通代理可以用来承载 HTTP 流量&#xff1b;隧道代理可以用来承载任何 TCP 流量&#xff0c;包括 HTTP 和 H…

加工零件的题解

目录 原题描述&#xff1a; 题目描述 输入格式 输出格式 样例 #1 样例输入 #1 样例输出 #1 样例 #2 样例输入 #2 样例输出 #2 提示 题目大意&#xff1a; 主要思路&#xff1a; 但是我们怎么才能判断出x走到1时L是偶数还是奇数呢&#xff1f; 初始化&#xff1a;…