当前位置: 首页 > news >正文

给el-table实现列显隐

用过若依的都知道,在使用el-table 时候,实现列显隐效果是要给每个列加v-if 判断的,这种代码过于繁琐,于是翻看el-table包的代码,调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。
在这里插入图片描述
项目不提供源码,核心代码都贴上了
代码动刀看似有点多,实则一个地方就一点块。el-table的源码,若依RightToolBar,本身组件,不过轮子造完都是有用的。
没有rightBar的项目可以自己对应数据模拟一个交互操作的方式来实现

上图可以看到基于若依的RightBar组件去实现列显隐,并且存到vuex的持久化中,(vuex+本地存储中),并且去掉了原先若依的RightBar组件弹窗方式。

项目是用tailwindcss 部分class类名自己去计算
RightBar的使用方法和修改内容
  <right-toolbar:showSearch.sync="showSearch"@queryTable="getList":checkTableInfo.sync="checkTableInfo"@interaction="x => (hiddenColumns = x)":componentName="$options.name"/>
<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="$emit('update:showSearch', !showSearch)" /></el-tooltip><el-tooltip class="item" effect="dark" content="刷新" placement="top"><el-button size="mini" circle icon="el-icon-refresh" @click="$emit('queryTable')" /></el-tooltip><el-tooltip v-if="checkTableInfo.length" class="item" effect="dark" content="显隐列" placement="bottom-start"><el-popover v-model="visible" placement="right" trigger="click"><el-checkbox-group v-model="checkList"><el-checkbox class="block" v-for="(item, index) in checkTableInfo" :disabled="item === 'selection' || item === '操作'" :key="index" :label="item" /></el-checkbox-group><el-divider class="my-4" /><div><el-button size="mini" type="primary" @click="submit">确定</el-button><el-button v-if="componentName" size="mini" @click="cancel">取消</el-button></div><el-button class="ml-2.5" slot="reference" size="mini" circle icon="el-icon-menu" /></el-popover></el-tooltip></el-row></div>
</template><script>
import { mapState, mapMutations } from 'vuex'export default {name: 'RightToolbar',data() {return {checkList: Array.from(this.checkTableInfo),visible: false,}},props: {showSearch: { type: Boolean, default: true },search: { type: Boolean, default: true },gutter: { type: Number, default: 10 },checkTableInfo: { type: Array, default: () => [] },componentName: { type: String, default: '' },},mounted() {if (this.componentName && this.tableColumns[this.componentName]) {this.tableColumns[this.componentName]?.length && (this.checkList = this.tableColumns[this.componentName])this.$emit('interaction', this.checkList)}},methods: {...mapMutations('tablecolumn', ['setTableCache']),submit() {this.$emit('interaction', this.checkList)this.visible = falseif (!this.componentName) returnthis.setTableCache({ key: [this.componentName], value: this.checkList })},cancel() {this.tableColumns[this.componentName]?.length && (this.checkList = this.tableColumns[this.componentName])},},computed: {...mapState('tablecolumn', ['tableColumns']),style() {const ret = {}if (this.gutter) {ret.marginRight = `${this.gutter / 2}px`}return ret},},
}
</script><style lang="scss" scoped>
::v-deep .el-transfer__button {border-radius: 50%;padding: 12px;display: block;margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {margin-bottom: 10px;
}
</style>
主页面

给table传递props 属性checkTableInfo 属性即可 一定是包括column的所有列的label

<template><div><right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :checkTableInfo.sync="checkTableInfo" @interaction="(x) => (hiddenColumns = x)" :componentName="$options.name" /><el-table ref="table" :data="table.data" v-loading="table.loading" :hiddenColumns="hiddenColumns" @selection-change="(ids) => (table.ids = ids)"><el-table-column align="center" type="selection" width="55" /><el-table-column align="center" label="类型" prop="type" /><el-table-column align="center" label="名称" prop="name" /><el-table-column align="center" label="描述信息" prop="desp" /><el-table-column align="center" label="值" prop="value" /><el-table-column align="center" label="默认值" prop="defaultValue" /><el-table-column align="center" label="操作" class-name="small-padding fixed-width"><template slot-scope="{ row, column: col }"><el-button size="mini" type="text" icon="el-icon-edit" @click="edit(row)">修改</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="del(row)">删除</el-button></template></el-table-column></el-table></div>
</template><script>
//  import {} from ''
export default {name: "Untitled-1",data() {return {showSearch: true,table: {ids: [],table: [{type: 'FilePath',name: 'probeEnforcement',desp: '文件生成路径',value: '/home/qchen/',defaultValue: '3',}],loading: false,},hiddenColumns: [],checkTableInfo: ['selection', '类型', '名称', '描述信息', '值', '默认值', '操作'],};},mounted() {},methods: {getList() {}edit(row) {}del(row) {}},//  End
};
</script><style lang="css" scoped></style>

将node_modules中将table的源码找到,打开里面的table.vue
将package里面的table源码导出,复制到components/ElementUI目录下即可修改代码,需要在main.js中覆盖element的el-table,最底下贴过一个链接有覆盖的路径

<script>
import { cloneDeep } from 'lodash-es'
//  watch 和props 里面加入下列两个属性
export default {props: {hiddenColumns: {type: Array,default: () => [],},// ... 其他props},watch: {hiddenColumns: {immediate: true,handler(value) {const { states } = this.store;const { columns, _columns } = states;requestAnimationFrame(() => {requestAnimationFrame(() => {if (!this.cache_columns || !this.cache_columns.length) {this.cache_columns = cloneDeep(columns);}if (!value.length) return;const show = this.cache_columns.filter((x) => value.includes(x.label));const hide = this.cache_columns.filter((x) => !value.includes(x.label) && x.type !== "selection");if (show.length) {const current_label = _columns.map((item) => item.label);const control_label = show.map((item) => item.label);control_label.forEach((item) => {if (!current_label.includes(item)) {const column = show.find((x) => x.label === item);this.store.commit("insertColumn", column, column.insertColumnIndex);}});}if (hide.length) {this.cache_columns.forEach((item) => {hide.forEach((ite) => {if (item.label === ite.label) {const column = _columns.find((x) => x.label === item.label);column && this.store.commit("removeColumn", column);}});});}});});},},// ... 其他监听},//  End
};
</script>
将el-table的源码找到,翻开/El-Table/store/index.js。 约30行的位置
  insertColumn(states, column, index, parent) {let array = states._columnsif (parent) {array = parent.childrenif (!array) array = parent.children = []}if (typeof index !== 'undefined') {array.splice(index, 0, column)} else {array.push(column)}if (column.type === 'selection') {states.selectable = column.selectablestates.reserveSelection = column.reserveSelection}if (!column.insertColumnIndex) { // 加入 index 标识,插入时用到column.insertColumnIndex = index}if (this.table.$ready) {this.updateColumns() // hack for dynamics insert columnthis.scheduleLayout()}},

最后将重新注册的el-table 整个文件重新注册一下,这里有操作

相关文章:

给el-table实现列显隐

用过若依的都知道&#xff0c;在使用el-table 时候&#xff0c;实现列显隐效果是要给每个列加v-if 判断的&#xff0c;这种代码过于繁琐&#xff0c;于是翻看el-table包的代码&#xff0c;调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。 项目不提供源码&a…...

为Android构建现代应用——应用架构

选择风格(Choosing a style) 我们将依照Google在《应用架构指南》中推荐的最佳实践和架构指南来构建OrderNow的架构。 这些定义包括通过各层定义组件的一些Clean Architecture原则。 层次的定义(Definition of the layers) 在应用程序中&#xff0c;我们将定义以下主要层次…...

49:字符串的新增方法

字符串的新增方法 String.fromCodePoint()String.raw()实例方法&#xff1a;codePointAt()实例方法&#xff1a;normalize()[实例方法&#xff1a;includes(), startsWith(), endsWith()](https://es6.ruanyifeng.com/#docs/string-methods#实例方法&#xff1a;includes(), s…...

Kaggle图表内容识别大赛TOP方案汇总

赛题名称&#xff1a;Benetech - Making Graphs Accessible 赛题链接&#xff1a;https://www.kaggle.com/competitions/benetech-making-graphs-accessible 赛题背景 数以百万计的学生有学习、身体或视力障碍&#xff0c;导致人们无法阅读传统印刷品。这些学生无法访问科学…...

DAY2,Qt(继续完善登录框,信号与槽的使用 )

1.继续完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中&#xff0c;来回切换页面&#xff1b; ---mychat.h chatroom.h---两个页面头文件 #ifndef MYCHAT_H #define MYCHAT_H#include <QWidget> #include <QDebug> /…...

【设计模式】设计原则-开闭原则

单一职责原则 定义 当应用的需求改变时&#xff0c;在不修改软件实体的源代码或者二进制代码的前提下&#xff0c;可以扩展模块的功能&#xff0c;使其满足新的需求。作用 1、方便测试&#xff1b;测试时只需要对扩展的代码进行测试。 2、提高代码的可复用性&#xff1b;粒…...

【2500. 删除每行中的最大值】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个 m x n 大小的矩阵 grid &#xff0c;由若干正整数组成。 执行下述操作&#xff0c;直到 grid 变为空矩阵&#xff1a; 从每一行删除值最大的元素。如果存在多个这样的值&#xff0c;删除其…...

Superset部署

Superset部署 1、安装依赖 (superset) [hadoopnode1 ~]$ yum install -y python-setuptools (superset) [hadoopnode1 ~]$ yum install -y gcc gcc-c libffi-devel python-devel python-pip python-wheel openssl-devel2、安装Superset 2.1 安装&#xff08;更新&#xff09;…...

Python3 学习笔记 ~ 怎样打印字符串

Python中变量的打印方法_python打印变量_清欢依旧的博客-CSDN博客 a 9 b 2print(f"{a} / {b} {a/b}") print(a, "//", b, "", (a//b))a -9 print(f"{a} / {b} {a/b}") print(a, "//", b, "", (a//b))...

postgresql安装

安装postgresql Linux下载安装地址 https://www.postgresql.org/download/linux/redhat/ 指定对应版本&#xff0c;指定完成后会生成对应的安装语句 下载对应的包 yum –y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-l…...

ElasticSearch之IK分词器安装以及使用介绍

文章目录 一、IK 分词器简介1. 支持细粒度分词&#xff1a;2. 支持多种分词模式&#xff1a;3. 支持自定义词典&#xff1a;4. 支持拼音分词&#xff1a;5. 易于集成和使用&#xff1a; 二、安装步骤1、下载 IK 分词器插件&#xff1a;2、安装 IK 分词器插件&#xff1a;3. 安装…...

Linux系统安装部署Jenkins详细教程(图文讲解)

前言&#xff1a;最近需要使用Jenkins部署项目&#xff0c;所以想出一篇关于如何使用Linux系统安装部署Jenkins的相关教程&#xff0c;整体部署过程还是挺顺利的&#xff0c;特此分享一下&#xff01; 目录 一、安装JDK11和Tomcat11 二、准备Jenkins安装包 三、部署Jenkins…...

基于ChatGPT聊天的零样本信息提取7.25

基于ChatGPT聊天的零样本信息提取 摘要介绍ChatIE用于零样本IE的多轮 QA 实验总结 摘要 零样本信息提取&#xff08;IE&#xff09;旨在从未注释的文本中构建IE系统。由于很少涉及人类干预&#xff0c;因此具有挑战性。 零样本IE减少了数据标记所需的时间和工作量。最近对大型…...

Pytorch个人学习记录总结 08

目录 神经网络-搭建小实战和Sequential的使用 版本1——未用Sequential 版本2——用Sequential 神经网络-搭建小实战和Sequential的使用 torch.nn.Sequential的官方文档地址&#xff0c;模块将按照它们在构造函数中传递的顺序添加。代码实现的是下图&#xff1a; 版本1—…...

Ansible自动化运维学习——综合练习

目录 (一)练习一 1.新建一个role——app 2.创建文件 3.删除之前安装的httpd服务和apache用户 4.准备tasks任务 (1)创建组group.yml (2)创建用户user.yml (3)安装程序yum.yml (4)修改模板httpd.conf.j2 (5)编写templ.yml (6)编写start.yml (7)编写copyfile.yml (8…...

Java中正则表达式

一、概念 正则表达式&#xff0c;又称规则表达式。&#xff08;英语&#xff1a;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。在众多语言中…...

13 硬链接和软链接

13.1 硬链接和软链接的区别 硬链接&#xff1a;A---B&#xff0c;假设B是A的硬链接&#xff0c;那么只要存在一个&#xff0c;无论删除哪一个&#xff0c;文件都能访问得到。 软链接&#xff1a;类似于快捷方式&#xff0c;删除源文件&#xff0c;快捷方式就访问不了。 13.2 创…...

智能合约安全审计

智能合约安全审计的意义 智能合约审计用于整个 DeFi 生态系统&#xff0c;通过对协议代码的深入审查&#xff0c;可以帮助解决识别错误、低效代码以及这些问题。智能合约具有不可篡改的特点&#xff0c;这使得审计成为任何区块链项目安全流程的关键部分。 代码审计对任何应用…...

矩阵置零(力扣)思维 JAVA

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 输入&#xff1a;matrix [[0,1,2,0],[3,4,5,2],[…...

centos制作openssh 9.3p2 rpm包

标题使用源码制作openssh 9.3p2 的rpm包 准备&#xff1a; 操作系统&#xff1a;CentOS Linux release 7.4.1708 (Core) #测试发现rpm包要在什么系统安装需要就需要在什么系统上制作 工具软件&#xff1a;rpm-build 源码文件&#xff1a;openssh-9.3p2.tar.gz x11-ssh-askpas…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...