vue+element-ui之表格列最大值和最小值变色问题-优快云博客

本文链接：https://blog.youkuaiyun.com/ssssummer/article/details/107627841

记录一下最近开发中遇到的一些问题，需求是将表格中一列数据的所有最大值单元格变成蓝色（值相同的也要变色），最小值单元格变成红色。表格总共有22列，列数较多，所以采用了循环的方式。
首先，来讲一下我的思路。
1.获取到每一列的数据
2.得到每列的最大值和最小值
3.得到当前列的属性所在行的索引
4.得到最大值和最小值所在列的索引（相当于知道了这个值得坐标）
5.改变单元格颜色（利用的是element-ui的表格中自带的方法）

<vp-table
      :data="tableData"
      border
      stripe
      fit
      height="600"
      style="width: 100%;"
      :cell-style="addStyle" //就是它
    >

addStyle({ row, column, rowIndex, columnIndex }) {
//四个参数中要确定两个才能给指定单元格添加样式
      if (columnIndex == 3) {
        let newObject = [];
        for (let i = 0; i < this.tableData.length; i++) {
        //terminalCustomers是我的表格中列索引为3的属性名,将后台返回的数组对象中属性名为terminalCustomers的利用for循环拿出来,并和纵坐标（rIdx）以对象的形式放到newObject中
          let attr = this.tableData[i].terminalCustomers; 
          let rIdx = i;
          // newObject中放的是当前属性下元素值和元素对应纵坐标
          newObject.push({
            attr: this.tableData[i].terminalCustomers,
            rIdx: i,
          });
        }
        // 将一列中的数据放到arr中
        let arr = [];
        for (var j = 0; j < newObject.length; j++) {
          arr.push(Number(newObject[j].attr));
        }
        //得到最大值和最小值
        let max = Math.max.apply(null, arr);//直接Math.max(arr)会报错
        let min = Math.min.apply(null, arr);

        let arr1 = [];
        let arr2 = [];
        
		//因为一列中可能有两个值是一样大的，他们的单元格样式都需要改变，所以遍历newObject这个数组对象，将相同属性值对应的总表表取出来放到一个空数组中
        for (let c = 0; c < newObject.length; c++) {
          //得到所有最大值所在行的所有索引
          if (Number(newObject[c].attr) == max) {
            arr1.push(newObject[c].rIdx);
            //得到所有最小值所在行的所有索引
          } else if (Number(newObject[c].attr) == min) {
            arr2.push(newObject[c].rIdx);
          }
        }
        //已知横坐标，对纵坐标进行遍历渲染，将最大值全部变色
        for (let m = 0; m < arr1.length; m++) {
          if (columnIndex == 3 && rowIndex == arr1[m]) {
            return `background:rgb(196,215,155)`;
          }
        }
        //将最小值全部变色
        for (let s = 0; s < arr2.length; s++) {
          if (columnIndex == 3 && rowIndex == arr2[s]) {
            return `background:rgb(230,184,183)`;
          }
        }
      }
     }