Bootstrap

element table 根据属性值合并行

需求:element table 根据属性值合并行

<template>
 <el-table
          ref="multipleTable"
          border
          show-summary
          :span-method="objectSpanMethod"
          :data="tableData"
          style="width: 100%;"
        >
          <el-table-column label="目录" prop="libName" align="center"></el-table-column>
          <el-table-column label="课程" prop="courseName" align="center"></el-table-column>
          <el-table-column label="数量(个)" prop="number" width="180px" align="center"></el-table-column>
          <el-table-column label="容量(M)" align="center" prop="capacity"></el-table-column>
          <el-table-column label="点击率(次)" align="center" prop="ctr"></el-table-column>
          <el-table-column label="下载量(次)" align="center" prop="downloads"></el-table-column>
          <el-table-column label="评星(分)" align="center" prop="score">
            <template slot-scope="scope">
              <el-rate v-model="scope.row.score" disabled text-color="#ff9900"></el-rate>
            </template>
          </el-table-column>
        </el-table>
  </template>
  export default {
  computed: {},
  data() {
    return {
      tableData: [
        {
          libName: "计算机",
          courseName: "软件技术",
          number: 20,
          capacity: 34,
          ctr: 456656,
          downloads: 4343545,
          score: 5
        },
        {
          libName: "计算机",
          courseName: "软件技术",
          number: 20,
          capacity: 34,
          ctr: 456656,
          downloads: 4343545,
          score: 5
        },
        {
          libName: "学前教育",
          courseName: "幼儿心理学",
          number: 20,
          capacity: 334,
          ctr: 456656,
          downloads: 4343545,
          score: 4
        },
        {
          libName: "学前教育",
          courseName: "幼儿心理学",
          number: 20,
          capacity: 334,
          ctr: 456656,
          downloads: 4343545,
          score: 4
        },

        {
          libName: "学前教育",
          price: 223,
          courseName: "学前",
          number: 10,
          capacity: 1000,
          ctr: 456656,
          downloads: 4343545,
          score: 3
        },
         {
          libName: "计算机",
          courseName: "软件技术",
          number: 20,
          capacity: 34,
          ctr: 456656,
          downloads: 4343545,
          score: 5
        },
        {
          libName: "计算机",
          courseName: "软件技术",
          number: 20,
          capacity: 34,
          ctr: 456656,
          downloads: 4343545,
          score: 5
        },
        {
          libName: "设计",
          courseName: "建筑设计",
          number: 200,
          capacity: 349,
          ctr: 456656,
          downloads: 4343545,
          score: 5
        },
        {
          libName: "设计",
          courseName: "服装设计",
          number: 20,
          capacity: 3451,
          ctr: 456656,
          downloads: 4343545,
          score: 4.5
        },
        {
          libName: "机电",
          courseName: "汽修",
          number: 20,
          capacity: 3451,
          ctr: 456656,
          downloads: 4343545,
          score: 4.5
        }
      ],
      // 合并的长度
      colSpanArr: [],
      // 合并开始的位置
      rowIndexArr: []
    };
  },
  mounted() {
    this.getColSpanData("libName", this.tableData);
  },
  methods: {
    //  获取合并行的位置和合并长度
    getColSpanData(prop, data) {
      let colLength = 1;
      data.forEach((element, index) => {
        if (index == 0) {
        // rowIndex开始合并的位置为0,合并单元格数量默认为1
          this.rowIndexArr.push(0);
          colLength = 1;
        } else {
     
          if (element[prop] == data[index - 1][prop]) {
             // 当相邻两条数据相等时,rowspan+1,即colLength+1
            colLength += 1;
           // 当最后一条数据与倒数第2条不等式,在colSpanArr中push(1)
            if (index == data.length - 1) {
              this.colSpanArr.push(colLength);
            }
          } else {
        //  相邻两条不等时push index和合并的长度
            this.colSpanArr.push(colLength);
            this.rowIndexArr.push(index);
            if (index == data.length - 1) {
              this.colSpanArr.push(1);
            }
            colLength = 1;
          }
        }
      });
      this.rowIndexArr.push(data.length);
        console.log(this.rowIndexArr,this.colSpanArr)
      //  结果分别是:
      //this.rowIndexArr:[0, 2, 5, 7, 9,10]
      //this.colSpanArr:[2, 3, 2, 2, 1]
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.colSpanArr.length; i++) {
        //如果rowIndex和this.rowIndexArr[i]相等则开始合并,合并数量对应为this.colSpanArr[i]
          if (rowIndex === this.rowIndexArr[i]) {
            return {
              rowspan: this.colSpanArr[i],
              colspan: 1
            };
          } else {
            if (
              rowIndex > this.rowIndexArr[i] &&
              rowIndex < this.rowIndexArr[i + 1]
            ) {
              return {
              //被合并行则返回rowspan: 0, colspan: 0,
              //这里被合并行为1,3,4,6,8          
                rowspan: 0,
                colspan: 0
              };
            }
          }
        }
      }
    },
      // 上面方法的结果等同于下面这种写法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {        
        if (rowIndex == 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex == 2) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else if (rowIndex == 5) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex == 7) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex == 9) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
  }
};

结果如下图所示:在这里插入图片描述

;