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一个背景色是白的就行,(如果需要这种可私)


(最近安妮的毒比较神,窝嫩叠只是开玩笑,勿喷!嫩我儿)

你可能感兴趣的:(vue + element 表格根据某字段状态控制该行色彩(特殊样式))