項(xiàng)目需求:第二列的內(nèi)容如果相同,則合并單元格,并且序號(hào)也合并:

?實(shí)現(xiàn)方法:

1.rowspan()方法在獲取數(shù)據(jù)之后調(diào)用

rowspan() {this.spanArr = [];//在data里面定義 this.position = 0; //在data里面定義this.tableData1.forEach((item,index) => {if( index === 0){this.spanArr.push(1);this.position = 0;item.sequence=index+1;//設(shè)置序號(hào)}else{if(this.tableData1[index].projectName === this.tableData1[index-1].projectName ){this.spanArr[this.position] += 1;//連續(xù)有幾行項(xiàng)目名名稱相同this.spanArr.push(0); // 名稱相同后往數(shù)組里面加一項(xiàng)0console.log(this.spanArr)//當(dāng)項(xiàng)目名稱相同時(shí)，設(shè)置當(dāng)前序號(hào)和前一個(gè)相同this.tableData1[index].sequence = this.tableData1[index-1].sequence;}else{this.spanArr.push(1);this.position = index;//當(dāng)項(xiàng)目名稱不同時(shí)，將當(dāng)前序號(hào)設(shè)置為前一個(gè)序號(hào)+1this.tableData1[index].sequence = this.tableData1[index-1].sequence+1;}}})},objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行if(columnIndex === 0){ //序號(hào)列也進(jìn)行合并(第一列)//this.spanArr這個(gè)數(shù)組里面存的是table里面連續(xù)的有幾條數(shù)據(jù)相同//例如:[1,1,2,0,2,0]//1 代表的沒(méi)有連續(xù)的相同的//2 代表連續(xù)的兩個(gè)相同//0 代表是和上一條內(nèi)容相同const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;console.log("ppp")console.log(_row)console.log(_col)return {rowspan: _row, //行colspan: _col //列 }}if(columnIndex === 1){ //項(xiàng)目列也進(jìn)行合并(第二列)const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;return {rowspan: _row,colspan: _col}}},

?

轉(zhuǎn)載于:https://www.cnblogs.com/xieli26/p/10161843.html

總結(jié)

以上是生活随笔為你收集整理的element-ui table表格内容相同自动合并的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。