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, }, ],