控制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列的显示隐藏完成。
相关文章:
控制el-table的列显示隐藏
控制el-table的列显示隐藏,一般的话可以通过循环来实现,但是假如业务及页面比较复杂的话,list数组循环并不好用。 在我们的页面中el-table-column是固定的,因为现在是对现有的进行维护和迭代更新。 对需要控制列显示隐藏的页面进…...
2024上海国际冶金及材料分析测试仪器设备展览会
2024上海国际冶金及材料分析测试仪器设备展览会 时间:2024年12月18~20日 地点:上海新国际博览中心 ◆ 》》》组织机构: 主办单位:全联冶金商会、中国宝武钢铁集团有限公司、上海市金属学会 支持单位ÿ…...
商业定位,1元平价商业咨询:豪威尔咨询!平价咨询。
在做生意之前,就需要对企业整体进行一完整的商业定位,才能让商业定位带动企业进行飞速发展。 所以,包含商业定位的有效工作内容就显得极为重要,今天,小编特地为大家整理出了商业定位所需要的筹备的工作,如下…...
2. Presto应用
该笔记来源于网络,仅用于搜索学习,不保证所有内容正确。文章目录 1、Presto安装使用2、事件分析3、漏斗分析4、漏斗分析UDAF开发开发UDF插件开发UDAF插件 5、漏斗测试 1、Presto安装使用 参考官方文档:https://prestodb.io/docs/current/ P…...
工业级安卓PDA超高频读写器手持掌上电脑,RFID电子标签读写器
掌上电脑,又称为PDA。工业级PDA的特点就是坚固,耐用,可以用在很多环境比较恶劣的地方。 随着技术的不断发展,加快了数字化发展趋势,RFID技术就是RFID射频识别及技术,作为一种新兴的非接触式的自动识别技术&…...
Prompt提示工程上手指南:基础原理及实践(一)
想象一下,你在装饰房间。你可以选择一套标准的家具,这是快捷且方便的方式,但可能无法完全符合你的个人风格或需求。另一方面,你也可以选择定制家具,选择特定的颜色、材料和设计,以确保每件家具都符合你的喜…...
Redis如何保证缓存和数据库一致性?
背景 现在我们在面向增删改查开发时,数据库数据量大时或者对响应要求较快,我们就需要用到Redis来拿取数据。 Redis:是一种高性能的内存数据库,它将数据以键值对的形式存储在内存中,具有读写速度快、支持多种数据类型…...
学完C/C++,再学Python是一种什么体验?
你好,我是安然无虞。 文章目录 变量及类型变量类型动态类型特性 注释输入输出通过控制台输出通过控制台输入 运算符算术运算符关系运算符逻辑运算符赋值运算符 条件循环语句条件语句语法格式代码案例缩进和代码块空语句pass 循环语句while循环语法格式代码案例 for…...
ssm基于Java的壁纸网站设计与实现论文
目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…...
零基础也可以探索 PyTorch 中的上采样与下采样技术
目录 torch.nn子模块Vision Layers详解 nn.PixelShuffle 用法与用途 使用技巧 注意事项 参数 示例代码 nn.PixelUnshuffle 用法与用途 使用技巧 注意事项 参数 示例代码 nn.Upsample 用法与用途 使用技巧 注意事项 参数 示例代码 nn.UpsamplingNearest2d …...
代码随想录算法训练营Day23|669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树
目录 669. 修剪二叉搜索树 前言 思路 递归法 108.将有序数组转换为二叉搜索树 前言 递归法 538.把二叉搜索树转换为累加树 前言 递归法 总结 669. 修剪二叉搜索树 题目链接 文章链接 前言 本题承接昨天二叉搜索树的插入和删除操作题目,要对整棵二叉搜索树…...
乱 弹 篇(一)
题记 对于“乱弹”这个词汇的释义,《辞海》上仅有“ 戏曲剧种,亦指声腔 ”8个字。而由于“乱弹 ”的“ 弹”谐音谈”,这就容易让人联想到“乱谈”。不过从文体上看,“乱谈”也非乱七八糟之谈,反倒是“东西南北&#x…...
《JVM由浅入深学习【八】 2024-01-12》JVM由简入深学习提升分(JVM的垃圾回收算法)
目录 JVM的垃圾回收算法1. 标记-清除算法(Mark-Sweep)原理步骤优点缺点 2. 复制算法(Copying)原理步骤优点缺点 3. 标记-整理算法(Mark-Compact)原理步骤优点缺点 4. 分代收集算法(Generational…...
在矩阵回溯中进行累加和比较的注意点
1 总结 在回溯时,如果递归函数采用void返回,在入口处使用了sum变量,那么一般在初次调用dfs的地方,这个sum的初始值可能不是0,而是数组的对应指针的值,在比较操作的时候,需要在for循环开始之前进行…...
AI语音机器人的发展
第一代AI语音机器人具体投入研发的开始时间不太清楚,只记得2017年的下半年就已经开始接触到成型的AI语音机器人,并且正式商用。语音识别效果还不多,大多都是接入的科大讯飞或者百度的ASR。 2018年算是AI语音机器人的“青春期”吧,…...
SQL语句错误this is incompatible with sql_mode=only_full_group_by解决方法
一、原理层面 这个错误发生在mysql 5.7.5 版本及以上版本会出现的问题: mysql 5.7.5版本以上默认的sql配置是:sql_mode“ONLY_FULL_GROUP_BY”,这个配置严格执行了"SQL92标准"。 很多从5.6升级到5.7时,为了语法兼容,大部…...
静态长效代理IP和动态短效代理IP有哪些用途?分别适用场景是什么?
静态长效代理IP和动态短效代理IP是两种常见的代理IP类型,它们在用途和适用场景上存在一定的差异。了解它们的特性以及使用场景有助于我们更好地利用代理IP,提高网络访问的效率和安全性。 一、静态长效代理IP 1. 用途 静态长效代理IP是指长期保持稳定的代…...
基于Spring Boot+Vue的课堂管理系统(前后端分离)
该项目完全免费 介绍 基于Spring BootVue的课堂管理系统。前后端分离。包含教师授课管理、学生选退课、聊天室、签到、笔记管理模块等。 技术架构 SpringBoot MyBatis Redis WebSocket VueCLI Axios Element UI 项目特点: 1、后台使用MyBatis连接数据库&…...
供排水管网管理信息化的必要性
供排水管网是城市供水系统的大动脉,它负担者将优质水源输送到最终用户的重要职责,对供水系统有着极其重要的作用。城市供排水管网埋设在地下,规模庞大,仅靠人工难以管理。同时,由于城市的发展,管网连接结构…...
统一格式,无限创意:高效管理不同格式图片批量转换
在数字时代,图片格式的多样性带来了管理上的不便。为了满足不同的需求,我们经常需要将大量图片转换为统一的格式。那么,有没有一种简单、高效的方法来解决这个问题呢?答案是肯定的!今天,我们将为您介绍一款…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
C++--string的模拟实现
一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现,其目的是加强对string的底层了解,以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量,…...
从实验室到产业:IndexTTS 在六大核心场景的落地实践
一、内容创作:重构数字内容生产范式 在短视频创作领域,IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色,生成的 “各位吴彦祖们大家好” 语音相似度达 97%,单条视频播放量突破百万…...
从零手写Java版本的LSM Tree (一):LSM Tree 概述
🔥 推荐一个高质量的Java LSM Tree开源项目! https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree,专为高并发写入场景设计。 核心亮点: ⚡ 极致性能:写入速度超…...
深入解析 ReentrantLock:原理、公平锁与非公平锁的较量
ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...
CMake系统学习笔记
CMake系统学习笔记 基础操作 最基本的案例 // code #include <iostream>int main() {std::cout << "hello world " << std::endl;return 0; }// CMakeLists.txt cmake_minimum_required(VERSION 3.0)# 定义当前工程名称 project(demo)add_execu…...
