el-table分组后从大到小渲染颜色

Element UI 表格分组渲染颜色策略

最新推荐文章于 2025-10-28 14:37:35 发布

原创

最新推荐文章于 2025-10-28 14:37:35 发布 · 709 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #小程序 #javascript

本文记录了开发中遇到的一个需求：在表格中按数据分组，并从大到小显示颜色。通过创建二维数组，根据指定列属性进行分组、排序，然后利用Element UI表格的方法改变单元格颜色。最终实现效果良好。

记录一下最近开发中遇到的一些问题，需求是将表格中数据分成三组，每一组按照从大到小去渲染颜色，并且最后两行不渲染。
首先，来讲一下我的思路。
1.创建一个二维数组（包含三个一维数组，是按照我所需要分组的列对应的属性名）

2.表格数据嵌套二维数组进行循环把符合的值追加到arr数组中，进行排序

改变单元格颜色（利用的是element-ui的表格中自带的方法）

// 從大到小排序
    sortDownData() {
      let groups = [
        ["F3Total", "F4Total", "F5Total", "F7Total"],
        ["F3FATP", "F4FATP", "F5FATP", "F7FATP"],
        ["F3FR", "F4FR", "F5FR", "F7FR"],
      ];
      const maxIndex = [];
      const midIndex1 = [];
      const midIndex2 = [];
      const minIndex = [];
      function sort_down(a, b) {
        return b.value - a.value;
      }
      this.tabTwoData
        .slice(0, this.tabTwoData.length - 2)
        .forEach((value, index) => {
          for (const group of groups) {
            const arr = [];
            for (const key of group) {
              value[key]
                ? arr.push({
                    value: (value[key] + "").replace("%", ""),
                    key: key,
                    rowIn