elementui table合并单元格

数据

mergerow:0,
      col:0,
      detailDataList:[
        {
        ad_master: '广告主1',
        ad_img: '广告图1',
        ad_sum: 1,
        active_status: '投放情况1',
        cover_sum: '覆盖人数1',
        budget: '预算1',
        country: '覆盖地区1',
        age: '受众年龄1',
        sex: '受众性别1',
        day: '投放天数1',
      }, {
          ad_master: '广告主1',
          ad_img: '广告图1',
          ad_sum: 1,
          active_status: '投放情况1',
          cover_sum: '覆盖人数1',
          budget: '预算1',
          country: '覆盖地区1',
          age: '受众年龄1',
          sex: '受众性别1',
          day: '投放天数1',
        },
        {
          ad_master: '广告主1',
          ad_img: '广告图1',
          ad_sum: 1,
          active_status: '投放情况1',
          cover_sum: '覆盖人数1',
          budget: '预算1',
          country: '覆盖地区1',
          age: '受众年龄1',
          sex: '受众性别1',
          day: '投放天数1',
        },
        {
          ad_master: '广告主3',
          ad_img: '广告图3',
          ad_sum: 1,
          active_status: '投放情况3',
          cover_sum: '覆盖人数3',
          budget: '预算3',
          country: '覆盖地区3',
          age: '受众年龄3',
          sex: '受众性别3',
          day: '投放天数3',
        }
      ],

函数

 //合并单元
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // columnIndex 判断你要合并的列是哪几个
      if ((columnIndex === 0 || columnIndex === 2 )&&rowIndex<this.detailDataList.length-1) {
        if ( this.col==2){
          if (this.mergerow>2){
            // 2个列除2
            this.mergerow=this.mergerow-1;

            return {
              rowspan: 0,
              colspan: 0,
            };
          }else {
            this.col=0
          }
        }
        // 如果是第一列（广告主）且当前行的广告主和上一行的广告主相同，则合并
        if (columnIndex === 0&& rowIndex >= 0 ) {
          let count=1;
          for (let i = rowIndex+1; i <this.detailDataList.length ; i++) {
              if (this.detailDataList[i].ad_master==row.ad_master){
                count++
              }
          }
          this.mergerow=count
          this.col=this.col+1

          return {
            rowspan: count,
            colspan: 1,
          };
        // 第二行合并
        }else if (columnIndex === 2&&rowIndex >= 0 ){
          let count=1;
          for (let i = rowIndex+1; i <this.detailDataList.length ; i++) {
            if (this.detailDataList[i].ad_master==row.ad_master){
              count++
            }
          }
          this.mergerow+=count
          this.col=this.col+1
          return {
            rowspan: count,
            colspan: 1,
          };
        }

      }
    },

前端

 <el-table
        :data="detailDataList"
        border
        tooltip-effect="dark"
        style="width:100%;margin-top: 10px"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="ad_master" label="广告主" min-width="90"></el-table-column>
        <el-table-column prop="ad_img" label="广告图/视频" min-width="90">
          <template slot-scope="scope">
            {{scope.row.countryName}}
          </template>
        </el-table-column>
        <el-table-column prop="ad_sum" label="扩组情况" min-width="90"></el-table-column>
        <el-table-column prop="active_status" label="投放情况" min-width="90"></el-table-column>
        <el-table-column prop="cover_sum" label="覆盖人数" min-width="90">

        </el-table-column>
        <el-table-column prop="budget" label="预算" min-width="90">

        </el-table-column>
        <el-table-column prop="country" label="覆盖地区" min-width="90">


        </el-table-column>
        <el-table-column prop="age" label="受众年龄" min-width="90"></el-table-column>
        <el-table-column prop="sex" label="受众性别" min-width="90"></el-table-column>
        <el-table-column prop="day" label="投放天数" min-width="90"></el-table-column>
        <el-table-column  label="操作" min-width="140">
          <template slot-scope="scope">

            <el-link :underline="false"   type="primary"  @click="search(scope.row)" ><i class="el-icon-picture"></i> 以图搜图</el-link><br>
            <el-link :underline="false"   type="primary"  @click="toGoodPool(scope.row)" ><i class="el-icon-circle-plus"></i> 加入评估池</el-link>
          </template>
        </el-table-column>
      </el-table>