elementui表格的单元格合并

csdn同步更新，请移步：https://blog.csdn.net/qq_42358798/article/details/108269431

• 要求
  将pid相同的数据合并成同一个单元格
• 思路
  将后台的数据进行处理，需要合并的数据按照序号生成数组。
  例如：[[0,1,2],[3],[4,5]]代表012序号合并成一个单元格，3合并成一个单元格，45合并成一个单元格。
• 代码
  后台返回表格数据

  //获取科室
    getHospitalDepartments() {
      this.loading = true;
      hospitalDepartments({ id: this.hospitalId }).then(res => {
        if (res.code === 20000) {
          this.loading = false;
          this.tableData = res.data;//表格绑定的数组
          //将后台的数据处理成数组形式,例如：[[0,1,2],[3],[4,5]]
          this.spanArr=this.spanCellArr(this.tableData);
        }
      });
    }

  将后台返回数据处理成数组

  //将后台的数据处理成数组形式，返回值为[[0,1,2],[3],[4,5]]
    spanCellArr(list) {
      const newArr = [];
      const idArr = [];
      for (var i = 0; i < list.length; i++) {
        if (idArr.indexOf(list[i].pid) == -1) {
          newArr.push([]);
          newArr[newArr.length - 1].push(i);
          idArr.push(list[i].pid);
        } else {
          newArr[idArr.indexOf(list[i].pid)].push(i);
        }
      }
      return newArr;
    }

  绑定单元格合并的方法:span-method=“objectSpanMethod”

  <el-table
  :data="tableData"
  border
  style="width: 100%"
  :span-method="objectSpanMethod"
  :cell-style="setCellStyle"
  @cell-click="handleCellClick"
  v-loading="loading"
  >

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //this.spanArr为[[0,1,2],[3],[4,5]]
      if (columnIndex === 0||columnIndex === 4) {
        for (let i = 0; i < this.spanArr.length; i++) {
          if (rowIndex == this.spanArr[i][0]) {
            return {
              rowspan: this.spanArr[i].length,
              colspan: 1
             };
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }

  以上就是element-ui表格单元格合并的方法