关于vue.js:vueelement中eltag动态绑定颜色

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