element-ui table 合并单元格

Question

循环渲染多个表格的情况下合并列无效。
代码如下：

    <el-table 
        :data="item" 
        v-for="(item, index) in partApplyData" :key="index"
        style="width: 100%;margin-bottom:10px;" max-height="250" border 
        :span-method="(({row, column, rowIndex, columnIndex})=>{mergeColumn(row, column, rowIndex, columnIndex, index)})">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="c_parts_name" label="配件名称" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="c_parts_type" label="配件类型" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column prop="i_parts_total" label="数量" show-overflow-tooltip sortable>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="small" @click="lookClick(scope.$index, scope.row, 'look')">查看</el-button>
                    <el-button size="small" :disabled="scope.row.i_task_status == 1 && $route.path=='/sheetNetDealing'?false:true" @click="auditClick(scope.$index, scope.row, 'audit')">审核</el-button>
                </template>
            </el-table-column>

        </el-table>
        
 原始数据：
 data: [{
"i_task_id": 22,
"i_task_status": 2,
"informationViews": [{
    "id": 31,
    "i_task_id": 22,
    "i_parts_id": 9,
    "c_parts_name": "X7靠背后盖",
    "i_parts_total": 1,
    "i_sign_status": 0,
    "c_remark": " ",
    "i_task_status": 0,
    "c_order_id": null,
    "c_parts_type": "塑胶",}, {
    "id": 32,
    "i_task_id": 22,
    "i_parts_id": 12,
    "c_parts_name": "X7座架外盖-扫码侧",
    "i_parts_total": 1,
    "i_sign_status": 0,
    "c_remark": " ",
    "i_task_status": 0,
    "c_order_id": null,
    "c_parts_type": "塑胶",
}]}, {
"i_task_id": 23,
"i_task_status": 6,
"informationViews": [{
    "id": 33,
    "i_task_id": 23,
    "i_parts_id": 9,
    "c_parts_name": "X7靠背后盖",
    "i_parts_total": 1,
    "i_sign_status": 1,
    "c_remark": " ",
    "i_task_status": 0,
    "c_order_id": null,
    "c_parts_type": "塑胶",
}]}, {
"i_task_id": 34,
"i_task_status": 1,
"informationViews": [{
    "id": 50,
    "i_task_id": 34,
    "i_parts_id": 5,
    "c_parts_name": "保险丝",
    "i_parts_total": 1,
    "i_sign_status": 0,
    "c_remark": " ",
    "i_task_status": 0,
    "c_order_id": null,
    "c_parts_type": "电子",
}, {
    "id": 51,
    "i_task_id": 34,
    "i_parts_id": 32,
    "c_parts_name": "X7扶手皮套-非扫码侧",
    "i_parts_total": 1,
    "i_sign_status": 0,
    "c_remark": " ",
    "i_task_status": 0,
    "c_order_id": null,
    "c_parts_type": "外套",
}]  }]
        
 处理函数：
 handleData(data) { //处理数据
        let sarr = [];
        this.spanArr = [];
        data.map((item,index) => {
            let arr = [];
            let oarr = item.informationViews;
            if (oarr && oarr.length > 0) {
                for (let i = 0, len = oarr.length; i < len; i++) {
                    let obj = Object.assign({}, oarr[i], {
                        i_task_id: item.i_task_id,
                        i_task_status: item.i_task_status,
                    });
                    arr.push(obj);
                }
            }
            sarr.push(arr);
            this.spanArr.push(this.getSpanArr(arr));
        })
        this.partApplyData = sarr;
    },
    
    mergeColumn( row, column, rowIndex, columnIndex,index ) { //合并列
        if (columnIndex === 6) { 
            const _row = this.spanArr[index][rowIndex]; 
            const _col = _row > 0 ? 1 : 0; 
            return { 
                rowspan: _row,
                colspan: _col 
            } 
        }
    },
    getSpanArr(data) { //合并行
        let arr = [];
        let pos = 0;
        for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                arr.push(1);
                pos = 0
            } else {      // 判断当前元素与上一个元素是否相同   
                if (data[i].i_task_id === data[i - 1].i_task_id) {
                    arr[pos] += 1;
                    arr.push(0);
                } else {
                    arr.push(1);
                    pos = i;
                }
            }
        }
        return arr;
    },
    
    
    实际效果如下：（预期是要合并成一个单元格）

Answer 1

正巧，在刚刚，觉得网上的合并单元格不是不是很好，就自己写了一个。可以给你参考下
我是按照数据里面的id判断合并与否的 你可以参考，改动

// this.propertyList是我设置的一个数组，用来配置那些列需要合并
// 例子propertyList:["title","start_at"]
// 我是用prop的属性名判断的，如有需要你可以换你想要的判断逻辑
arraySpanMethod(data){
        //判断是否是需要合并的属性列否则正常显示 双1
        if(this.propertyList.indexOf(data.column.property) > -1 ){
        // 如果是第一列或者是第一个出现的值则做处理否则不显示 双0
          if(data.rowIndex === 0 || data.row.id !== this.list[data.rowIndex-1].id){
            let rowspan = 1;
            //向下查找相同的需要合并的值的长度个数，如果找到不一样的则跳出循环
            for (let i = data.rowIndex + 1; i < this.list.length ; i ++){
              if(data.row.id === this.list[i].id){
                rowspan ++
              }else{
                break;
              }
            }
            //返回输出合并行数
            return {
              rowspan: rowspan,
              colspan: 1
            };
          }else{
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }else{
          return {
            rowspan: 1,
            colspan: 1
          };
        }
      }