element官網的合並僅限於簡單的有規律的合並
需求: 將動態傳入列的名稱,實現該列相同的數據自動合並
初始圖
效果圖
當然還會出現一定的其他需求,比如只允許第一列的值相同的情況下才允許第二列以及之后的列進行合並,這個需求在這次分享中並未體現,有需要的可以期待下一章(element 動態合並表格--進階)
進階實現的效果類似如下圖:
tips: 如果采用這次的函數就會導致狀態那一欄的已完成全部合並
若想實現當前者相同時才允許后者的相同值實現合並,則參考進階寫法
代碼實現了采用html內嵌vue.js + element-ui
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 <div id="app"> 10 <el-table style="width:421px" :data="historyData" :span-method="objectSpanMethod" :border="true"> 11 <el-table-column prop="checkRoom" label="科室" align="center" width="140"> 12 </el-table-column> 13 <el-table-column prop="checkProject" label="檢查項目" align="center" width="140"> 14 </el-table-column> 15 <el-table-column prop="attention" label="注意事項" align="center" width="140"> 16 </el-table-column> 17 </el-table> 18 </div> 19 20 <body> 21 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 22 <!-- 引入樣式 --> 23 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 24 <!-- 引入組件庫 --> 25 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 26 <script> 27 new Vue({ 28 el: '#app', 29 data: function () { 30 return { 31 historyData: [], 32 } 33 }, 34 mounted() { 35 let dataArr = [{ 36 checkRoom: 'CTROOM', 37 checkProject: '頸椎MRICT', 38 attention: '檢查前空腹', 39 }, { 40 checkRoom: 'CTROOM', 41 checkProject: '頸椎MRICT1', 42 attention: '檢查前空腹', 43 }, { 44 checkRoom: 'CTROOM', 45 checkProject: '頸椎MRICT1', 46 attention: '檢查前空腹', 47 }, { 48 checkRoom: 'CTROOM', 49 checkProject: '頸椎MRICT1', 50 attention: '檢查前空腹', 51 }, { 52 checkRoom: 'CTROOM', 53 checkProject: '頸椎MRICT3', 54 attention: '檢查前空腹', 55 }, { 56 checkRoom: 'DR', 57 checkProject: '鼻骨', 58 attention: '檢查前空腹', 59 }, { 60 checkRoom: 'DR', 61 checkProject: '鼻骨', 62 attention: '檢查前空腹', 63 }, { 64 checkRoom: 'DR', 65 checkProject: '頭骨', 66 attention: '檢查前空腹', 67 }]; 68 let dataSolve = this.mergeTableRow(dataArr, ["checkRoom", "checkProject"]) 69 this.historyData = dataArr; 70 }, 71 methods: { 72 // 合並表格函數 73 mergeTableRow(data, merge) { 74 if (!merge || merge.length === 0) { 75 return data; 76 } 77 merge.forEach((m) => { 78 const mList = {}; 79 data = data.map((v, index) => { 80 const rowVal = v[m]; 81 if (mList[rowVal] && mList[rowVal].newIndex === index) { 82 mList[rowVal]["num"]++; 83 mList[rowVal]["newIndex"]++; 84 data[mList[rowVal]["index"]][m + "-span"].rowspan++; 85 v[m + "-span"] = { 86 rowspan: 0, 87 colspan: 0, 88 }; 89 } else { 90 mList[rowVal] = { 91 num: 1, 92 index: index, 93 newIndex: index + 1, 94 }; 95 v[m + "-span"] = { 96 rowspan: 1, 97 colspan: 1, 98 }; 99 } 100 return v; 101 }); 102 }); 103 return data; 104 }, 105 objectSpanMethod({ row, column, rowIndex, columnIndex }) { 106 const span = column["property"] + "-span"; 107 if (row[span]) { 108 return row[span]; 109 } 110 }, 111 } 112 }) 113 </script> 114 </body> 115 116 </html>
函數解釋
mergeTableRow就是合並代碼的核心函數,他會將數據進行處理,處理成為符合objectSpanMethod實現表格合並的函數
入參:
data: 入參類型: 數組 入參描述: 需要處理的數據
merge: 入參類型: 數組 入參描述: 需要合並的行的數組prop(對應列內容的字段名)
例如:
this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])