vue+element中el-tag动态绑定颜色
1.开发环境 vue+element
2.电脑系统 windows10 专业版
3.在开发的过程中我们经常会使用到 element中的 el-tag,怎么实现动态绑定颜色,效果如下:
4.template代码如下:
{{ scope.row.zt }}
5.在return 中绑定的 数组,代码如下:
tableData: [
{
id: 1,
date: "装配一线",
name: "2",
zt: "开",
color: "#000000",
ztpro: true,
snum: 2,
address: 80,
xnkdl: 76,
oee: 100,
Lnum: 10,
Snum: 9,
Hnum: 0,
ChXjp: 20,
children: [
{
id: 1001,
zt: "开机",
color: "#67C23A",
ztpro: false,
name: "设备一",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
{
id: 1012,
zt: "待料",
color: "#F56C6C",
name: "设备二",
address: 81,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
],
},
{
id: 2,
date: "装配二线",
name: "",
snum: 2,
address: 80,
xnkdl: 76,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
children: [
{
id: 2001,
zt: "开机",
name: "设备一",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
{
id: 2002,
zt: "待料",
name: "设备二",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
],
},
{
id: 3,
date: "装配三线",
name: "",
snum: 2,
address: 80,
xnkdl: 76,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
children: [
{
id: 3001,
zt: "开机",
name: "设备一",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
{
id: 3002,
zt: "待料",
name: "设备二",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
],
},
{
id: 4,
date: "装配一线",
name: "",
snum: 2,
address: 80,
xnkdl: 76,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
children: [
{
id: 4001,
zt: "开机",
name: "设备一",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
{
id: 4002,
zt: "待料",
name: "设备二",
address: 76,
xnkdl: 86,
oee: 86,
Lnum: 10,
Snum: 9,
Hnum: 90,
ChXjp: 20,
},
],
},
],
//注意:主要看 数组里面的 color,这个color最好是十六进制的;6.本期的教程到了这里就结束啦,是不是很简单,让我们一起努力走向巅峰!