【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,一经查实,立即删除!

相关文章

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

目录 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;根据市场的变化…

Mybatis入门

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

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"…

小程序中使用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;统…

小程序中如何设置所服务地区的时区

在全球化的背景下&#xff0c;小程序除了在中国使用外&#xff0c;还为海外的华人地区提供服务。例如我们采云小程序为泰国、阿根廷、缅甸等国家的商家就提供过微信小程序。这些商家开通小程序&#xff0c;为本地的华人提供服务。但通常小程序的开发者/服务商位于中国&#xff…

TCP/IP(十四)流量控制

一 流量控制 说明&#xff1a; 本文只是原理铺垫,没有用tcpdumpwiresahrk鲜活的案例讲解,后续补充 ① 基本概念 流量控制: TCP 通过接受方实际能接收的数据量来控制发送方的窗口大小 ② 正常传输过程 背景:1、客户端是接收方,服务端是发送方 --> 下载2、假设接收窗…

OpenCV4(C++)——模板匹配

matchTemplate 模板匹配和卷积运算大致相同&#xff0c;模板图类似于卷积核&#xff0c;从原图的左上角开始进行滑动窗口的操作&#xff0c;最后得到一个特征图&#xff0c;这个特征图里的数值就是每次计算得到的相似度&#xff0c;通用匹配方式&#xff0c;相似值是&#xff…

浅谈高速公路服务区分布式光伏并网发电

前言 今年的国家经济工作会议提出&#xff1a;将“做好碳达峰、碳中和工作”作为 2021年的主要任务之一&#xff0c;而我国高速公路里程 15.5万公里&#xff0c;对能源的需求与日俱增&#xff0c;碳排放量增速明显。 为了实现采用减少碳排放量&#xff0c;采用清洁能源替代的…

【Java 进阶篇】JavaScript 与 HTML 的结合方式

JavaScript是一种广泛应用于Web开发中的脚本语言&#xff0c;它与HTML&#xff08;Hypertext Markup Language&#xff09;结合使用&#xff0c;使开发人员能够创建交互式和动态的网页。在这篇博客中&#xff0c;我们将深入探讨JavaScript与HTML的结合方式&#xff0c;包括如何…

第一个 Python 程序

三、第一个 Python 程序 好了&#xff0c;说了那么多&#xff0c;现在我们可以来写一下第一个 Python 程序了。 一开始写 Python 程序&#xff0c;个人不太建议用专门的工具来写&#xff0c;不方便熟悉语法&#xff0c;所以这里我先用 Sublime Text 来写&#xff0c;后期可以…

RobotFramework自动化测试框架的基础关键字

1.1.1 如何搜索RobotFramework的关键字 有两种方式可以快速的打开RIDE的关键字搜索对话框 1、选择菜单栏Tools->Search Keywords&#xff0c;然后会出现如下的关键字搜索对话框&#xff0c;这个对话框就类似提供了一个关键字的API的功能&#xff0c;提供了关键字的…

如何建立线上线下相结合的数字化新零售体系?

身处今数字化时代&#xff0c;建立线上线下相结合的数字化新零售体系是企业成功的关键。蚓链数字化营销系统致力于帮助企业实现数字化转型&#xff0c;打通线上线下销售渠道&#xff0c;提升品牌影响力和用户黏性&#xff0c;那么具体是如何建立的&#xff1f; 1. 搭建数字化中…