element ui --- el-table 根據相鄰行屬性值是否相同合並單元格

一般合並單元格可根據行和列指定合並便可，這篇講的是 如果表格里有名字或者id或者code相同時進行合並。代碼如下：

 // 合並單元格
        handleTableArr(data){
            this.spanArr = [];
            let contactDot = 0;
            data.forEach((item,index) => {
                item.index = index;
                if(index === 0){
                    this.spanArr.push(1);
                }else{
                    if(item.groupCode === data[index - 1].groupCode){
                        this.spanArr[contactDot] +=1;
                        this.spanArr.push(0);
                    }else{
                        this.spanArr.push(1);
                        contactDot = index;
                    }
                }
            });
            return data;
        },
          //計算合並表格
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if(columnIndex === 0){
                const _row = this.spanArr[rowIndex];
                const _col = _row>0?1:0;
                return{
                    rowspan:_row,
                    colspan:_col           
                }
            }
            
        }

 <el-table 
     class="cardProList"
     :span-method="objectSpanMethod"
     :data="cardInfo.rights"
     :header-cell-style="{background:'rgba(251, 251, 252, 1)'}">
     <el-table-column prop="groupCode" label="套餐" align="center">
         <template slot-scope="scope">
            <span v-if="scope.row.isNum">套餐{{scope.row.groupCode}}</span>
            <span v-else>{{scope.row.groupCode}}</span>
         </template>
     </el-table-column>
</el-table>

:span-method="objectSpanMethod" 調用合並方法。

handleTableArr直接對后台返回的數組進行操作就行

多列單元格合並代碼示例：

// 合並單元格
        handleTableArr(data){
            this.spanArr = [];
            this.twoArr = [];
            let contactDot = 0;
            let concatTwo = 0;
            let i = 1;
            data.forEach((item,index) => {
                item.index = index;
                if(index === 0){
                    item.sort = i;
                    this.spanArr.push(1);
                    this.twoArr.push(1);
                }else{
                    if(item.surveyId === data[index - 1].surveyId){
                        item.sort = i;
                        this.spanArr[contactDot] +=1;
                        this.spanArr.push(0);
                    }else{
                        item.sort = ++i;
                        this.spanArr.push(1);
                        contactDot = index;
                    }
                    if( item.surveyId === data[index - 1].surveyId && item.questionId === data[index - 1].questionId){
                        this.twoArr[concatTwo] += 1;
                        this.twoArr.push(0)
                    }else{
                        this.twoArr.push(1);
                        concatTwo = index;
                    }
                }
            });
            console.log(data)
            return data;
        },
          //計算合並表格
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            let i = 1;
            if(columnIndex === 0){
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                if(this.spanArr[rowIndex] > 0){
                    this.$set(row,'rowId',this.spanArr[rowIndex]);
                }else{
                    this.$set(row,'rowId',0);
                }
                return{
                    rowspan:_row,
                    colspan:_col           
                }
            }
            if(columnIndex === 1 || columnIndex === 4 || columnIndex === 5){
                const _row = this.twoArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return{
                    rowspan:_row,
                    colspan:_col           
                }
            }
        },

多列表格內部合並數據格式示例

list:[
                {
                    surveyId: 1,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 11,
                    questionName: '是否有歸屬感',
                    optionContent: 'A有',
                    voteSum: 100,
                },
                {
                    surveyId: 1,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 11,
                    questionName: '是否有歸屬感',
                    optionContent: 'B無',
                    voteSum: 100,
                },
                {
                    surveyId: 1,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 22,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'A是的',
                    voteSum: 100,
                },
                {
                    surveyId: 1,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 22,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
                {
                    surveyId: 2,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 55,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
                {
                    surveyId: 2,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 66,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
                {
                    surveyId: 2,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 66,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
                {
                    surveyId: 3,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 66,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
                {
                    surveyId: 3,
                    surveyName: '滿意度調查',
                    startTime: '2022-01-20',
                    endTime: '2022-02-20',
                    questionId: 66,
                    questionName: '是否繼續在公司發展',
                    optionContent: 'B考慮',
                    voteSum: 100,
                },
            ],