根据需求,表格的每一行的数据所处的 事务状态,流程状态等不同,根据这些状态将表格每行改变颜色用以区分,(本文主要说的是三元运算符以及16进制颜色转换rgb格式)
我是根据每一行的执行情况这个字段来控制不同色彩的,且色彩是后端配置的,数据同样在表格当前行中,
1. 表格内添加template插槽,放置span标签,花括号绑定该字段。 :class设置的是span样式,三元表达式判断非空,页面style内设置两个样式,有值和没值时的样式。
2. :style就是三元表达式判断该字段的值,然后拼接样式(若颜色不用后端配置而是写死,可直接在页面style内设置多个class,直接在:class中判)。
3. 拼接中的background:后面的变量是在data中定义的,因为后端给的颜色是#EEEEEE这样的,而背景色需要rgb(250,250,250,0.1)这样是,所以需要在methods内转化一下,
上图是接口返还的数据,根据数据运用数组find方法查找符合条件的元素,如果该字段==A,获取其颜色定义str,设置透明度n,定义变量名Acolor,然后调用转换方法,将这些变量传过去;如果该字段==B,依次定义……
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一个背景色是白的就行,(如果需要这种可私)
(最近安妮的毒比较神,窝嫩叠只是开玩笑,勿喷!嫩我儿)