element表格合并列数据相同合并单元格

news2024/12/22 20:58:24

在这里插入图片描述

 <!-- :span-method="objectSpanMethod"合并列 -->
  <el-table stripe  :data="morningdataList" style="width: 100%" :span-method="objectSpanMethod" >
          <el-table-column align="center" label="" :show-overflow-tooltip="true" prop="bigCategoryName" ></el-table-column>
          <el-table-column align="center" label="" :show-overflow-tooltip="true" prop="smallCategoryName"  width="70px" ></el-table-column>
          <el-table-column align="center" label="本日"  prop="today"  width="70px"></el-table-column>
          <el-table-column align="center" label="比率/出率" prop="rate"  width="90px"></el-table-column>
          <el-table-column align="center" label="月累计" prop="monthTotal" width="70px"></el-table-column>
          <el-table-column align="center" label="月比率/出率" prop="monthRate"  width="90px"></el-table-column>
  </el-table>

// 合并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    let that = this;
    // 因为日期在第一项，从0开始判断columnIndex === 0合并第一列
    if (columnIndex === 0) {
        // 当前行值及日期值为：bigCategoryName
        let idName = that.morningdataList[rowIndex].bigCategoryName;
        // rowIndex是行索引，判定第二行是不是和前面一行的日期值相同
        if (rowIndex > 0) {
        if (that.morningdataList[rowIndex].bigCategoryName != that.morningdataList[rowIndex - 1].bigCategoryName) {
            let i = rowIndex;
            let num = 0;
            // 遍历
            while (i < that.morningdataList.length) { 
            if (that.morningdataList[i].bigCategoryName === idName) {
                i++;
                num++;
            } else {
                i = that.morningdataList.length;
            }
            }
            return {
            // 这里返回的num就是有相同的行数
            rowspan: num,
            // 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
            colspan: 1,
            }
        } else {
            return {
            rowspan: 0,
            colspan: 1,
            }
        }
        } else {
        let i = rowIndex;
        let num = 0;
        while (i < that.morningdataList.length) {
            if (that.morningdataList[i].bigCategoryName === idName) {
            i++;
            num++;
            } else {
            i = that.morningdataList.length;
            }
        }
        return {
            rowspan: num,
            colspan: 1,
        }
        }
    }
},