共计 1621 个字符，预计需要花费 5 分钟才能阅读完成。
vue+element 中 el-tag 动静绑定色彩
1. 开发环境 vue+element
2. 电脑系统 windows10 专业版
3. 在开发的过程中咱们常常会应用到 element 中的 el-tag, 怎么实现动静绑定色彩, 成果如下:
4.template 代码如下:
<el-table-column prop="zt" align="center" label="设施状态">
<template slot-scope="scope">
<el-tag effect="dark" :color="scope.row.color">
{{scope.row.zt}}
</el-tag>
</template>
</el-table-column>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. 本期的教程到了这里就完结啦, 是不是很简略, 让咱们一起致力走向巅峰!
正文完