el-table列的显示与隐藏

  • 需求:实现 表字段的显示与隐藏。
  • 效果图 在这里插入图片描述

代码实现

写在前面

  • 首先 我部分字段有自定义的排序逻辑,和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。
  • 然后 我需要默认展示一部分字段,并且 当表无数据时 提示不能 显示隐藏 字段。
  • 做一个类表单的设计,在提交的时候才做数据变更,并且添加搜索。

功能实现

因为每个字段的处理不尽相同,所以我采用 v-if 进行控制(注意 v-if 对dom的开销较大,⚠️多字段)。

  1. 先设置固化数据
  2. 设置字段信息
  3. 添加按钮和 el-popover
  4. 相关函数添加和调试
  5. 添加搜索框
  6. 函数添加
  1. 先设置固化数据
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}]}
}
  1. 设置字段信息
    要明确一点:要不要有默认展示字段(即:当所有字段不勾选时,展示什么字段数据)
<!-- 人员默认展示,即对该字段不做判断 -->
<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>
  1. 添加页面和触发按钮(搜索框和 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>
  1. 相关函数添加和调试
// 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

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

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

相关文章

AIGC Kolors可图IP-Adapter-Plus风格参考模型使用案例

参考: https://huggingface.co/Kwai-Kolors/Kolors-IP-Adapter-Plus 代码环境安装: git clone https://github.com/Kwai-Kolors/Kolors cd Kolors conda create --name kolors python=3.8 conda activate kolors pip install -r requirements.txt python3 setup.py install…

mybatis一对多 多对多

一对一 方式一: ,在result的property属性用user.XXX 方式二:把user对象的属性用resultMap标签包含在association标签里,user的id做id标签,特点是返回值是对象的标识,而集合是collection 一对多 在user类加了个订单的集合,表示一个用户有多个订单 这接口当然是user的 分为re…

PWM信号转模拟信号转换器GP8101/GP8101M

前言&#xff1a; 各位大佬&#xff0c;听说过PAC吗&#xff1f;PAC (PWM to Analog Converter)。 今天介绍一个小众的转换芯片&#xff0c;PWM转模拟信号的&#xff0c;有一定的应用场景,单价一元多。这种芯片隔离PWM还是很容易的。 0%-100% PWM to 0-5V/0-10V SOP8封装的GP…

HarmonyOS三方库的使用

系统组件难以提供比较优秀的界面&#xff0c;需要第三方库来实现一些比较好看的界面效果 三方库的获取&#xff1a; 开源社区支持OpenHarmony-TPC 和 Openharmony三方库中心仓 先目前已经拥有各种各样的三方库&#xff0c;包括UI 图片 动画 网络 数据存储 工具类 多媒体 安全等…

redis数据类型介绍

Redis 支持多种数据类型&#xff0c;包括&#xff1a; 1.字符串&#xff08;String&#xff09;&#xff1a;最简单的数据类型&#xff0c;可以存储字符串、数字等。 2.哈希&#xff08;Hash&#xff09;&#xff1a;类似于 Map&#xff0c;可以存储键值对&#xff0c;其中键值…

Go语言编程 学习笔记整理 第2章 顺序编程 后半部分

1.流程控制 1.1 条件语句 if a < 5 { return 0 } else { return 1 } 注意&#xff1a;在有返回值的函数中&#xff0c;不允许将“最终的”return语句包含在if...else...结构中&#xff0c; 否则会编译失败&#xff01;&#xff01;&#xff01; func example(x int) i…

leetcode 2236.判断根节点是否等于字节点

1.题目要求: 给你一个 二叉树 的根结点 root&#xff0c;该二叉树由恰好 3 个结点组成&#xff1a;根结点、左子结点和右子结点。如果根结点值等于两个子结点值之和&#xff0c;返回 true &#xff0c;否则返回 false 。2.思路: 直接数组前序遍历&#xff0c;然后判断后面两个…

【C++】:红黑树深度剖析 --- 手撕红黑树!

目录 前言一&#xff0c;红黑树的概念二&#xff0c;红黑树的性质三&#xff0c;红黑树节点的定义四&#xff0c;红黑树的插入操作4.1 第一步4.2 第二步4.3 插入操作的完整代码 五&#xff0c;红黑树的验证六&#xff0c;实现红黑树的完整代码五&#xff0c;红黑树与AVL树的比较…

【接口自动化_08课_Pytest+Yaml+Allure框架】

上节课一些内容 的补充 1、openxl这个方法&#xff0c;第一个元素是从1开始的&#xff0c;不是从0开始 回写的列在程序里写的是11&#xff0c;是因为是固定值 一、1. Yaml入门及应用 1、什么是yaml YAML&#xff08;/ˈjməl/&#xff0c;尾音类似camel骆驼&#xff09;是一…

单向链表

目录 思维导图&#xff1a; 学习内容&#xff1a; 1. 链表的引入 1.1 顺序表的优缺点 1.1.1 优点 1.1.2 不足 1.1.3 缺点 1.2 链表的概念 1.2.1 链式存储的线性表叫做链表 1.2.2 链表的基础概念 1.3 链表的分类 2. 单向链表 2.1 节点结构体类型 2.2 创建链表 2.…

EXCEL 排名(RANK,COUNTIFS)

1.单列排序 需求描述&#xff1a;如有下面表格&#xff0c;需要按笔试成绩整体排名。 解决步骤&#xff1a; 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列&#xff08;CtrlShift向下箭头、再按F4&#xff09;。 "确定"即可计算…

图像分类算法概述:深度学习方法

图像分类算法概述&#xff1a;深度学习方法 图像分类是计算机视觉中的一个基本任务&#xff0c;近年来随着深度学习的发展&#xff0c;图像分类算法取得了巨大的进步。本文将概述主要的深度学习图像分类算法。 #mermaid-svg-fkTtkPLl9ahuVT6w {font-family:"trebuchet ms…

BGP选路之Preferred value

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由&#xff0c;然后将该最优BGP路由与去往同一目标网络的其他协议路由进行比较&#xff0c;从而决定是否将该最优…

元组(tuple)

目录 一、基本介绍 1、元组(tuple)可以存放多个不同数据类型&#xff0c;元组是不可变序列 2、元组也是一种数据类型 二、元组的定义 1、元组的定义 2、代码说明 三、元组的使用 1、元组使用语法 2、举例说明 3、代码演示&#xff0c;访问/获取第三个数据/元素 四、…

SpringBoot集成Kaptcha验证码

Hi &#x1f44b;, Im shy 有人见尘埃&#xff0c;有人见星辰 1. 什么是Kaptcha验证码? Kaptcha是一个强大的开源Java验证码生成库,由Google开发。它能够生成高度可配置的图片验证码,主要用于防止自动化程序滥用web应用,提高应用的安全性。 2. Kaptcha的主要特性 Kaptch…

AMEsim液压阀伯德图绘制方法

之前也在液压圈论坛里面发过类似的贴子&#xff0c;具体可以看这个网址&#x1f6aa;&#x1f449;&#xff1a;如何得出说明书里面的伯德图曲线&#xff1f;&#xff0c;回复的人还是比较少&#xff0c;这个方法重要信息是参考百度文库这篇文章&#x1f6aa;&#x1f449;&…

相机的内参与外参

目录 一、相机的内参二、相机的外参 一、相机的内参 如下图所示是相机的针孔模型示意图&#xff1a; 光心O所处平面是相机坐标系(O&#xff0c;P)&#xff0c;像素平面所在坐标系为像素坐标系(O’&#xff0c;P’)。 焦距f&#xff1a;O到O’的距离 相机的内参表示的是相机坐标…

文本编辑三巨头(grep)

目录 正则表达式 元字符 grep 案例 我在编写脚本的时候发现&#xff0c;三个文本编辑的命令&#xff08;grep、sed、awk&#xff0c;被称为文本编辑三剑客&#xff0c;我习惯叫它三巨头&#xff09;用的还挺多的&#xff0c;说实话我一开始学的时候也有些懵&#xff0c;主要…

【实现100个unity特效之8】使用ShaderGraph实现2d贴图中指定部分局部发光效果

最终效果 寒冰法师 火焰法师 文章目录 最终效果寒冰法师火焰法师 素材一、功能分析实现方法基本思路Unity的Bloom后处理为什么关键部位白色&#xff1f;最终结果 二、 新建URP项目三、合并图片四、使用PS制作黑白图片方法一 手动涂鸦方法二 魔棒工具1. 拖入图片进PS&#xff0…

环信+亚马逊云科技服务:助力出海AI社交应用扬帆起航

随着大模型技术的飞速发展&#xff0c;AI智能体的社交体验得到了显著提升&#xff0c;AI社交类应用在全球范围内持续火热。尤其是年轻一代对新技术和新体验的热情&#xff0c;使得AI社交产品在海外市场迅速崛起。作为领先的即时通讯解决方案提供商&#xff0c;环信与亚马逊云科…