Element UI el-tag 根据不同状态的数据展示不同颜色的标签_el-tag :type-程序员宅基地

技术标签: vue  

Element UI 根据不同状态的数据展示不同颜色的标签

展示标签可以使用el-tag,不同的数据可以使用三目运算进行管控
代码如下:

<el-tag :type="(scope.row.auditstatus == '0' ? '' : (scope.row.auditstatus == '1' ? 'success' : (scope.row.auditstatus == '2' ? 'danger' : (scope.row.auditstatus == '3' ? 'warning' : 'danger'))))" size="mini">
	{
    {
     scope.row.auditstatus == '0' ? '初始值' : (scope.row.auditstatus == '1' ? '审核通过' : (scope.row.auditstatus == '2' ? '审核不通过' : (scope.row.auditstatus == '3' ? '待审核' : '删除'))) }}
</el-tag>

效果图如下:
在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/RAGACM/article/details/108658407

智能推荐

vue-项目搭建-程序员宅基地

文章浏览阅读88次。1.下载node.js,node -v显示版本号2.淘宝的cnpm命令管理工具可以代替默认的npm管理工具:$ npm install -g cnpm –registry=https://registry.npm.taobao.org;3.全局安装vue-cli脚手架,输入命令:cnpm install –global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息...

stm32学习笔记——***JLink Error: Bad JTAG communication: Write to IR: Expected 0x1, got 0xF (TAP Command :-程序员宅基地

文章浏览阅读7.3k次,点赞2次,收藏4次。今天写给小stm32程序,程序可以下载,但是出现出现如下警告***JLink Error: Bad JTAG communication: Write to IR: Expected 0x1, got 0xF (TAP Command : 10) @ Off 0x5./*@@@@@@@@@@@@@@*** JLink错误:坏JTAG通信:写入IR:预期的0x1,得到0xF(TAP命令:10)@_***jlink error: bad jtag communication: write to ir: expected 0x1, got 0xf (

问题 A: Digits----------------------------思维_给一个关于x的多项式,并给定一个x,求该多项式在带入该x时的值最后k位数字。 输入-程序员宅基地

文章浏览阅读155次。题目描述给一个关于x的多项式,并给定一个x,求该多项式在带入该x时的值最后k位数字。输入第一行两个整数 n、k;之后的 n 行,每行两个数 ai和bi,表示多项式的一项 aixbi;最后一行一个整数x。输出输出 k 行,按顺序输出该多项式带入x后值的最后 k 位数字,若不足 k 位,则高位补零。样例输入 Copy2 13 21 53样例输出 Copy0提示对于 10..._给一个关于x的多项式,并给定一个x,求该多项式在带入该x时的值最后k位数字。 输入

RabbitMQ消息模式2_rabbitmq 2个connection-factory-程序员宅基地

文章浏览阅读259次。RabbitMQ1、消费端限流2、消息的ACK与重回队列3、TTL消息4、死信队列1、消费端限流什么是消费端的限流?假设一个场景,首先,我们RabbitMQ服务器有上万条未处理的消息,我们随便打开一个消费者客户端,会出现下面情况:巨量的消息瞬间全部推送过来,但是我们单个客户端无法同时处理这么多数据!在实际开发中,用户支付完毕会发送消息到MQ Broker中,如果100个用户支付完毕,那..._rabbitmq 2个connection-factory

mybatis的增删改操作及需要注意的问题_mybatis删除注意什么-程序员宅基地

文章浏览阅读267次。继上一篇文章的开发环境操作https://blog.csdn.net/qq_43941925/article/details/114491876Mybatis的插入操作在UserMapper.xml文件中添加插入操作<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-_mybatis删除注意什么

html5标签_csdnhtml5标签-程序员宅基地

文章浏览阅读313次,点赞2次,收藏4次。html5 里面的新标签 (语义化明确)定义独立内容:< article > 我是article< /article >定义侧边栏< aside > 定义侧边栏< /aside >定义文本:( 脱离父元素的设置方向)< bdi > 脱离元素的设置方向< /bdi >< command >< /co..._csdnhtml5标签

随便推点

MindSpore21天实战营(2):基于BERT实现中文新闻分类实战_bert 中文实战-程序员宅基地

文章浏览阅读1k次。转载地址:MindSpore21天实战营(2):基于BERT实现中文新闻分类实战_MindSpore_昇腾论坛_华为云论坛作者:胡琦“ModelArts + MindSpore”实战BERT中文新闻分类Copy攻城狮人狠话不多,学AI就到huaweicloud.ai,和“MM”一起玩转AI。前言大家好,我是Copy攻城狮胡琦,有幸参与华为业界首个全场景AI实战营。今天是MIndSpore 21天实战营的第二次课,光接触的名词就已经碉堡了--一站式AI开发平台ModelArts、全栈全场景_bert 中文实战

Python的一,二,三维数组中根据下标取得对应数值_三维数组下标-程序员宅基地

文章浏览阅读5.8k次。备注使用语言 python使用库 numpy使用pycharm显示效果 : 左边中括号的数目即数组的维度一维数组一维数组不需要多个下标,因为只有一个维度,所以使用一个下标即可# 使用了numpy库构建import numpy as npa = np.arange(24)print(a)结果为[ 0 1 2 3 4 5 6 7 8 9 10 11]..._三维数组下标

Python+Selenium-10-获取元素text属性值_sulenium find element text-程序员宅基地

文章浏览阅读1.7w次。获取元素text属性值Selenium获取响应元素的文本属性值用来校验如:公司网站登录页面,输入正确用户名错误密码点击登录,会提示“密码账号不正确!”思考:如何用脚本去做这样的判断?答:脚本实现点击登录时去获取这个元素的text,判断与界面显示的“密码账号不正确!”一致,一致就代表测试通过,前台提示正确代码实现代码# coding:utf-8from..._sulenium find element text

Android横竖屏设置-程序员宅基地

文章浏览阅读1.9w次,点赞4次,收藏11次。默认情况下,当用户手机的”屏幕旋转”选项打开后,旋转手机方向,手机屏幕也会跟随旋转的方向进行横竖屏切换.设置屏幕旋转的方式有两种:一.在AndroidManifest.xml设置  如果activity默认是某种模式的,直接在AndroidManifest.xml中的对应activity项中,添加相应的代码即可实现  如:    androi

R语言做评分卡模型<二>_r scorecard中 查看test集iv值-程序员宅基地

文章浏览阅读2.2k次。Score Card原理 评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量离散化之后用WOE编码,在建立模型。ScoreCard用IV值来筛选变量,而且ScoreCard输出为分值。对IV的直观理解 IV的全称是Information Value,中文意思是信息价值,或者_r scorecard中 查看test集iv值

汉字转换_tt99911.cm-程序员宅基地

文章浏览阅读2.6w次。中文转Unicodefunction unicode(str) { var value = ''; for (var i = 0; i < str.length; i++) { value += '\\u' + left_zero_4(parseInt(str.charCodeAt(i)).toString(16)); } return value;}function left_zero_4(str) { if (str != nul_tt99911.cm