【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.mzph.cn/news/102420.shtml

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

相关文章

【C/C++】使用 g++ 编译器编译 C++ 程序的完全指南

本文介绍了 g 编译器的使用方法和常见参数解释&#xff0c;帮助您编译和构建 C 程序。 引言 在 C 程序开发中&#xff0c;选择一个合适的编译器是至关重要的。g 是 GNU 编译器集合&#xff08;GCC&#xff09;中的 C 编译器&#xff0c;提供了丰富的功能和选项&#xff0c;帮…

嵌入式面试常见问题(一)

目录 1.什么情况下会出现段错误&#xff1f; 2.swap() 函数为什么不能交换两个变量的值 3.一个函数有六个参数 分别放在哪个区&#xff1f; 4.定义一个变量&#xff0c;赋初值和不赋初值分别保存在哪个区&#xff1f; 5.linux查看端口状态的命令 6.结构体中->和.的区…

Tomcat自启动另一种方法

Tomcat自启动另一种方法 问题&#xff1a; 不知道怎么回事&#xff0c;好几台电脑都可以开机自启动tomcat&#xff0c;正常运行项目。一样的配置一样的操作流程&#xff0c;偏偏要运行的机器开机自启动后&#xff0c;项目不能运行&#xff0c;手动重启tomcat又可以用了。网上…

FHRP首跳冗余的解析

首跳冗余的解析 个人简介 HSRP hot standby router protocol 热备份路由协议 思科设备上 HSRP VRRP 华为设备上 VRRP HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &a…

【低代码表单设计器】:创造高效率的流程化办公!

当前&#xff0c;有不少用户朋友对低代码表单设计器挺感兴趣。其实&#xff0c;如果想要实现提质增效的办公效率&#xff0c;创造一个流程化办公&#xff0c;那么确实可以了解低代码技术平台。流辰信息作为服务商&#xff0c;拥有较强的自主研发能力&#xff0c;根据市场的变化…

Maven安装

Maven安装 1、Linux下Maven安装 1.1 下载安装包 maven 官网地址&#xff1a;https://maven.apache.org/download.cgi 安装包下载地址&#xff1a;https://dlcdn.apache.org/maven/maven-3 这里下载 apache-maven-3.3.9-bin.tar.gz 下载后上传到Linux服务器 1.2 安装Mave…

如何不引入第三个中间变量进行两数交换

但在大厂面试中&#xff0c;有一道非常经典的数字交换题目&#xff1a;如何在不引入第三个中间变量的情况下&#xff0c;完成两个数字的交换。 这里可以用到一个数学上的技巧&#xff1a; a a b; b a - b; a a - b; 除了这种先加后减的写法&#xff0c;还有一种先减后加的…

Mybatis入门

Mybatis mybatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发。&#xff08;控制层 controller&#xff09;&#xff08;业务层service&#xff09;&#xff08;持久层dao&#xff09;&#xff08;数据库&#xff09; 快速创建springboot-mybatis工程 jdk选11 &am…

MAC m系列docker login报错

错误&#xff1a;ERROR: failed to solve: XXX error getting credentials - err: exit status 1, out: 解决&#xff1a; vi ~/.docker/config.jsonzsxzsx [15时55分55秒] [~] { {"auths": {"harbor-g42c.corp.matrx.team": {"auth": "…

RK平台使用MP4视频做开机动画以及卡顿问题

rk平台android11以后系统都可以使用MP4格式的视频做开机动画,系统源码里面默认使用的是ts格式的视频,其实使用mp4的视频也是可以的。具体修改如下: diff --git a/frameworks/base/cmds/bootanimation/BootAnimation.cpp b/frameworks/base/cmds/bootanimation/BootAnimat…

android Selinux 之 platform

概念&#xff1a; 平台签名&#xff1a;Android.mk 中&#xff0c;定义 LOCAL_CERTIFICATE : platform system权限&#xff1a;AndroidManifest.xml 中声明 android:sharedUserId"android.uid.system" &#xff0c;同时是平台签名 分类&#xff1a; untrusted_…

ubuntu下使用gcc编译c程序: “error: stray ‘\357’ in program“

现象&#xff1a; ubuntu下使用gcc编译c程序: “error: stray ‘\357’ in program“ 尝试查找原因&#xff1a;打开从windos直接粘贴c程序到ubuntu的c代码&#xff0c;发现多了 <200b>&#xff1a; 方案&#xff1a;尝试在vim编辑器删除&#xff0c;多出来的字符后编译…

ARM 按键控制 LED灯,蜂鸣器,风扇

main.c: #include "uart.h" #include "key_it.h" int main() {all_led_init();uart4_init();//串口初始化//中断初始化key_it_config();key3_it_config();buzzer_init();fan_init();while(1){//保证主程序不结束}return 0; }src/key_it.c: #include"…

Java 使用 Easyexcel 导出大量数据

读Excel | Easy Excel 1、 我遇到的数据量超级大&#xff0c;使用传统的POI方式来完成导入导出很明显会内存溢出&#xff0c;并且效率会非常低&#xff1b;2、 数据量大直接使用select * from tableName肯定不行&#xff0c;一下子查出来300w条数据肯定会很慢&#xff1b;3、 …

昇腾910使用记录

一. 压缩文件和解压文件 1. 压缩文件 tar -czvf UNITE-main.tar.gz ./UNITE-main/2. 解压文件 tar -xvf ./UNITE-main/二. CUDA更改为NPU data[label] data[label].cuda() data[instance] data[instance].cuda() data[image] data[image].cuda()更改为 data[label] da…

小程序中使用echarts的相关配置以及折线图案例(简单易懂)

第一步&#xff1a;引入echarts文件--此文件需要下载&#xff1a; 下载地址&#xff1a;点击此处进行下载echarts文件 点击Download ZIP下载压缩包&#xff0c;注意&#xff1a;e-canvas是我从完整的文件中剥离出来的有用的&#xff0c;不会影响项目。 第二步&#xff1a;把整…

ctfshow萌新计划web9-14(正则匹配绕过)

目录 web9 web10 web11 web12 web13 web14 web9 审一下代码&#xff0c;需要匹配到system|exec|highlight才会执行eval函数 先看一下当前目录下有什么 payload&#xff1a;?csystem(ls); index.php是首页&#xff0c;我们看看config.php payload&#xff1a;?csystem…

nodejs+vue+elementui医院挂号预约管理系统4n9w0

前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE 1、 node_modules文件夹(有npn install Express 框架于Node运行环境的Web框架, 开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff…

邮政编码,格式校验:@ZipCode(自定义注解)

目标 自定义一个用于校验邮政编码格式的注解ZipCode&#xff0c;能够和现有的 Validation 兼容&#xff0c;使用方式和其他校验注解保持一致&#xff08;使用 Valid 注解接口参数&#xff09;。 校验逻辑 有效格式 不能包含空格&#xff1b;应为6位数字&#xff1b; 不校验…

AI「鸟口普查」,康奈尔大学利用深度学习分析北美林莺分布

据世界自然基金会统计&#xff0c;1970-2016 年&#xff0c;全球代表物种种群数量减少了 68%&#xff0c;生物多样性不断下降。 保护生物多样性&#xff0c;需要对当地生态情况进行准确分析&#xff0c;制定合理的生态保护政策。然而&#xff0c;生态数据太过庞杂&#xff0c;统…