El-Table 表格的表头字段切换
最近写了一个小功能,比较有意思,特此博客记录。



提出需求:需要表头字段变化,但是我在官网上的表格相关上查找,没有发现便捷方法。
于是我有两个想法:1.做三个不同的表格。2.做一个表格使用不同的表头字段。
方法一可想而知代码会比较冗余,而且只改一个字段,改动不大。于是我采用的是方法二,字段替换。这里使用的是组件Element - The world's most popular Vue UI frameworkTabs的切换。使用当前选择的项不同而切换不同的表头字段。可以通过3个不同的v-if来判断显示的表头,这并不难。难点在于,他可以添加行,每行的数据都是通过一个下拉或者是组件来选择相应的值,我们如何区别每行的值使他们可以相互不影响才是首要解决的问题。
<el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="职务层次" name="first"></el-tab-pane><el-tab-pane label="职称等级" name="second"></el-tab-pane><el-tab-pane label="公务员职级" name="third"></el-tab-pane></el-tabs>
<el-table-column prop="level" align="center" label="职务层次" v-if="activeName=='first'"><template slot-scope="scope"><el-select class="my-el-select my-el-selec-2" v-model="scope.row['level']"clearable placeholder="请选择职务层次" size="small"><el-option v-for="item in positionLevelArr" :key="item.level1" :label="item.zjmc" :value="item.zjmc"></el-option></el-select></template></el-table-column><el-table-column prop="level" align="center" label="职称等级" v-if="activeName=='second'"><template slot-scope="scope"><el-selectv-model="selectedZyjszcdj[scope.row.id]"filterablesize="small"placeholder="请选择职称等级"clearableclass="my-el-select my-el-select-1 gwyzjInput"@focus="zcdjOptionsFocus"><el-optionv-for="item in zyjszwdjData":key="item":label="item":value="item"></el-option></el-select></template></el-table-column><el-table-column prop="level" align="center" :label="isShowSoSpTitle ? '现管理职级' : '公务员职级'" v-if="activeName=='third'"><template slot-scope="scope"><el-input class="my-el-select my-el-select-1 gwyzjInput" size="small" placeholder="请选择"v-model="scope.row.A0192Estring" clearable @focus="showOfficcerType(scope.row)" @change="getA0192Estring"></el-input></template></el-table-column>
为解决上面提出的痛点,以图二为例,在data中定义一个对象selectedZyjszcdj。
我们给每个下拉框绑定的值为selectedZyjszcdj[scope.row.id],在 Vue 中,v-model 指令用于实现表单控件的双向数据绑定。当 v-model 被用在一个数组或对象的属性上时,它会动态地更新这个属性的值。
这里的 selectedZyjszcdj 是一个对象,而 scope.row.id 是用来索引这个对象的一个动态键名。scope.row 通常是在组件的模板中使用 v-for 循环遍历数据时,循环体内部可用的一个局部变量,它包含了当前迭代项的数据和一些元信息。
具体来说:
-
selectedZyjszcdj是一个在 Vue 组件的data函数中定义的对象,用来存储每个scope.row.id对应的值。 -
scope.row.id是从当前循环项获取的唯一标识符,通常用于区分不同的数据记录。 -
当用户在表单控件中输入或选择了一个值时,
v-model将把新值赋给selectedZyjszcdj对象中以scope.row.id为键的属性。
例如,如果 scope.row.id 的值是 123,那么上述 v-model 实际上就是在绑定到 selectedZyjszcdj[123] 这个特定的属性上。
使用这种模式常用于处理表格或列表中的数据编辑,其中每一行可能需要独立的数据绑定。
所以这便解决了我们的问题,尤其可见,遇见问题不可怕,有思考有想法才是最重要的。剩下的一步一脚印!
相关文章:
El-Table 表格的表头字段切换
最近写了一个小功能,比较有意思,特此博客记录。 提出需求:需要表头字段变化,但是我在官网上的表格相关上查找,没有发现便捷方法。 于是我有两个想法:1.做三个不同的表格。2.做一个表格使用不同的表头字段。…...
分布式事务 详解
1.简介 2.本地事务失效问题 可以使用AOP starter aspectJ 代理 这样就可以拿到它的上下文的代理对象,当然是有这样的需求才这么做 如果你的事务只是想默认的传播行为,共用上面的事务,就可以不用这个啦 详情请去了解 Raft 算法 还有 pa…...
【git】太大了失败: fatal: fetch-pack: invalid index-pack output
#‘’ Git仓库过大致使clone失败的解决方法 上述大神的方法,亲测有效 中途失败: 太大了 fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack: invalid index-pack output关闭压缩 git config --global core.…...
在 ArchLinux 上编译运行 axmol 引擎
本文将在 Windows 10 上安装 Arch WSL 中编译 axmol 请确保 WSL2 已正确安装 1. 在微软应用商店安装 ArchLinux 2. 打开 Arch,按照提示输入用户名和密码,尽量简单 3. 配置清华源,速度快的起飞,否则,各种包会安装失败…...
云计算的三种服务模式
云计算的三种主要服务模式分别是基础设施即服务(IaaS)、平台即服务(PaaS)和软件即服务(SaaS)。每种服务模式都提供不同级别的抽象和管理,满足不同的需求和用例。以下是对这三种服务模式的详细介…...
Pytorch使用教学1-Tensor的创建
0 导读 在我们不知道什么是深度学习计算框架时,我们可以把PyTorch看做是Python的第三方库,在PyTorch中定义了适用于深度学习的张量Tensor,以及张量的各类计算。就相当于NumPy中定义的Array和对应的科学计算方法,正是这些基本数据…...
R语言统计分析——数据管理4
参考资料:R语言实战【第2版】 1、数学函数 abs(x):绝对值 sqrt(x):平方根 ceiling(x):不小于x的最小整数 floor(x):不大于x的最大整数 trunc(x):向0的方向截取x中的整数部分 round(x,digitsn)&#…...
用uniapp 及socket.io做一个简单聊天app 2
在这里只有群聊,二个好友聊天,可以认为是建了一个二人的群聊。 const express require(express); const http require(http); const socketIo require(socket.io); const cors require(cors); // 引入 cors 中间件const app express(); const serv…...
Si24R03:高度集成的低功耗SOC芯片中文资料
Si24R03是一款高度集成的低功耗SOC芯片,具有低功耗、Low Pin Count、宽电压工作范围,集成了13/14/15/16位精度的 ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、无线收发器等丰富的外设。 合封说明:Si24R03为CSM32RV003和Si24R1的合封芯…...
K8s-控制器
一 为什么使用控制器 pod控制器 作用:1.pod类型资源删除,不会重建 2.控制器可以帮助用户监控,并保证节点上运行定义好的pod副本数 3.pod超过或低于用户期望,控制器会创建、删除pod副本数量 控制器类型&am…...
Meta 发布 LLAMA 3.1;特斯拉无人出租车推迟至 10 月;谷歌将向 Waymo 再投 50 亿美元
先瞧一下 Chat 和 Agent 的差异。 Chat(聊天):纯粹的 Chat,宛如一个主要由“大脑与嘴”组成的智能体,着重于信息处置和语言沟通。诸如 ChatGPT 这般的系统,其能够领会用户的询问,给出有益且连贯…...
C 语言基础概念总结
C 语言基础概念总结 一、数据类型 目录 C 语言基础概念总结 一、数据类型 基本数据类型 构造数据类型 二、变量与常量 三、运算符与表达式 算术运算符 关系运算符 逻辑运算符 赋值运算符 自增自减运算符 四、控制流语句 顺序结构 选择结构 循环结构 五、函数 …...
Django教程(000):初识Django
Django 是一个高级 Python Web 框架,旨在快速开发、简洁、实用。Django 提供了众多内置功能,使得开发者可以专注于编写应用程序的业务逻辑,而不需要过多关注底层细节。以下是 Django 的详细介绍: 1. Django 简介 Django 是一个开放源代码的 Web 框架,由 Python 编写,最…...
SQLynx数据库管理工具
背景:业主对网络安全要求比较高,不提供VPN等远程工具,也不能开放3306端口到互联网。那怎么样运维数据库就是个难题?找到了SQLynx这个可以网页访问的数据库管理工具,给大家分享一下。 1.介绍 SQLynx原名SQL Studio&…...
Java基础06:变量,常量,作用域(狂神说Java)
一.变量 有了static,即类变量,就可以不用new了可以直接调用,类变量之后再细讲 二.常量 三.变量的命名规范...
inflight 守恒建模
去上海博物馆参观古埃及文物展,人太多,体验很差,我可以当讲解员的,但没人听,都只为拍照发圈。 平心而论,老家殷墟可与之一战,建议将殷墟交给国家运营,而不是一个地级市文旅。 无心…...
HarmonyOS NEXT星河版零基础入门到实战
文章目录 一、HarmonyOS NEXT介绍学习内容1、鸿蒙APP开发2、能力套件开发3、全场景开发适合人群 持续更新中✒️总结 一、HarmonyOS NEXT介绍 放弃安卓框架之后,HarmonyOS NEXT成为真正独立于安卓、iOS的操作系统,堪称是一场史无前例的脱胎换骨。在其众多…...
测试开发面试题---JVM
JAVA的内存区域 程序计数器:线程私有的,保存当前线程的字节码文件。JAVA虚拟机栈:包含局部变量信息,用于方法的调用和执行。本地方法栈:与JAVA虚拟机栈类似,但只服务于本地方法。堆:所有线程共…...
python库 - jsonpath
JSONPath 是一种用于从 JSON 数据中提取数据的查询语言,类似于 XML 中的 XPath。它允许通过路径表达式来导航和查询 JSON 结构中的数据。JSONPath 在处理 API 响应、配置文件和复杂数据结构时非常有用。 以下是一些常用的 JSONPath 表达式及其功能: $&…...
[RK3588][Android12] Android->OTA包超过4个G导致打包失败
测试平台 Platform: RK3588 OS: Android12 问题说明: 有的客户需要往系统中内置大量apk,这样就导致最终打包的OTA包超过4个G,从而导致打包OTA的时候报错:Zipfile size would require ZIP64 extensions 解决方法: 可能…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
