vue + element 表格根据某字段状态控制该行色彩（特殊样式）

根据需求，表格的每一行的数据所处的 事务状态，流程状态等不同，根据这些状态将表格每行改变颜色用以区分，（本文主要说的是三元运算符以及16进制颜色转换rgb格式）

效果图

  我是根据每一行的执行情况这个字段来控制不同色彩的，且色彩是后端配置的，数据同样在表格当前行中，

el-table表格内

1. 表格内添加template插槽，放置span标签，花括号绑定该字段。 :class设置的是span样式，三元表达式判断非空，页面style内设置两个样式，有值和没值时的样式。

class样式

2. :style就是三元表达式判断该字段的值，然后拼接样式（若颜色不用后端配置而是写死，可直接在页面style内设置多个class，直接在:class中判）。

3. 拼接中的background:后面的变量是在data中定义的，因为后端给的颜色是#EEEEEE这样的，而背景色需要rgb(250,250,250,0.1)这样是，所以需要在methods内转化一下，

接口返还数据

上图是接口返还的数据，根据数据运用数组find方法查找符合条件的元素，如果该字段==A，获取其颜色定义str，设置透明度n，定义变量名Acolor，然后调用转换方法，将这些变量传过去；如果该字段==B，依次定义……

#eeeeee转换rgb()

 str是#16进制颜色，n是想要的透明度，zxqk是data中定义的转化后颜色的变量名，主要用于转化后赋值： this[zxqk] = "rgba(" + sColorChange.join(",") + "," + n + ")";

几？. 代码：（只有转化是固定格式，其它的根据自己页面写）

   // 颜色16进制转rgb

    colorRgba(str, n, zxqk) {

      //十六进制颜色值的正则表达式

      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

      var sColor = str.toLowerCase();

      //十六进制颜色转换为RGB格式

      if (sColor && reg.test(sColor)) {

        if (sColor.length === 4) {

          var sColorNew = "#";

          for (var i = 1; i < 4; i += 1) {

            //例如：#eee,#fff等

            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));

          }

          sColor = sColorNew;

        }

        //处理六位颜色值

        var sColorChange = [];

        for (var i = 1; i < 7; i += 2) {

          sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));

        }

        this[zxqk] = "rgba(" + sColorChange.join(",") + "," + n + ")";

      } else {

        return sColor;

      }

    },

几+1. 其实一开始是根据字段，控制整行颜色，页面有点妖艳就改了，如果就需要这种，可参考斑马纹

斑马纹

if内判断row.aaaaa == A  return "某class"，判断多个，else return一个背景色是白的就行，（如果需要这种可私）

---

（最近安妮的毒比较神，窝嫩叠只是开玩笑，勿喷！嫩我儿）