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 解决方法: 可能…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞!!! 1 摘要 我们提出了STARFlow,一种基于归一化流的可扩展生成模型,它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流(TARFlow&am…...
