直接复制到文件中，看看就能明白怎么用

原文地址：

https://blog.csdn.net/qq_14993591/article/details/124048897

<template>
   <el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        style="width: 100%;text-align:center;border:1px solid #d9d9d9"
        :cell-style="{background:'#ffffff'}"
        :header-cell-style="{
          background: '#ffffff',
          color: '#333',
          fontSize: '13px',
          'text-align': 'center'
        }"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{scope.$index+(pageIndex - 1) * pageSize + 1}}</template>
        </el-table-column>
        <el-table-column prop="APTITUDEKINDNAME" label="资质类别" width="150"></el-table-column>
        <el-table-column prop="CertID" label="资质证书编号" width="200"></el-table-column>
        <el-table-column prop="Zzmark" label="资质名称" width="250"></el-table-column>
        <el-table-column prop="OrganDate" label="发证日期" width="130"></el-table-column>
        <el-table-column prop="EndDate" label="	发证有效期" width="130"></el-table-column>
        <el-table-column prop="OrganName" label="	发证机关" width="178"></el-table-column>
        <el-table-column label="预览" prop="MOVE" width="110">
          <template slot-scope="scope">
            <span
              @click="certInfo(scope.row.CertID,_self.type)"
              style="color:#ff6600;cursor: pointer;"
            >证书信息</span>
          </template>
        </el-table-column>
      </el-table>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return{
      tableData: [
        {"APTITUDEKINDNAME":"安全生产许可","CertID":"（浙）JZ安许证字[2014]021262","OrganName":"浙江省住房和城乡建设厅","UnitMan":"王浩明","OrganDate":"2014年10月13日","EndDate":"2023年09月23日","Zzmark":"","TechManDuty":"","TechMan":"王晓勤"},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"电子与智能化工程专业承包贰级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"建筑装修装饰工程专业承包贰级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑机电安装工程专业承包叁级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"市政公用工程施工总承包叁级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑工程施工总承包叁级","TechManDuty":"","TechMan":null}
      ], 
       spanArr:[],
      contentSpanArr:[],
      contentSpanArr_3:[],
      contentSpanArr_4:[],
      contentSpanArr_5:[],
      contentSpanArr_6:[],
      contentSpanArr_7:[],
    }
  },
  mounted () {
    this.tableDatas();//目前数据默认是写死，所以直接执行该方法。项目中通过后台数据调用成功后，在表格渲染后执行该方法
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log( row, column, rowIndex, columnIndex)
        console.log(this.spanArr)
      if (columnIndex === 1) {
        //合并资质类别
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        //合并资质证书号
        const _row = this.contentSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    //   if (columnIndex === 3) {
    //     //合并资质名称
    //     const _row = this.contentSpanArr_3[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 4) {
    //     //发证日期
    //     const _row = this.contentSpanArr_4[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 5) {
    //     //发证有效期
    //     const _row = this.contentSpanArr_5[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 6) {
    //     //发证机关
    //     const _row = this.contentSpanArr_6[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 7) {
    //     //预览
    //     const _row = this.contentSpanArr_7[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    },
    // 表格合并方法
    tableDatas() {
      let contactDot = 0;
      let contactDot_1 = 0;
    //   let contactDot_2 = 0;
    //   let contactDot_3 = 0;
    //   let contactDot_4 = 0;
    //   let contactDot_5 = 0;
      let contactDot_6 = 0;
      this.spanArr = [];
      this.contentSpanArr = [];
    //   this.contentSpanArr_3 = [];
    //   this.contentSpanArr_4 = [];
    //   this.contentSpanArr_5 = [];
    //   this.contentSpanArr_6 = [];
      this.contentSpanArr_7 = [];
    //   this.APTITUDENAME = [];
      this.tableData.forEach((item, index) => {
          console.log(item)
        item.index = index;
        if (index === 0) {
          this.spanArr.push(1);
          this.contentSpanArr.push(1);
        //   this.contentSpanArr_3.push(1);
        //   this.contentSpanArr_4.push(1);
        //   this.contentSpanArr_5.push(1);
        //   this.contentSpanArr_6.push(1);
          this.contentSpanArr_7.push(1);
        } else {
          // 判断第二列
          if (
            item.APTITUDEKINDNAME === this.tableData[index - 1].APTITUDEKINDNAME
          ) {
            this.spanArr[contactDot] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            contactDot = index;
          }
          //判断第三列
          if (item.CertID === this.tableData[index - 1].CertID) {
            this.contentSpanArr[contactDot_1] += 1;
            this.contentSpanArr.push(0);
            this.contentSpanArr_7[contactDot_6] += 1;
            this.contentSpanArr_7.push(0);
          }
           else {
            this.contentSpanArr.push(1);
            contactDot_1 = index;
            this.contentSpanArr_7.push(1);
            contactDot_6 = index;
          }
        //   //资质证书编号
        //   if (item.Zzmark === this.tableData[index - 1].Zzmark) {
        //     this.contentSpanArr_3[contactDot_2] += 1;
        //     this.contentSpanArr_3.push(0);
        //   } else {
        //     this.contentSpanArr_3.push(1);
        //     contactDot_2 = index;
        //   }
        //   //发证日期
        //   if (item.OrganDate === this.tableData[index - 1].OrganDate) {
        //     this.contentSpanArr_4[contactDot_3] += 1;
        //     this.contentSpanArr_4.push(0);
        //   } else {
        //     this.contentSpanArr_4.push(1);
        //     contactDot_3 = index;
        //   }
        //   //发证有效期
        //   if (item.EndDate === this.tableData[index - 1].EndDate) {
        //     this.contentSpanArr_5[contactDot_4] += 1;
        //     this.contentSpanArr_5.push(0);
        //   } else {
        //     this.contentSpanArr_5.push(1);
        //     contactDot_4 = index;
        //   }
        //   //发证机关
        //   if (item.OrganName === this.tableData[index - 1].OrganName) {
        //     this.contentSpanArr_6[contactDot_5] += 1;
        //     this.contentSpanArr_6.push(0);
        //   } else {
        //     this.contentSpanArr_6.push(1);
        //     contactDot_5 = index;
        //   }
        }
      });
    },
  }
}
</script>
<style scoped>

</style>