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 普及组] 火星人 循环枚举 顾名思…...
构造+有序集合,CF 1023D - Array Restoration
一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1023D - Array Restoration 二、解题报告 1、思路分析 先考虑合法性检查: 对于数字x,其最左位置和最右位置 之间如果存在数字比x小,则非法 由于q次操作,第q…...
Scrapy 爬取旅游景点相关数据(四)
本节内容主要为: (1)创建数据库 (2)创建数据库表 (3)爬取数据进MYSQL库 1 新建数据库 使用MYSQL数据库存储数据,创建一个新的数据库 create database scrapy_demo;2 新建数据表 CR…...
Vue常用指令及其生命周期
作者:CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 目录 1.常用指令 1.1 v-bind 1.2 v-model 注意事项 1.3 v-on 注意事项 1.4 v-if / v-else-if / v-else 1.5 v-show 1.6 v-for 无索引 有索引 生命周期 定义 流程 1.常用指令 Vue当中的指令…...
简化数据流:Apache SeaTunnel实现多表同步的高效指南
Apache SeaTunnel除了单表之间的数据同步之外,也支持单表同步到多表,多表同步到单表,以及多表同步到多表,下面简单举例说明如何实现这些功能。 单表 to 单表 一个source,一个sink。 从mysql同步到mysql,…...
均匀圆形阵列原理及MATLAB仿真
均匀圆形阵列原理及MATLAB仿真 目录 前言 一、均匀圆阵原理 二、圆心不存在阵元方向图仿真 三、圆心存在阵元方向图仿真 四、MATLAB仿真代码 总结 前言 本文详细推导了均匀圆形阵列的方向图函数,对圆心不放置阵元和圆心放置阵元的均匀圆形阵列方向图都进行了仿…...
vue2使用univerjs
1、univerjs Univer 提供了一个全面的企业级文档与数据协同的解决方案,支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制,开发者可以在 Univer 的基础上进行个性化功能的定制和扩展,以适应不同用户在不同场景…...
VUE3 el-table-column header新增必填*
1.在需要加必填星号的el-table-column上添加render-header属性 <el-table-column :label"getName(产品代码)" :render-header"addRedStart" prop"MODELCODE" min-width“4.5%”> <template v-slot"scope"> <el-input …...
条件概率和贝叶斯公式
...
Kali中docker与docker-compose的配置
权限升级 sudo su 升级为root用户 更新软件 apt-get update安装HTTPS协议和CA证书 apt-get install -y apt-transport-https ca-certificates下载docker apt下载docker apt install docker.io 验证docker安装是否成功 查版本 docker -v 启动docker systemctl start …...
C++ | Leetcode C++题解之第283题移动零
题目: 题解: class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };...
Exponential Moving Average (EMA) in Stable Diffusion
1.Moving Average in Stable Diffusion (SMA&EMA) 1.Moving average 2.移动平均值 3.How We Trained Stable Diffusion for Less than $50k (Part 3) Moving Average 在统计学中,移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …...
017、Vue动态tag标签
文章目录 1、先看效果2、代码 1、先看效果 2、代码 <template><div class "tags"><el-tag size"medium"closable v-for"item,index in tags":key"item.path":effect"item.title$route.name?dark:plain"cl…...
RocketMQ 架构概览
Apache RocketMQ 是一个分布式消息中间件和流计算平台,提供低延迟、高性能和可靠的队列服务,并且支持大规模的分布式系统。在详细介绍 RocketMQ 的整体架构之前,先了解其设计目标和核心特性是很重要的。RocketMQ 主要用于处理大规模的消息&am…...
优化医疗数据管理:Kettle ETL 数据采集方案详解
在现代医疗保健领域,数据的准确性、完整性和及时性对于提高医疗服务质量和患者护理至关重要。为了有效管理和利用医疗数据,Kettle ETL(Extract, Transform, Load)数据采集方案成为了许多医疗机构的首选工具之一。本文将深入探讨Ke…...
spring-from表单
在spring boot当中,from表单怎样开发(name=value) 先列出接口所需信息(抓包得到请求信息),将这些必要信息以注解的方式表达出来 步骤: 梳理前置条件(请求地址,请求header,请求方法,请求数据,响应结果)编辑一个普通类,在类上标记注解@Controller: 标记在类上,让类…...
【.NET】asp.net core 程序重启容器后redis无法连接,连接超时
环境是容器化部署asp.net core 程序当有大量请求打到容器如果此时重启容器会出现,redis无法连接情况。 使用 csredis 库报错: Status unavailable, waiting for recovery. Connect to server timeout 使用StackExchange.Redis 报错: Time…...
【vue前端项目实战案例】Vue3仿今日头条App
本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 Vue Router webpack TypeScript 等技术栈实现的一款新闻资讯类App,适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App…...
常见的文心一言的指令
文心一言,作为百度研发的预训练语言模型“ERNIE 3.0”的一项功能,能够与人对话互动,回答问题,协助创作,高效便捷地帮助人们获取信息、知识和灵感。以下是一些常见的文心一言指令类型及其具体示例: 1. 查询…...
数字货币交易接口实现(含源代码)
数字货币交易接口实现(含源代码) 使用币安交易接口步骤1:注册API密钥步骤2:安装所需库步骤3:使用API进行交易获取市场数据查看账户信息执行交易错误处理安全提示 使用OKX交易接口步骤1:注册API密钥步骤2&am…...
c++函数以及函数分文件编写
1.函数 1.1格式 返回值类型 函数名 (参数列表)//返回值类型指的是return过去的类型 { 函数体语句 return 表达式 } 1.2常见的函数样式 1.无参返回 2.有参返回 3.无参有返 4.有参有返 #include<iostream> using namespace std; int add(int nu…...