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

最新推荐文章于 2024-01-23 15:20:36 发布

小啊慧

最新推荐文章于 2024-01-23 15:20:36 发布

阅读量632

点赞数

分类专栏： element-ui 文章标签： html5 小程序 javascript

本文链接：https://blog.csdn.net/z_qianzhi/article/details/120087084

版权

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

摘要由CSDN通过智能技术生成

记录一下最近开发中遇到的一些问题，需求是将表格中数据分成三组，每一组按照从大到小去渲染颜色，并且最后两行不渲染。
首先，来讲一下我的思路。
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 = [];
            f