使用Element的table合併單元格(按相同項) 多列
阿新 • • 發佈:2021-11-08
效果圖:
程式碼:
<div class="table"> <el-table ref="table_8" :data="saCountAvg" border style="width: 99%;" :height=winHeight :header-cell-style="tableHeaderColor" :cell-style="cellStyle" :span-method="objectSpanMethod8"> <el-table-column prop="name" label="SA" align="center"></el-table-column> <el-table-column prop="getTime" label="產值達均值線以上次數" align="center"></el-table-column> <el-table-column prop="timeIndex" label="月份" align="center"></el-table-column> <el-table-column prop="monthlyIntervalValue" label="月度產值" align="center"></el-table-column> <el-table-column prop="avgValue" label="月度均值" align="center"></el-table-column> </el-table> </div>
methods: { tableHeaderColor({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0) { return "color: #4f81bd;font-weight: bold ;"; } }, objectSpanMethod8({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = (this.flitterData(this.saCountAvg ).one)[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } if (columnIndex === 1) { const _row = (this.flitterData(this.saCountAvg ).two)[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } }, flitterData(arr) { let spanOneArr = [], spanTwoArr = [], concatOne = 0, concatTwo = 0; arr.forEach((item, index) => { if (index === 0) { spanOneArr.push(1); spanTwoArr.push(1); } else { if (item.userId === arr[index - 1].userId) { //第一列需合併相同內容的判斷條件 spanOneArr[concatOne] += 1; spanOneArr.push(0); } else { spanOneArr.push(1); concatOne = index; } if (item.getTime === arr[index - 1].getTime && item.userId === arr[index - 1].userId) {//第二列需合併相同內容的判斷條件 spanTwoArr[concatTwo] += 1; spanTwoArr.push(0); } else { spanTwoArr.push(1); concatTwo = index; } } }) return { one: spanOneArr, two: spanTwoArr, } }, }
大功告成了