1.开发环境 vue+element
2.电脑系统 windows 10专业版
3.在开发的过程中,咱们常常应用到element中的icon,咱们要实现的是动静绑定色彩值,成果如下:
4.在template中增加如下代码:
<el-table-column prop="zt" align="center" label="设施状态"> <template slot-scope="scope"> <i class="el-icon-s-platform" :style="{'color':scope.row.color,fontSize:'40px'}"></i> </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: "设施一", equipmentname:"设施一", 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, }, ], }, ],100.本期的教程到了这里就完结啦,是不是很nice,让咱们一起致力,走向巅峰!