vue+element-ui找出表格一行中的最大值和一列中的最大值改变字体颜色

 

//找出一行中的最大值和一列中的最大值,改变其字体颜色
 addStyle({ row, column, rowIndex, columnIndex }){
      //newObject 行数据
      let newObject = [];
      //columnObject 列数据
      let columnObject = [];
      //需要获取的属性名称
      let columnTag = null
      //这里我需要的是表格的第2、4、6、8、10、12、14、16列的属性
      switch (columnIndex) {
        case 2:columnTag = 6; break;
        case 4:columnTag = 5 ;break;
        case 6:columnTag = 4 ;break;
        case 8:columnTag = 3 ;break;
        case 10:columnTag = 2 ;break;
        case 12:columnTag = 1 ;break;
        case 14:columnTag = "avg" ;break;
        case 16:columnTag = 0 ;break;
      }
      for (let i = 0; i < this.tableData.length; i++) {
        //将后台返回的数组对象中属性名为np_t6-0\np_tavg的利用for循环拿出来,并和纵坐标(rIdx)以对象的形式放到columnObject列数据中
        // columnObject中放的是当前属性下元素值和元素对应纵坐标
        if (columnIndex == 2 || columnIndex == 4 || columnIndex == 6 || columnIndex == 8 || columnIndex == 10 || columnIndex == 12
      || columnIndex == 14 || columnIndex == 16){
            columnObject.push({
              attr: this.tableData[i][`np_t${columnTag}`],
              rIdx: i,
            });
          }
        //将后台返回的数组对象中属性名为np_t6-0\np_tavg的利用for循环拿出来,并和arrRow下纵坐标(rIdx)、newObject下横坐标(rIdx)以对象的形式放到newObject行数据中
        let arrRow = []
        let tagArr = [
          {tag:"np_t6",cIndex:2},{tag:"np_t5",cIndex:4},{tag:"np_t4",cIndex:6},{tag:"np_t3",cIndex:8},{tag:"np_t2",cIndex:10},
          {tag:"np_t1",cIndex:12},{tag:"np_tavg",cIndex:14},{tag:"np_t0",cIndex:16}]
        for (let j = 0; j < tagArr.length; j++) {
          // arrRow中放的是当前行各属性下元素值和元素对应纵坐标
          arrRow.push({
            attr: this.tableData[i][`${tagArr[j].tag}`],
            rIdx: tagArr[j].cIndex
          })
        }
        // newObject中放的是当前行所有属性元素值数组和元素对应横坐标
        newObject.push({
          attr: arrRow,
          rIdx:i
        })
      }
      // 将一行中的数据放到arr中
      let arr = [];
      for (let j = 0; j < newObject.length; j++) {
        let arrList = []
        for (let s = 0; s < newObject[j].attr.length; s++) {
          arrList.push(Number(newObject[j].attr[s].attr));
        }
        arr.push({
          attr: arrList,
          rIdx: newObject[j].rIdx,
        })
      }
      // 将一列中的数据放到arr中
      let columnArr = [];
      for (let j = 0; j < columnObject.length; j++) {
        columnArr.push(Number(columnObject[j].attr));
      }
        
      //得到行的最大值
      let max = []
      for (let i = 0; i < arr.length; i++) {
        max.push({
          attr:Math.max.apply(null, arr[i].attr),
          rIdx:arr[i].rIdx
        })
      }

      //得到列的最大值
      let cmax = Math.max.apply(null, columnArr);//直接Math.max(arr)会报错
       
      let arr1 = [];
          //因为一行中可能有两个值是一样大的,他们的单元格样式都需要改变,所以遍历newObject这个数组对象,将相同属性值对应的总表表取出来放到一个空数组中
      for (let c = 0; c < newObject.length; c++) {
        for (let d = 0; d < max.length; d++) {
          if(newObject[c].rIdx === max[d].rIdx && max[d].attr!=0){
            for (let b = 0; b < newObject[c].attr.length; b++) {
              //得到所有最大值所在行的所有索引
              if (Number(newObject[c].attr[b].attr) == max[d].attr) {
                arr1.push({
                  cIndex:newObject[c].attr[b].rIdx,
                  rIndex:newObject[c].rIdx
                });
              }
            }
          }
        }
      }

      let columnArr1 = [];
      //因为一列中可能有两个值是一样大的,他们的单元格样式都需要改变,所以遍历newObject这个数组对象,将相同属性值对应的总表表取出来放到一个空数组中
      for (let c = 0; c < columnObject.length; c++) {
        //得到所有最大值所在行的所有索引
        if (Number(columnObject[c].attr) == cmax && cmax!=0) {
          columnArr1.push(columnObject[c].rIdx);
        }
      }
        
      //根据横纵坐标将行的最大值全部变色
      for (let m = 0; m < arr1.length; m++) {
        if (columnIndex == arr1[m].cIndex && rowIndex == arr1[m].rIndex) {
          return `color:red`;
        }
      }

      //已知横坐标,对纵坐标进行遍历渲染,将列的最大值全部变色
      for (let m = 0; m < columnArr1.length; m++) {
        if ((columnIndex == 2 || columnIndex == 4 || columnIndex == 6 || columnIndex == 8 || columnIndex == 10 || columnIndex == 12
      || columnIndex == 14 || columnIndex == 16) && rowIndex == columnArr1[m]) {
          return `color:red`;
        }
      }
    }
 

  • 0
    点赞
  • 0
    收藏 更改收藏夹
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wangkaixin1108

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值