spanRows: [],//需要合併的行
spanMap: [],//從第幾行到第幾行需要合併
//計算需要合併的行號 for (let k = 0; k < that.tableData.length; k++) { //判斷當前圖片類型是否與下一個圖片類型一致,如果一致則當前行單元格需要合併。 if ((k + 1 < that.tableData.length && that.tableData[k].PIC_TYPE == that.tableData[k + 1].PIC_TYPE) || that.tableData[k].PIC_TYPE == that.tableData[k - 1].PIC_TYPE) { that.spanRows.push(k); } } console.log("需要合併的行號", that.spanRows); //從第幾行到第幾行需要合併 let defType = ''; for (let m = 0; m < that.tableData.length; m++) { if (m == 0) { defType = that.tableData[m].PIC_TYPE;//記錄第一個 } if (m + 1 < that.tableData.length) { if (defType == that.tableData[m + 1].PIC_TYPE) { if (that.spanMap.filter(x => x.sign == defType).length == 0) { that.spanMap.push({ sign: defType, startRowIndex: m, rowSpanCount: 2 }); } else { for (let i = 0; i < that.spanMap.length; i++) { if (that.spanMap[i].sign == defType) { that.spanMap[i].rowSpanCount += 1; } } } } else { defType = that.tableData[m + 1].PIC_TYPE;//記錄第m個 } } } console.log("從第幾行到第幾行需要合併", that.spanMap);
控件
<el-table :data="tableData" :span-method="objectSpanMethod">
objectSpanMethod:
//合併第一列 row:當前行。column:當前列。rowIndex:當前行號,0開始。columnIndex:當前列號,0開始。 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //第一列 if (columnIndex === 0) { //是否從此行開始合併 let cur = that.spanMap.filter(function (v) { return v.startRowIndex == rowIndex; }); if (cur && cur.length > 0) { return { rowspan: cur[0].rowSpanCount,//合併的行數 colspan: 1//合併的列數 }; } else { if (that.spanRows.includes(rowIndex)) { //被合併的行,第一列移除掉。返回都是0,就會移除此行的第一列。 return { rowspan: 0, colspan: 0 }; } else { //不需要合併的行,正常輸出第一列。返回1,就是正常輸出,不做任何改變。 return { rowspan: 1, colspan: 1 }; } } } },
ele:https://element.eleme.cn/#/zh-CN/component/table
JS高階函數、JS數組響應式操作、JS判斷數組是否包含某個元素 https://www.cnblogs.com/xsj1989/p/13098537.html