直接復制到文件中，看看就能明白怎么用

原文地址：

https://blog.csdn.net/qq_14993591/article/details/124048897

<template><el-table:data="tableData"border:span-method="objectSpanMethod"style="width: 100%;text-align:center;border:1px solid #d9d9d9":cell-style="{background:'#ffffff'}":header-cell-style="{background: '#ffffff',color: '#333',fontSize: '13px','text-align': 'center'}"><el-table-column label="序號" width="50"><template slot-scope="scope">{{scope.$index+(pageIndex - 1) * pageSize + 1}}</template></el-table-column><el-table-column prop="APTITUDEKINDNAME" label="資質類別" width="150"></el-table-column><el-table-column prop="CertID" label="資質證書編號" width="200"></el-table-column><el-table-column prop="Zzmark" label="資質名稱" width="250"></el-table-column><el-table-column prop="OrganDate" label="發證日期" width="130"></el-table-column><el-table-column prop="EndDate" label=" 發證有效期" width="130"></el-table-column><el-table-column prop="OrganName" label=" 發證機關" width="178"></el-table-column><el-table-column label="預覽" prop="MOVE" width="110"><template slot-scope="scope"><span@click="certInfo(scope.row.CertID,_self.type)"style="color:#ff6600;cursor: pointer;">證書信息</span></template></el-table-column></el-table> </template><script> export default {name: 'demo',data () {return{tableData: [{"APTITUDEKINDNAME":"安全生產許可","CertID":"（浙）JZ安許證字[2014]021262","OrganName":"浙江省住房和城鄉建設廳","UnitMan":"王浩明","OrganDate":"2014年10月13日","EndDate":"2023年09月23日","Zzmark":"","TechManDuty":"","TechMan":"王曉勤"},{"APTITUDEKINDNAME":"建筑業","CertID":"D233020828","OrganName":"浙江省建設廳","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"電子與智能化工程專業承包貳級","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑業","CertID":"D233020828","OrganName":"浙江省建設廳","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"建筑裝修裝飾工程專業承包貳級","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑業","CertID":"D333011719","OrganName":"寧波市住房和城鄉建設委員會","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑機電安裝工程專業承包叁級","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑業","CertID":"D333011719","OrganName":"寧波市住房和城鄉建設委員會","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"市政公用工程施工總承包叁級","TechManDuty":"","TechMan":null},{"APTITUDEKINDNAME":"建筑業","CertID":"D333011719","OrganName":"寧波市住房和城鄉建設委員會","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑工程施工總承包叁級","TechManDuty":"","TechMan":null}], spanArr:[],contentSpanArr:[],contentSpanArr_3:[],contentSpanArr_4:[],contentSpanArr_5:[],contentSpanArr_6:[],contentSpanArr_7:[],}},mounted () {this.tableDatas();//目前數據默認是寫死，所以直接執行該方法。項目中通過后臺數據調用成功后，在表格渲染后執行該方法},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {console.log( row, column, rowIndex, columnIndex)console.log(this.spanArr)if (columnIndex === 1) {//合并資質類別const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 2) {//合并資質證書號const _row = this.contentSpanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}// if (columnIndex === 3) {// //合并資質名稱// const _row = this.contentSpanArr_3[rowIndex];// const _col = _row > 0 ? 1 : 0;// return {// rowspan: _row,// colspan: _col// };// }// if (columnIndex === 4) {// //發證日期// const _row = this.contentSpanArr_4[rowIndex];// const _col = _row > 0 ? 1 : 0;// return {// rowspan: _row,// colspan: _col// };// }// if (columnIndex === 5) {// //發證有效期// const _row = this.contentSpanArr_5[rowIndex];// const _col = _row > 0 ? 1 : 0;// return {// rowspan: _row,// colspan: _col// };// }// if (columnIndex === 6) {// //發證機關// const _row = this.contentSpanArr_6[rowIndex];// const _col = _row > 0 ? 1 : 0;// return {// rowspan: _row,// colspan: _col// };// }// if (columnIndex === 7) {// //預覽// const _row = this.contentSpanArr_7[rowIndex];// const _col = _row > 0 ? 1 : 0;// return {// rowspan: _row,// colspan: _col// };// }},// 表格合并方法tableDatas() {let contactDot = 0;let contactDot_1 = 0;// let contactDot_2 = 0;// let contactDot_3 = 0;// let contactDot_4 = 0;// let contactDot_5 = 0;let contactDot_6 = 0;this.spanArr = [];this.contentSpanArr = [];// this.contentSpanArr_3 = [];// this.contentSpanArr_4 = [];// this.contentSpanArr_5 = [];// this.contentSpanArr_6 = [];this.contentSpanArr_7 = [];// this.APTITUDENAME = [];this.tableData.forEach((item, index) => {console.log(item)item.index = index;if (index === 0) {this.spanArr.push(1);this.contentSpanArr.push(1);// this.contentSpanArr_3.push(1);// this.contentSpanArr_4.push(1);// this.contentSpanArr_5.push(1);// this.contentSpanArr_6.push(1);this.contentSpanArr_7.push(1);} else {// 判斷第二列if (item.APTITUDEKINDNAME === this.tableData[index - 1].APTITUDEKINDNAME) {this.spanArr[contactDot] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);contactDot = index;}//判斷第三列if (item.CertID === this.tableData[index - 1].CertID) {this.contentSpanArr[contactDot_1] += 1;this.contentSpanArr.push(0);this.contentSpanArr_7[contactDot_6] += 1;this.contentSpanArr_7.push(0);}else {this.contentSpanArr.push(1);contactDot_1 = index;this.contentSpanArr_7.push(1);contactDot_6 = index;}// //資質證書編號// if (item.Zzmark === this.tableData[index - 1].Zzmark) {// this.contentSpanArr_3[contactDot_2] += 1;// this.contentSpanArr_3.push(0);// } else {// this.contentSpanArr_3.push(1);// contactDot_2 = index;// }// //發證日期// if (item.OrganDate === this.tableData[index - 1].OrganDate) {// this.contentSpanArr_4[contactDot_3] += 1;// this.contentSpanArr_4.push(0);// } else {// this.contentSpanArr_4.push(1);// contactDot_3 = index;// }// //發證有效期// if (item.EndDate === this.tableData[index - 1].EndDate) {// this.contentSpanArr_5[contactDot_4] += 1;// this.contentSpanArr_5.push(0);// } else {// this.contentSpanArr_5.push(1);// contactDot_4 = index;// }// //發證機關// if (item.OrganName === this.tableData[index - 1].OrganName) {// this.contentSpanArr_6[contactDot_5] += 1;// this.contentSpanArr_6.push(0);// } else {// this.contentSpanArr_6.push(1);// contactDot_5 = index;// }}});},} } </script> <style scoped></style>

總結

以上是生活随笔為你收集整理的elementUI表格----合并单元格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。