Element table元件單元格合併（縱向）
阿新 • • 發佈：2019-02-14
一、計算
1.HTML
<div class="lomeo-table-content"> <el-table :data="rdata" :span-method="spanMethod" border style="width: 100%"> <el-table-column prop="category" label="類別" width="30"> <template slot-scope="scope"> <div v-html="zongxiang(scope.row.category)"></div> </template> </el-table-column> <el-table-column prop="order" label="序號" width="30"></el-table-column> <el-table-column prop="evalu" label="專案" width="30"> <template slot-scope="scope"> <div v-html="evaluFormatter(scope)"></div> </template> </el-table-column> <el-table-column prop="tplContent" label="考評內容" width="340"></el-table-column> <el-table-column prop="quantiNml.name" label="量化標準" width="100"></el-table-column> <el-table-column prop="evaluNml.name" label="考評標準" width="100"></el-table-column> <el-table-column prop="response" label="落實情況" width="240"> <template slot-scope="scope"> <div v-html="respFormatter(scope)"></div> </template> </el-table-column> <el-table-column prop="dftDec" label="預設扣分" width="60"> <template slot-scope="scope"> <div v-html="decFormatter(scope,0)"></div> </template> </el-table-column> <el-table-column prop="selfDec" label="自評扣分" width="60"> <template slot-scope="scope"> <div v-html="decFormatter(scope,1)"></div> </template> </el-table-column> <el-table-column prop="dptDec" label="主管部門扣分" width="60"> <template slot-scope="scope"> <div v-html="decFormatter(scope,2)"></div> </template> </el-table-column> <el-table-column prop="leadDec" label="主管領導扣分" width="60"> <template slot-scope="scope"> <div v-html="decFormatter(scope,3)"></div> </template> </el-table-column> <el-table-column prop="tool" label="#" width="60"></el-table-column> </el-table>
2.對源資料進行計算
/** * 初始化合並引數表 */ var cols = [ { name: 'category', //參與計算的列名，必須和el-table-column prop='category'值一致 getValue(row) { //該列用於比較的值的獲取方法 return row.category; }, }, { name: 'order', getValue(row) { return row.evaluCategory.name;//行序號跟隨此列 }, }, { name: 'evalu', getValue(row) { return row.evaluCategory.name; }, } ];//參與合併的欄位，在這裡增加即可 var loca = []; //合併座標與數量 for (var i in cols) { loca.push({ rowSpan: 1, colSpan: 1, rowIndex: null, colProperty: cols[i].name, order: 0,//行序號 value: null, getValue: cols[i].getValue, getOrder() { return this.colProperty == 'evalu' ? this.order : null; } }); } for (var i = 0; i < pdata.rows.length; i++) { pdata.rows[i].category = '管理過程'; pdata.rows[i].flag = 'p'; pdata.rows[i].cellSpans = []; for (var _w in loca) { var w = loca[_w]; if (i == 0 || w.value != w.getValue(pdata.rows[i])) {//邊界指標，1.第一條硬性第一個邊界 2.與上一單元格值不同的屬於邊界 w.rowIndex = i;//行索引，若下一單元格值相同則以此索引疊加rowSpan值 w.rowSpan = 1;//rowSpan預設1 w.value = w.getValue(pdata.rows[i]);//單元格值 w.order += 1;//行號+1 } else { //若本單元格值==上一單元格值則合併列，rowSpan+=1 for (var p in pdata.rows[w.rowIndex].cellSpans) { var n = pdata.rows[w.rowIndex].cellSpans[p]; if (n.colProperty == w.colProperty) { n.rowSpan += 1; } } } } //設定行號 for (var q in loca) { var o = loca[q].getOrder(); if (o) { pdata.rows[i].order = o; break; } } pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度複製，否則總是指向最後一條資料 }
二、合併方法
spanMethod({ row, column, rowIndex, columnIndex }) { //遍歷本行合併表 for (var i in row.cellSpans) { var _r = row.cellSpans[i]; //列屬性匹配 if (_r.colProperty == column.property) { //若合併表指向本單元格則構建合併引數並返回 if (_r.rowIndex == rowIndex) { return { rowspan: _r.rowSpan, colspan: _r.colSpan } } else {//否則隱藏該單元格。這裡必須有，否則單元格會被右移一列 return { rowspan: 0, colspan: 0 }; } } } },
毛坯圖：
- 填坑心得
水平太臭除錯調了1天多。由於資料抽象，期間序列化輸出各種物件，看見了資料思路明晰多了！後來被
pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度複製，否則總是指向最後一條資料這個賦值搞坑到，無論如何賦值都指向最後一條，Object.assign用上也不行，只能用這句來替代了。
感謝p墩大力幫助！歡迎加群 C#開發.NET後花園 137205402 一起學習！