el-table根据单元格数值添加背景颜色

最新推荐文章于 2024-05-23 19:16:52 发布

dy1717

最新推荐文章于 2024-05-23 19:16:52 发布

阅读量1.8k

点赞数

分类专栏：工作遇到的bug 文章标签：前端 elementui javascript

本文链接：https://blog.csdn.net/dy1717/article/details/127267124

版权

工作遇到的bug 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

需求：找出表格最大值，除以5，判断每一个单元格数据在5等份的哪一份，给对应的单元格添加背景颜色、字体颜色。

突破点：

1.el-table中的cell-style这个方法

2.拿到最大值

代码如下：

//arr是我拿到的表格数据,这里用parseFloat是因为项目中返回的是小数   
cellStyle({ row, column }) {
      let max = parseFloat(this.arr[0])
      for (let i = 0; i < this.arr.length; i++) {
        if (parseFloat(this.arr[i]) > max) {
          max = parseFloat(this.arr[i])
        }
      }
      const averageTable = (max / 5).toFixed(2)
      const oneTbale = averageTable * 1
      const twoTable = averageTable * 2
      const threeTable = averageTable * 3
      const fourTable = averageTable * 4
      const fiveTable = averageTable * 5
      const colVal = row[column.property] //拿到每一个单元格的数据
      if (column.property == 'rangeCnt') { //列名叫rangeCnt的，不做颜色处理
        return {
          background: '#ffffff',
          color: '#333',
          padding: '1px'
        }
      }
      if (parseFloat(colVal) > 0.00 && parseFloat(colVal) < oneTbale) {
        return {
          background: '#c3dbf5',
          color: '#333',
          padding: '1px'
        }
      } else if (parseFloat(colVal) <= twoTable && parseFloat(colVal) > oneTbale) {
        return {
          background: '#62a2e6',
          color: '#333',
          padding: '1px'
        }
      } else if (parseFloat(colVal) <= threeTable && parseFloat(colVal) > twoTable) {
        return {
          background: '#3386de',
          color: '#ffffff',
          padding: '1px'
        }
      } else if (parseFloat(colVal) <= fourTable && parseFloat(colVal) > threeTable) {
        return {
          background: '#066bd7',
          color: '#ffffff',
          padding: '1px'
        }
      } else if (parseFloat(colVal) <= fiveTable && parseFloat(colVal) > fourTable) {
        return {
          background: '#044c99',
          color: '#ffffff',
          padding: '1px'
        }
      } else {
        return {
          background: '#ffffff',
          color: '#333',
          padding: '1px'
        }
      }
    }