el-table合并单元格

<el-table
  :data="buildingData"
  :span-method="buildingSpanMethod"
  border
  style="width: 100%"
>
  <el-table-column prop="stageName" label="分期"> </el-table-column>
  <el-table-column prop="alias" label="分期别名"> </el-table-column>
  <el-table-column prop="prostage" label="分期阶段"> </el-table-column>
  <el-table-column prop="higherBusinessType" label="一级业态">
  </el-table-column>
  <el-table-column prop="businessType" label="二级业态">
  </el-table-column>
  <el-table-column prop="buildings" label="楼栋"> </el-table-column>
  <el-table-column prop="jzzdmj" label="建筑占地面积"> </el-table-column>
  <el-table-column prop="zjrmj" label="计容面积"> </el-table-column>
  <el-table-column prop="zksmj" label="可售面积"> </el-table-column>
  <el-table-column prop="zjzmj" label="总建筑面积"> </el-table-column>
</el-table>

data() {
  return {
    spanStageArr:[],
    stagePos:'',
    spanBuildingArr:[],
    buildingPos:''
  };
},

props: {
  buildingData: {
    type: Array
  },
  stageData: {
    type: Array
  }
},

methods: {
  getSpanArr(data,temp,pos) {
    // data就是我们从后台拿到的数据
    for (var i = 0; i < data.length; i++) {
      if (i === 0) {
        temp.push(1);
        pos = 0;
      } else {
        // 判断当前元素与上一个元素是否相同
        if (data[i].stageName === data[i - 1].stageName) {
          temp[pos] += 1;
          temp.push(0);
        } else {
          temp.push(1);
          pos = i;
        }
      }
      console.log(temp);
    }
  },
  stageSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex != 3 && columnIndex != 4) {
      const _row = this.spanStageArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col
      };
    }
  },
  buildingSpanMethod ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex != 3 && columnIndex != 4) {
      const _row = this.spanBuildingArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
        // [0,0] 表示这一行不显示， [2,1]表示行的合并数
        rowspan: _row,
        colspan: _col
      };
    }
  }
},

mounted() {
  this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
  this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
},
watch:{
  'buildingData': function() {
    this.spanBuildingArr = [];
    this.buildingPos = ''
    this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
  },
  stageData: function() {
    this.spanStageArr = [];
    this.stagePos = '';
    this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
  }
}

标签：el,temp,单元格,buildingData,columnIndex,table,getSpanArr,data,row
来源： https://www.cnblogs.com/tw6668/p/14301186.html