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.本期的教程到了这里就完结啦,是不是很简略,让咱们一起致力走向巅峰!