Element-ui table merge cells - Codes Helper - Programming Question Answer

Element-ui table merge cells

the merging of multiple tables is not valid in the case of circular rendering. The
code is as follows:

    <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; iPP) {
                    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; iPP) {
            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;
    },
    
    
    :

// 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 PP){ if(data.row.id === this.list[i].id){ rowspan PP }else{ break; } } // return { rowspan: rowspan, colspan: 1 }; }else{ return { rowspan: 0, colspan: 0 }; } }else{ return { rowspan: 1, colspan: 1 }; } }