element table row-style 实现列颜色区分 以及 js生成随机色，避免相近色

实现仓库看板需求遇到的问题

1. table 显示的不同订单生产编码同时下线字体用不同颜色区分
2. 随机生成颜色,不能过于相似,避免灰颜与过暗

步骤
需要实现不同的订单号展示不同的颜色.之前有使用 “row-class-name” 方法进行class 的自定义.但此刻这个方法无法成功,因为你不清楚返回会有多少订单编码.没法写那么多class. 然后在文档找到了 row-style

element文档

row-style 的使用

// 错误的写法
rowStyle({ row, rowIndex}) {
	if (rowIndex === 0) {
		return color : '#e21918'
	} else {
		return  ''
	}
}
// 正常的写法 (看文档返回的是Object)
rowStyle({ row, rowIndex}){
	let styleObj={}
	if (rowIndex === 0) {
		styleObj.color= '#e21918';
		return styleObj;
	}
}

实现 js 的随机获取比较简单.代码如下,

//颜色对象
  function Color(){
     this.r = Math.floor(Math.random()*255);
     this.g = Math.floor(Math.random()*255);
     this.b = Math.floor(Math.random()*255);
     this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
  }

并不符合我们的需求…在segmentfault 发现了这个问题…可惜也一样生成的颜色颜色有些相近.

js随机颜色生成

getRandomColor () {
      const a = 20; const b = 230; const c = Math.floor(Math.random() * 255);
      function randomSort () {
          return Math.random() < 0.5 ? -1 : 1;
      }
      const randomArray = [a, b, c].sort(randomSort);
      return `rgb(${randomArray[0]}, ${randomArray[1]}, ${randomArray[2]})`;
 }

/**
* @function lightColorGen - 亮色生成器
* @params { Number } -最低亮度, 在[0, 100] 之间
 * @return { String } - 颜色
*/
     lightColorGen(minLight) {
            const { random } = Math;
            const mH = 360; // 色相环角度范围
            const mS = 100; // 饱和度范围
            const mL = 100 - minLight; // 亮度范围
            const H = ~~mH * random();
            const S = ~~mS * random();
            const L = minLight + (~~mL * random());
            return `HSL(${H}, ${S}%, ${L}%)`;
      }

后面参考了 下面链接简书上面的代码修改成了自己需要的效果

简书生成s生成随机色，避免相近色

// 后端返回数据 tableData
this.tableSort = tableData;
let obj = {};
// 数组对象去重
let peon = this.tableSort.reduce((cur,next) => {
  obj[next.busDeptName] ? "" : obj[next.busDeptName] = true && cur.push(next)
  return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
var HSL = [];
// 根据返回的生产单号生成自己的颜色
for (let i = 0; i < peon.length; i++) {
      const objt = {};
      objt.rowbusDeptcode = peon[i].busDeptName;
       // 获取随机颜色
       var ret = this.randomHsl();
	   if (i > 0 && Math.abs(ret[0] - HSL[i - 1].color[0]) < 0.25) {
	       i--;
           continue; // 重新获取随机色
       }
	   ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色
	   ret[2] = 0.4 + (ret[2] * 0.4); // [0.4 - 0.8] 排除过亮过暗色
	   // 数据转化到小数点后两位
	   ret = ret.map(function (item) {
	   return parseFloat(item.toFixed(2));
   });
  objt.color = ret;
  HSL.push(objt);
}

hslToRgb: function (H, S, L) {
		var R, G, B;
          if (+S === 0) {
            R = G = B = L; // 饱和度为0 为灰色
          } else {
             var hue2Rgb = function (p, q, t) {
              if (t < 0) t += 1;
              if (t > 1) t -= 1;
              if (t < 1/6) return p + (q - p) * 6 * t;
              if (t < 1/2) return q;
              if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
              return p;
            };
            var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
            var P = 2 * L - Q;
            R = hue2Rgb(P, Q, H + 1/3);
            G = hue2Rgb(P, Q, H);
            B = hue2Rgb(P, Q, H - 1/3);
          }
          const a = Math.round(R * 255).toString();
          const b = Math.round(G * 255).toString();
          const c = Math.round(B * 255).toString();
		  return `rgb(${a}, ${b}, ${c})`;
 },
 // rowStyle 处理函数
 // 传过来的 HSL =  this.endName;
 tableRowClassName({ row, rowIndex }) {
      for (let i = 0; i < this.endName.length; i++) {
      	  // busDeptName  不同的 订单编码
          if (row.busDeptName === this.endName[i].rowbusDeptcode) {
             let styleObj = {};
             styleObj.color= this.hslToRgb(...this.endName[i].color);
              console.log(styleObj)
              return styleObj;
          }
	   }
 },

效果如下