【VUE】element Table指定字段单元格样式及数据格式化

将列表中的指定字段的数据,根据字典值回显,并修改指定状态的显示样式

	<el-tableref="table"height="500px":data="dataList"><template v-for="(item, index) in columns"><el-table-column:key="index":index="index":label="item.label"align="center":prop="item.code":show-overflow-tooltip="true"><template slot-scope="scope"><template v-if="item.render"><span><RenderDom:row="scope.row":index="index":render="item.render"/></span></template><template v-else-if="item.code === 'deviceCount'"><spanv-if="scope.row[item.code] === null || scope.row[item.code] === ''">-</span><buttonv-elseclass="deviceCountBtn"@click="handleDeviceCountBtn(scope.row)">{{ scope.row[item.code] }}</button></template><template v-else-if="item.code === 'status'"><div class="statusFlex"><div:class="['statusCircle',{ statusCirclePurple: scope.row[item.code] === '2' },{statusCircleGray:scope.row[item.code] === '1' ||scope.row[item.code] === '3' ||scope.row[item.code] === '4',},]"></div><span>{{selectDictLabel(dict.type.paas_orderStatus,scope.row[item.code])}}</span></div></template><template v-else><span>{{ scope.row[item.code] }}</span></template></template></el-table-column></template>
</el-table>

 

// 列信息columns: [{label: this.$t('paasOrder.status'),code: `status`,visible: true,width: '250px',},{label: this.$t('common.updatedBy'),code: `updatedBy`,visible: true,width: '220px',},{label: this.$t('common.updatedTime'),code: `updatedTime`,visible: true,width: '220px',},],
	// 清除圆形下默认'-'.statusCircle::after {content: '';}.statusFlex {display: flex;justify-content: center;align-items: center;}.statusCircleGray {width: 13px;height: 13px;border-radius: 13px;background: #d8d8d8;margin-right: 6px;}.statusCirclePurple {width: 13px;height: 13px;border-radius: 13px;background: #4d5aa0;margin-right: 6px;}

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

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

相关文章

【Overload游戏引擎分析】从视图投影矩阵提取视锥体及overload对视锥体的封装

overoad代码中包含一段有意思的代码&#xff0c;可以从视图投影矩阵逆推出摄像机的视锥体&#xff0c;本文来分析一下原理 一、平面的方程 视锥体是用平面来表示的&#xff0c;所以先看看平面的数学表达。 平面方程可以由其法线N&#xff08;A, B, C&#xff09;和一个点Q(x0,…

机器学习:随机森林

集成学习 集成学习&#xff08;Ensemble Learning&#xff09;是一种机器学习方法&#xff0c;通过将多个基本学习算法的预测结果进行组合&#xff0c;以获得更好的预测性能。集成学习的基本思想是通过结合多个弱分类器或回归器的预测结果&#xff0c;来构建一个更强大的集成模…

Ubuntu 22.04 安装系统 手动分区 针对只有一块硬盘 lvm 单独分出/home

自动安装的信息 参考自动安装时产生的分区信息 rootyeqiang-MS-7B23:~# fdisk /dev/sdb -l Disk /dev/sdb&#xff1a;894.25 GiB&#xff0c;960197124096 字节&#xff0c;1875385008 个扇区 Disk model: INTEL SSDSC2KB96 单元&#xff1a;扇区 / 1 * 512 512 字节 扇区大…

设计模式 - 访问者模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 访问者模式&#xff0c;即在不改变聚合对象内元素的前提下&#xff0c;为聚合对象内每个元素提供多种访问方式&#xff0c;即聚合对象内的每个元素都有多个访问者对象。访问者模式主要解决稳定的数据结构和易变元素的操作之间的…

分布式锁如何实现

分布式是现在的比较主流的技术&#xff0c;常常和微服务一起出现。那么对于多个实例之间&#xff0c;如何证分布式系统中多个进程或线程同步访问共享资源呢&#xff1f;我们其实一想到的就是锁&#xff0c;我们在java里边有 synchronized, 在python里有lock&#xff0c;但是这个…

【ESP32 + Edge Impulse平台】运行AI算法模拟多传感器数据融合实现异常检测

本篇博文主要以ESP32+MQ Sensor 气体传感器为例,通过连接 Edge Impulse 平台,实现数据的实时采集和训练,进而实现在嵌入式设备上部署 ML 机器学习。本教程介绍如何使用 Edge Impulse 和机器学习来实现ESP32 异常检测系统,系统使用一个机器学习模型,检测气体何时出现异常。…

websocket拦截

python实现websocket拦截 前言一、拦截的优缺点优点缺点二、实现方法1.环境配置2.代码三、总结现在的直播间都是走的websocket通信,想要获取websocket通信的内容就需要使用websocket拦截,大多数是使用中间人代理进行拦截,这里将会使用更简单的方式进行拦截。 前言 开发者工…

PUPANVR-UI主菜单及设置窗体框架(9)

PUPA NVR UI主菜单及设置窗体框架 在设计UI时&#xff0c;竟量把数据、控制、显示&#xff0c;分开&#xff0c;即MVC的一个模式吧&#xff01;使用MVC这样的模式思想&#xff0c;会让代码简洁不少&#xff0c;逻辑也很清析&#xff01; 具体的代码见&#xff1a; PUPANVR这个…

Jmeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…

【python】可视化-绘制带有边权重的无向图

文章目录 需求示例数据代码实现 需求 输入数据表(矩阵)&#xff0c;绘制无向图。 示例数据 **示例数据1&#xff1a;**3个特征之间的关系数据 (data1.txt) featuresfeature1feature2feature3feature110.60.8feature20.610.3feature30.80.31 **示例数据2&#xff1a;**4个特…

string类的使用方式的介绍

目录 前言 1.什么是STL 2. STL的版本 3. STL的六大组件 4.STL的缺陷 5.string 5.1 为什么学习string类&#xff1f; 5.1.1 C语言中的字符串 5.2 标准库中的string类 5.3 string类的常用接口的使用 5.3.1 构造函数 5.3.2 string类对象的容量操作 5.3.3 string类对象…

抄写Linux源码(Day17:你的键盘是什么时候生效的?)

回忆我们需要做的事情&#xff1a; 为了支持 shell 程序的执行&#xff0c;我们需要提供&#xff1a; 1.缺页中断(不理解为什么要这个东西&#xff0c;只是闪客说需要&#xff0c;后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的&#xff0c;所以需要这两个东…