element ui 表格有相同的数据时如何合并单元格

1、做项目遇到了element ui 表格需要根据数据是否一致合并显示表格的需求。结合element ui 里面的table的:span-method=""来实现

2、这个必须用到:span-method="" 来实现单元格的合并

上代码

//
    objectSpanMethod(obj) {
      if (
        obj.columnIndex === 0 ||
        obj.columnIndex === 1 ||
        obj.columnIndex === 2 ||
        obj.columnIndex === 3 ||
        obj.columnIndex === 4 ||
        obj.columnIndex === 5 ||
        obj.columnIndex === 6 ||
        obj.columnIndex === 7 ||
        obj.columnIndex === 8
      ) {
        // 二维数组存储的数据 取出
        var _row = this.spanArr[obj.rowIndex];
        var _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      } else {
        return false;
      }
    },

    getSpanArr(orderList) {//传入你的列表数据
      this.pos = 0;
      orderList.forEach((item, index) => {
        //判断是否是第一项
        if (index === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          //不是第一项时，就根据标识去存储
          if (//orderSn，createdAt...是你的第一个数据、第二个数据...
            orderList[index].orderSn === orderList[index - 1].orderSn &&
            orderList[index].createdAt === orderList[index - 1].createdAt &&
            orderList[index].doctorId === orderList[index - 1].doctorId &&
            orderList[index].doctorName === orderList[index - 1].doctorName &&
            orderList[index].totalAmountToYuan === orderList[index - 1].totalAmountToYuan && 
            orderList[index].realPayToYuan === orderList[index - 1].realPayToYuan &&
            orderList[index].promotionAmountToYuan === orderList[index - 1].promotionAmountToYuan &&
            orderList[index].payStatus === orderList[index - 1].payStatus &&
            orderList[index].channelTradeSn === orderList[index - 1].channelTradeSn
          ) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1);
            this.pos = index;
          }
        }
      });
    },

3、 下面是数据的调用

  created() {
      this.getList()//在此处调用
  },
  methods: {
    //数据获取
    getList() {
      getFinanceList(this.listData).then((orderRes) => {
        this.totalCount = orderRes.totalCount;
        this.tableData = orderRes.list;
        //此处为数据调用，合并单元格
        this.getSpanArr(this.tableData);
      });
      //每次重新调用数据要把之前的清空不然会出现数据错乱
      this.spanArr = [];
      this.pos = 0;
    },
  }

4、如果后台给你的数据是树形结构数据你需要把children遍历成和父元素同级别 

 getList() {
      getFinanceList(this.listData).then((orderRes) => {
        this.totalCount = orderRes.totalCount;
        this.tableData = this.formatArr(orderRes.list);
        //此处为数据调用，合并单元格
        this.getSpanArr(this.tableData);
      });
      this.spanArr = [];
      this.pos = 0;
    },
    //数据转换
    formatArr(oredrArr) {
      const newOredrArr = [];
      oredrArr.forEach((item) => {
        item.financeOrders.forEach((val) => {
          newOredrArr.push({ ...item, ...val });
        });
      });
      return newOredrArr;
    },

objectSpanMethod里面的
obj.columnIndex代表需要合并的第几行，这里我是，第1,2,3...8,9，下标从0开始所以是0,1,2...7,8
getSpanArr这个方法是对数据进行遍历，判断是否进行合并

5、最后的效果就是这样的

本文转载于：https://blog.csdn.net/weixin_39086969/article/details/115126872