el-table列的显示与隐藏
- 需求:实现 表字段的显示与隐藏。
- 效果图
代码实现
写在前面
- 首先 我部分字段有自定义的排序逻辑,和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。
- 然后 我需要默认展示一部分字段,并且 当表无数据时 提示不能 显示隐藏 字段。
- 做一个类表单的设计,在提交的时候才做数据变更,并且添加搜索。
功能实现
因为每个字段的处理不尽相同,所以我采用 v-if 进行控制(注意 v-if 对dom的开销较大,⚠️多字段)。
- 先设置固化数据
- 设置字段信息
- 添加按钮和 el-popover
- 相关函数添加和调试
- 添加搜索框
- 函数添加
- 先设置固化数据
data() {return {// 搜索框的输入popoverSearchQuery: '',// el-table 的加载值reload: 1,// 是否打开 el-popoverpopoverVisible: false,// 选中的列对象数组selectColumns: [], // 未选中的列对象数组unSelectColumns: [], // checkbox 的modeltempSelectColumns: [], // 固化的表字段,默认值设置columnSetting: [// {prop: 'userChineseName', label: '人员', isShow: true},{prop: 'onDutyDays', label: '实际出勤天数', isShow: true},{prop: 'avgDutyMinutesPerDutyDay', label: '平均每日出勤时长(小时)', isShow: true},{prop: 'avgTaskMinutesPerDutyDay', label: '平均每日任务时长(小时)', isShow: true},{prop: 'taskNum', label: '任务数', isShow: true},{prop: 'bugOverview', label: '产出Bug', isShow: true},{prop: 'caseOverview', label: '产出Case', isShow: true},{prop: 'codeOverview', label: '产出代码', isShow: true},{prop: 'userGroupName', label: '当前所属团队', isShow: false},{prop: 'userLevel', label: '人员职级', isShow: false},{prop: 'theoreticalOnDutyDays', label: '应出勤天数', isShow: false},{prop: 'otDays', label: '加班天数', isShow: false},{prop: 'absenteeismDays', label: '旷工天数', isShow: false},{prop: 'afterPunchDays', label: '补卡天数', isShow: false},{prop: 'tagCount', label: '标注件数', isShow: false},{prop: 'rewardTagCount', label: '悬赏数', isShow: false}]}
}
- 设置字段信息
要明确一点:要不要有默认展示字段(即:当所有字段不勾选时,展示什么字段数据)
<!-- 人员默认展示,即对该字段不做判断 -->
<el-table-columnlabel="人员"width="200px"align="center"fixed="left"
><template slot-scope="scope">{{ `${scope.row.userChineseName}(${scope.row.username})` }}</template>
</el-table-column><!-- v-if实现字段的显示隐藏 参数为prop或者唯一值即可 -->
<el-table-columnv-if="showColumn('onDutyDays')"label="实际出勤天数"align="center"prop="onDutyDays"sortable="custom"min-width="80"
>
<template slot-scope="scope"><div>{{ scope.row.onDutyDays }}</div></template>
</el-table-column>
- 添加页面和触发按钮(搜索框和 checkbox)
<!--添加字段筛选-->
<div><el-buttontype="text"plainclass="custom-button"style="border: none"icon="el-icon-s-tools"size="mini"@click="openSelectPopover">筛选字段</el-button><el-popoverv-model="popoverVisible"placement="bottom-end"trigger="click"class="my-popover"><!-- 搜索 --><!-- 搜索框容器,使用position: sticky来使其在页面滚动时保持在顶部 --><div class="search-bar-container" style="position: sticky; top: 0; z-index: 10; background-color: white;"><el-inputv-model="popoverSearchQuery"suffix-icon="el-icon-search"placeholder="搜索"clearable@suffix-click="handlePopoverSearchQuery"></el-input></div><div class="columns-filter"><!-- 已选中的项 --><div v-if="selectColumns.length > 0"><h3 style="margin-top: -10px;color: #d76969;">已选择</h3><div v-for="(column, index) in selectColumns" :key="column.prop"><el-checkboxv-model="tempSelectColumns":label="column":value="column"@change="selectHandleCheckboxChange(column)">{{ column.label }}</el-checkbox></div><hr> <!-- 已选中与未选中之间的横线 --></div><!-- 未选中的项 --><div v-for="(column, index) in unSelectColumns" :key="column.prop"><el-checkboxv-model="tempSelectColumns":label="column":value="column"@change="selectHandleCheckboxChange(column)">{{ column.label }}</el-checkbox></div><br><div slot="footer" style="display: flex; justify-content: center;"><el-buttonicon="el-icon-close"size="mini"@click="popoverVisible = false">取 消</el-button><el-buttonsize="mini"icon="el-icon-check"type="primary"@click="confirmSelection">确 定</el-button></div></div></el-popover>
</div><!--样式 -->
<style lang="scss" scoped>
// 按钮样式设计, 右上角
.custom-button{float: right;margin-right: 50px;margin-top: -6px;font-size: 13px;
}
// 鼠标悬浮 改变背景色
.custom-button:hover {background-color: transparent;color: #ad64a4;
}
// popover位置设置
.my-popover {float: right;margin-right: 130px;margin-top: 20px;
}
// popover 内部设置最高和滚动条
.columns-filter {max-height: 270px;overflow-y: auto;padding: 10px;font-size: 15px;
}
</style>
- 相关函数添加和调试
// input 值发生变动就进行搜索
watch: {popoverSearchQuery(newVal) {if (!newVal) {this.resetColumns();}else {this.filterColumns();}}
}
// 初始化
created() {this.initColumn();
},
methods: {// 搜索相关-前端实现handlePopoverSearchQuery() {this.filterColumns();},filterColumns() {this.selectColumns = this.columnSetting.filter(column => column.isShow && column.label.includes(this.popoverSearchQuery));this.unSelectColumns = this.columnSetting.filter(column => !column.isShow && column.label.includes(this.popoverSearchQuery));if (!this.popoverSearchQuery) {this.resetColumns();}},resetColumns() {this.selectColumns = this.columnSetting.filter(column => column.isShow);this.unSelectColumns = this.columnSetting.filter(column => !column.isShow);},// 初始化 给 选中和未选中赋值initColumn() {this.selectColumns = this.columnSetting.filter(column => column.isShow);this.unSelectColumns = this.columnSetting.filter(column => !column.isShow);// 设置checkbox中值为已选中的值this.tempSelectColumns = [...this.selectColumns];},// 计算是否需要展示showColumn(currentColumn) {return this.columnSetting.find(item => item.prop === currentColumn).isShow;},// onclick 按需 添加逻辑,如果不需要 点确定再触发方法 就可以将 confirmSelection 拿到 该函数中。selectHandleCheckboxChange(column) {},// 打开|关闭 popoveropenSelectPopover() {if (this.gridData.length < 1) {Message.warning('当前列表数据,暂无法使用筛选功能~ ');return;}if (this.popoverVisible) {this.popoverVisible = false;}else {this.popoverVisible = true;this.popoverSearchQuery = '';}},// 触发数据 处理 confirmSelection() {const unSelectColumns = this.columnSetting.filter(col =>!this.tempSelectColumns.some(tsc => tsc.prop === col.prop)).map(col => ({...col, isShow: false}));this.unSelectColumns = unSelectColumns;// 更新tempSelectColumns的isShowthis.tempSelectColumns.forEach(tsc => {tsc.isShow = true;});this.selectColumns = this.tempSelectColumns;// 更新columnSettingthis.columnSetting = [...this.tempSelectColumns, ...unSelectColumns];// 这里可以添加额外的处理逻辑,比如发送请求等this.popoverVisible = false;}
}
fix:
提交 确定 之后 表格会闪烁一下 再显示字段。这是因为dom要重新加载 被销毁的元素。
解决方案 :
el-table 添加 :key=“reload”
<el-table:key="reload"style="margin-right: 30px":header-row-style="{background: '#f5f5f5',padding: '0',color: 'black',fontSize: '12px',}">
</el-table>
watch: {columnSetting (newVal) {// 解决表格闪烁this.reload = Math.random();}
}
end
相关文章:

el-table列的显示与隐藏
需求:实现 表字段的显示与隐藏。效果图 代码实现 写在前面 首先 我部分字段有自定义的排序逻辑,和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。然后 我需要默认展示一部分字段,并且 当表无数据时 提示不能 显示隐藏 …...

使用命令快速删除项目中的node_modules
描述 直接调用了系统自带的命令行工具,无需额外安装任何第三方库或工具。 同时,这些命令经过优化,能够快速处理大量文件,从而实现快速删除。 步骤 1、进入项目文件夹; 2、如果是Mac/Linux 环境下,执行&a…...

leetCode15三数之和(双指针)
目录 1、题目 2、思路 3、代码 4、总结 1、题目 给你一个由 n 个整数组成的数组 nums ,和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] (若两个四元组元素一一对应,则认为…...

数据挖掘-数据预处理
来自🥬🐶程序员 Truraly | 田园 的博客,最新文章首发于:田园幻想乡 | 原文链接 | github (欢迎关注) 文章目录 3.3.1 数据的中心趋势平均数和加权平均数众数,中位数和均值描述数据的离散程度 &a…...

【调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gitee 仓库的 URL】
调试笔记-系列文章目录 调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gitee 仓库的 URL 文章目录 调试笔记-系列文章目录调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gite…...

《GPT-4o mini:开启开发与创新的新纪元》
在科技发展的快速进程中,OpenAI 推出的 GPT-4o mini 模型如同一阵春风,给开发者们带来了新的希望和机遇。它以其卓越的性能和极具吸引力的价格,成为了行业内热议的焦点。 当我首次听闻 GPT-4o mini 的消息时,内心充满了好奇与期待…...

生成树协议配置与分析
前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 一、相关知识 1、生成树协议简介 生成树协议(STP)是一种避免数据链路层逻辑环路的机制,它通过信息交互识别环路并…...

Golang | Leetcode Golang题解之第287题寻找重复数
题目: 题解: func findDuplicate(nums []int) int {slow, fast : 0, 0for slow, fast nums[slow], nums[nums[fast]]; slow ! fast; slow, fast nums[slow], nums[nums[fast]] { }slow 0for slow ! fast {slow nums[slow]fast nums[fast]}return s…...

【音视频SDL2入门】创建第一个窗口
文章目录 前言创建窗口的流程需要使用的函数1. 初始化 SDL 库2. 创建 SDL 窗口3. 获取与窗口关联的表面SDL_FillRect 函数介绍4. 更新窗口表面5. 延迟一定时间6. 销毁窗口并退出 SDL 库示例代码总结 前言 SDL2(Simple DirectMedia Layer)是一个跨平台的…...

《置身事内:中国政府与经济发展》生活过得好一点,比大多数宏伟更宏伟
《置身事内:中国政府与经济发展》生活过得好一点,比大多数宏伟更宏伟 兰小欢,复旦大学中国社会主义市场经济研究中心、经济学院副教授,上海国际金融与经济研究院研究员。美国弗吉尼亚大学经济学博士。 上海人民出版社 文章目录 《…...

MongoDB教程(十八):MongoDB MapReduce
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MapRed…...

HTML前端面试题之<iframe>标签
面试题:iframe 标签的作用是什么?有哪些优缺点 ? 讲真,刷这道面试题之前我根本没有接触过iframe,网课没讲过,项目实战没用过,但却在面试题里出现了!好吧,我只能说:前端路漫漫&…...

Docker-Compose实现MySQL之主从复制
1. 主服务器(IP:192.168.186.77) 1.1 docker-compose.yml services:mysql-master:image: mysql:latest # 使用最新版本的 MySQL 镜像container_name: mysql-master # 容器的名称environment:MYSQL_ROOT_PASSWORD: 123456 # MySQL root 用户的密码MYSQL_DATABASE: masterd…...

jetson显卡没有加速,而是在用cpu推理?
jetson的库,特别是使用显卡的库,大多需要单独安装 大概率是重装了pytorch,可以使用jetson官网的pytorch! 下面是官网的链接 PyTorch for Jetson - Announcements - NVIDIA Developer Forums 安装完成之后先使用命令查看是否安…...

Linux下如何安装配置Fail2ban防护工具
Fail2ban是一款在Linux服务器上用于保护系统免受恶意攻击的防护工具。它通过监视系统日志,检测到多次失败的登录尝试或其他恶意行为后,会自动将攻击源的IP地址加入防火墙的黑名单,从而阻止攻击者进一步访问服务器。本文将介绍如何在Linux系统…...

js的深浅拷贝
深浅拷贝是编程中对数据复制的两种不同方式,它们在处理对象和数组等复合数据结构时尤为重要。下面将详细解释这两种拷贝方式。 浅拷贝(Shallow Copy) 浅拷贝创建了原始对象的一个新实例,但这个新实例的属性只是原始对象属性的引…...

实验八: 彩色图像处理
目录 一、实验目的 二、实验原理 1. 常见彩色图像格式 2. 伪彩色图像 3. 彩色图像滤波 三、实验内容 四、源程序和结果 (1) 主程序(matlab (2) 函数FalseRgbTransf (3) 函数hsi2rgb (4) 函数rgb2hsi (5) 函数GrayscaleFilter (6) 函数RgbFilter 五、结果分析 1. …...

Python酷库之旅-第三方库Pandas(048)
目录 一、用法精讲 171、pandas.Series.nlargest方法 171-1、语法 171-2、参数 171-3、功能 171-4、返回值 171-5、说明 171-6、用法 171-6-1、数据准备 171-6-2、代码示例 171-6-3、结果输出 172、pandas.Series.nsmallest方法 172-1、语法 172-2、参数 172-3、…...

springboot爱宠屋宠物商店管理系统-计算机毕业设计源码52726
目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…...

自训练和增量训练word2vec模型
1、自己准备训练语料文件 根据自己的业务场景准备训练数据,比如用户在商城上的同购行为序列或同浏览行为序列。 我们希望通过自己训练业务相关的语料word2vec模型来获得词嵌入、词相关性查询等。 1.1 准备语料库文件 # 示例:准备自己的一个大规模的语…...

华三路由器开启web访问
配置路由器: # 配置Web用户名为admin,认证密码为admin,服务类型为http,用户角色为network-admin。 [Sysname] local-user admin [Sysname-luser-manage-admin] service-type http [Sysname-luser-manage-admin] authorization…...

C++软件开发值得推荐的十大高效软件分析工具
目录 1、概述 2、高效软件工具介绍 2.1、窗口查看工具SPY 2.2、Dependency Walker 2.3、剪切板查看工具Clipbrd 2.4、GDI对象查看工具GDIView 2.5、Process Explorer 2.6、Prcoess Monitor 2.7、API Monitor 2.8、调试器Windbg 2.9、反汇编工具IDA 2.10、抓包工具…...

vue2老项目中node-sass更换dart-sass
更换原因:node-sass经常会出现node版本问题,就很麻烦 卸载项目中的node-sass sass-loader npm uninstall sass-loader sass 安装dart-sas sass-loader 推荐安装sass1.26.2 sass-loader7.3.1 npm install sass-loader7.3.1 sass1.26.2 从新配置vue.…...

源/目的检查开启导致虚拟IP背后的LVS无法正常访问
情况描述 近期发现48网段主机无法访问8.83这个VIP(虚拟IP),环境是 8.83 绑定了两个LVS实例,然后LVS实例转发到后端的nginx 静态资源;整个流程是,客户端发起对VIP的请求,LVS将请求转发到后端实例…...

类和对象(四)
构造函数中的初始化列表 之前在实现构造函数时,主要是在函数体内进行赋值,而构造函数还有另一种初始化方式,通过初始化列表进行初始化。 初始化列表的使⽤⽅式是以⼀个冒号开始,接着是⼀个以逗号分隔的数据成员列表,…...

<PLC><HMI><汇川>在汇川HMI画面中,如何为UI设置全局样式?
前言 汇川的HMI软件是使用了Qt来编写的,因此在汇川的HMI程序编写过程,是支持使用qt的样式来自定义部件样式的,即qss格式。 概述 汇川的软件本身提供三个系统的style样式,我们可以直接使用,但是,如果系统提供的样式不符合你的需求,那么你可以对其进行修改,或者自己新建…...

在Git项目中添加并应用“.gitignore”文件
在Git项目中添加并应用.gitignore文件 创建或修改.gitignore文件: 在项目的根目录下创建一个名为.gitignore的文件。如果已经有此文件,可以直接修改。 在文件中添加您希望Git忽略的文件和目录。例如: # 忽略所有的log文件 *.log# 忽略所有的…...

LeetCode Hot100 搜索二维矩阵
给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ,如果 target 在矩阵中,返回 true ;否则,返回 false 。…...

iOS中的KVO(Key-Value Observing)详解
iOS中的KVO(Key-Value Observing)详解 一、KVO概述 KVO(Key-Value Observing),即键值观察/监听,是苹果提供的一套事件通知机制。它允许一个对象(观察者)观察/监听另一个对象&#…...

算法 —— 暴力枚举
目录 循环枚举 P2241 统计方形(数据加强版) P2089 烤鸡 P1618 三连击(升级版) 子集枚举 P1036 [NOIP2002 普及组] 选数 P1157 组合的输出 排列枚举 P1706 全排列问题 P1088 [NOIP2004 普及组] 火星人 循环枚举 顾名思…...