Element?UI中table單元格合并的解決過程
引言
項目中遇到表格單元格合并的需求,在此記錄整個解決過程。
項目使用的是 Element UI,表格使用的是 table 組件。Element UI 的 table 表格組件中對單元格進行合并,需要使用 table 組件的 span-method 屬性。
先看一張成果圖(完整代碼放在末尾):
解決思路:
1、格式化后臺返回的數(shù)據(jù)(根據(jù)實際數(shù)據(jù)格式處理)
項目后臺返回的數(shù)據(jù)格式為樹形結(jié)構(gòu),這里做簡化展示:
[ { 'column1': '111', 'column2': '222', 'column3': '333', 'children1': [ { 'column6': 666, 'column4': '4440', 'column5': '5550', 'children2': [ { 'column7': '77701', 'column8': '88801', 'column9': '99901' } ] } ] } ]
需要先將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組:
// table 表格數(shù)據(jù)初始化處理,將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組 handleData(data, parentId) { data.map((res, index) => { var obj = { id: parentId } for (const key in res) { const isarr = Object.values(res).find((age) => { return Array.isArray(age) }) if (isarr) { if (Array.isArray(res[key])) { for (let i = 0; i < res[key].length; i++) { Object.assign(obj, res[key][i]) data.push(obj) res[key].splice(i, 1) if (res[key].length === 0) { data.splice(index, 1) } this.handleData(data, parentId) } } else { Object.assign(obj, { [key]: res[key] }) } } } }) return data }
因為后臺返回的數(shù)據(jù)里沒有唯一標(biāo)識符,所以需要單獨添加一個唯一標(biāo)識表示轉(zhuǎn)換為一維數(shù)組的數(shù)據(jù)是出自同一組樹結(jié)構(gòu)里。故此處在展開時單獨加了一個 id 屬性,用來代替唯一標(biāo)識。如果后臺返回的數(shù)據(jù)格式就是一個一維數(shù)組,可跳過數(shù)據(jù)格式化步驟。
2、在 data 中定義數(shù)據(jù),需要合并幾列就定義幾個數(shù)組和索引
data() { return { tableData: [], // 合并單元格 column1Arr: [], // column1 column1Index: 0, // column1索引 column2Arr: [], // column2 column2Index: 0, // column2索引 column3Arr: [], // column3 column3Index: 0, // column3索引 column4Arr: [], // column4 column4Index: 0, // column4 column5Arr: [], // column5 column5Index: 0, // column5索引 column6Arr: [], // column6 column6Index: 0 // column6索引 } }
3、定義合并函數(shù)
以第一行為基準(zhǔn),一層層對比,參數(shù) data 就是格式化以后的表格數(shù)據(jù),以每個數(shù)據(jù)里的唯一標(biāo)識 id 作為合并的參照字段:
// 初始化合并行數(shù)組 mergeInit() { this.column1Arr = [] // column1 this.column1Index = 0 // column1索引 this.column2Arr = [] // column2 this.column2Index = 0 // column2索引 this.column3Arr = [] // column3 this.column3Index = 0 // column3索引 this.column4Arr = [] // column4 this.column4Index = 0 // column4索引 this.column5Arr = [] // column5 this.column5Index = 0 // column5索引 this.column6Arr = [] // column6 this.column6Index = 0 // column6索引 }, // 合并表格 mergeTable(data) { this.mergeInit() if (data.length > 0) { for (var i = 0; i < data.length; i++) { if (i === 0) { // 第一行必須存在,以第一行為基準(zhǔn) this.column1Arr.push(1) // column1 this.column1Index = 0 this.column2Arr.push(1) // column2 this.column2Index = 0 this.column3Arr.push(1) // column3 this.column3Index = 0 this.column4Arr.push(1) // column4 this.column4Index = 0 this.column5Arr.push(1) // column5 this.column5Index = 0 this.column6Arr.push(1) // column6 this.column6Index = 0 } else { // 判斷當(dāng)前元素與上一元素是否相同 // column1 if ( data[i].column1 === data[i - 1].column1 && data[i].id === data[i - 1].id ) { this.column1Arr[this.column1Index] += 1 this.column1Arr.push(0) } else { this.column1Arr.push(1) this.column1Index = i } // column2 if ( data[i].column2 === data[i - 1].column2 && data[i].id === data[i - 1].id ) { this.column2Arr[this.column2Index] += 1 this.column2Arr.push(0) } else { this.column2Arr.push(1) this.column2Index = i } // column3 if ( data[i].column3 === data[i - 1].column3 && data[i].id === data[i - 1].id ) { this.column3Arr[this.column3Index] += 1 this.column3Arr.push(0) } else { this.column3Arr.push(1) this.column3Index = i } // column4 if ( data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column4Arr[this.column4Index] += 1 this.column4Arr.push(0) } else { this.column4Arr.push(1) this.column4Index = i } // column5 if ( data[i].column5 === data[i - 1].column5 && data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column5Arr[this.column5Index] += 1 this.column5Arr.push(0) } else { this.column5Arr.push(1) this.column5Index = i } // column6 if ( data[i].column6 === data[i - 1].column6 && data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column6Arr[this.column6Index] += 1 this.column6Arr.push(0) } else { this.column6Arr.push(1) this.column6Index = i } } } } },
注意,同一組數(shù)據(jù)里可能會有多個 children1 或者 children2,這時合并的時候會有多個條件進行判斷:
4、table 組件屬性 span-method 的單元格合并方法:
handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1) { // 第一列 column1 const _row_1 = this.column1Arr[rowIndex] const _col_1 = _row_1 > 0 ? 1 : 0 return { rowspan: _row_1, colspan: _col_1 } } else if (columnIndex === 2) { // 第二列 column2 const _row_2 = this.column2Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 3) { // 第三列 column3 const _row_2 = this.column3Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 4) { // 第四列 column4 const _row_2 = this.column4Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 5) { // 第五列 column5 const _row_2 = this.column5Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 6) { // 第六列 column6 const _row_2 = this.column6Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } }
至此,整個單元格合并就完成了!
如果覺得寫得還不錯,還請點贊支持,感謝感謝感謝!?。?/p>
完整代碼:
<template> <div class="table-wrap"> <el-table :data="tableData" :span-method="handleSpanMethod" :cell-style="{ background: '#FFFFFF' }" border style="width: 100%" > <el-table-column prop="id" label="序號" align="center" width="80"> <template slot-scope="scope"> {{ scope.row.id + 1 }} </template> </el-table-column> <el-table-column prop="column1" label="column1" align="center" /> <el-table-column prop="column2" label="column2" align="center" /> <el-table-column prop="column3" label="column3" align="center" /> <el-table-column prop="column4" label="column4" align="center" /> <el-table-column prop="column5" label="column5" align="center" /> <el-table-column prop="column6" label="column6" align="center" /> <el-table-column prop="column7" label="column7" align="center" /> <el-table-column prop="column8" label="column8" align="center" /> <el-table-column prop="column9" label="column9" align="center" /> </el-table> </div> </template> <script> export default { name: 'CellMerge', data() { return { tableData: [], // 合并單元格 column1Arr: [], // column1 column1Index: 0, // column1索引 column2Arr: [], // column2 column2Index: 0, // column2索引 column3Arr: [], // column3 column3Index: 0, // column3索引 column4Arr: [], // column4 column4Index: 0, // column4 column5Arr: [], // column5 column5Index: 0, // column5索引 column6Arr: [], // column6 column6Index: 0 // column6索引 } }, mounted() { this.initTableData() }, methods: { // 初始化表格數(shù)據(jù) initTableData() { const newTableData = [ { 'column1': '111', 'column2': '222', 'column3': '333', 'children1': [ { 'column6': 666, 'column4': '4440', 'column5': '5550', 'children2': [ { 'column7': '77701', 'column8': '88801', 'column9': '99901' }, { 'column7': '77702', 'column8': '88802', 'column9': '99902' }, { 'column7': '77703', 'column8': '88803', 'column9': '99903' } ] }, { 'column6': 666, 'column4': '4441', 'column5': '5551', 'children2': [ { 'column7': '77711', 'column8': '88811', 'column9': '99911' } ] }, { 'column6': 666, 'column4': '4442', 'column5': '5552', 'children2': [ { 'column7': '77721', 'column8': '88821', 'column9': '99921' }, { 'column7': '77722', 'column8': '88822', 'column9': '99922' } ] } ] }, { 'column1': '111', 'column2': '222', 'column3': '333', 'children1': [ { 'column6': 666, 'column4': '4440', 'column5': '5550', 'children2': [ { 'column7': '77701', 'column8': '88801', 'column9': '99901' } ] }, { 'column6': 666, 'column4': '4441', 'column5': '5551', 'children2': [ { 'column7': '77711', 'column8': '88811', 'column9': '99911' }, { 'column7': '77712', 'column8': '88812', 'column9': '99912' } ] } ] }, { 'column1': '111', 'column2': '222', 'column3': '333', 'children1': [ { 'column6': 666, 'column4': '4440', 'column5': '5550', 'children2': [ { 'column7': '77701', 'column8': '88801', 'column9': '99901' }, { 'column7': '77702', 'column8': '88802', 'column9': '99902' }, { 'column7': '77703', 'column8': '88803', 'column9': '99903' } ] }, { 'column6': 666, 'column4': '4441', 'column5': '5551', 'children2': [ { 'column7': '77711', 'column8': '88811', 'column9': '99911' } ] } ] } ] this.tableData = [] newTableData.map((res, index) => { const parentId = index this.tableData.push.apply( this.tableData, this.handleData([res], parentId) ) }) this.mergeTable(this.tableData) }, // table 表格數(shù)據(jù)初始化處理,將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組 handleData(data, parentId) { data.map((res, index) => { var obj = { id: parentId } for (const key in res) { const isarr = Object.values(res).find((age) => { return Array.isArray(age) }) if (isarr) { if (Array.isArray(res[key])) { for (let i = 0; i < res[key].length; i++) { Object.assign(obj, res[key][i]) data.push(obj) res[key].splice(i, 1) if (res[key].length === 0) { data.splice(index, 1) } this.handleData(data, parentId) } } else { Object.assign(obj, { [key]: res[key] }) } } } }) return data }, // 初始化合并行數(shù)組 mergeInit() { this.column1Arr = [] // column1 this.column1Index = 0 // column1索引 this.column2Arr = [] // column2 this.column2Index = 0 // column2索引 this.column3Arr = [] // column3 this.column3Index = 0 // column3索引 this.column4Arr = [] // column4 this.column4Index = 0 // column4索引 this.column5Arr = [] // column5 this.column5Index = 0 // column5索引 this.column6Arr = [] // column6 this.column6Index = 0 // column6索引 }, // 合并表格 mergeTable(data) { this.mergeInit() if (data.length > 0) { for (var i = 0; i < data.length; i++) { if (i === 0) { // 第一行必須存在,以第一行為基準(zhǔn) this.column1Arr.push(1) // column1 this.column1Index = 0 this.column2Arr.push(1) // column2 this.column2Index = 0 this.column3Arr.push(1) // column3 this.column3Index = 0 this.column4Arr.push(1) // column4 this.column4Index = 0 this.column5Arr.push(1) // column5 this.column5Index = 0 this.column6Arr.push(1) // column6 this.column6Index = 0 } else { // 判斷當(dāng)前元素與上一元素是否相同 // column1 if ( data[i].column1 === data[i - 1].column1 && data[i].id === data[i - 1].id ) { this.column1Arr[this.column1Index] += 1 this.column1Arr.push(0) } else { this.column1Arr.push(1) this.column1Index = i } // column2 if ( data[i].column2 === data[i - 1].column2 && data[i].id === data[i - 1].id ) { this.column2Arr[this.column2Index] += 1 this.column2Arr.push(0) } else { this.column2Arr.push(1) this.column2Index = i } // column3 if ( data[i].column3 === data[i - 1].column3 && data[i].id === data[i - 1].id ) { this.column3Arr[this.column3Index] += 1 this.column3Arr.push(0) } else { this.column3Arr.push(1) this.column3Index = i } // column4 if ( data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column4Arr[this.column4Index] += 1 this.column4Arr.push(0) } else { this.column4Arr.push(1) this.column4Index = i } // column5 if ( data[i].column5 === data[i - 1].column5 && data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column5Arr[this.column5Index] += 1 this.column5Arr.push(0) } else { this.column5Arr.push(1) this.column5Index = i } // column6 if ( data[i].column6 === data[i - 1].column6 && data[i].column4 === data[i - 1].column4 && data[i].id === data[i - 1].id ) { this.column6Arr[this.column6Index] += 1 this.column6Arr.push(0) } else { this.column6Arr.push(1) this.column6Index = i } } } } }, handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1) { // 第一列 column1 const _row_1 = this.column1Arr[rowIndex] const _col_1 = _row_1 > 0 ? 1 : 0 return { rowspan: _row_1, colspan: _col_1 } } else if (columnIndex === 2) { // 第二列 column2 const _row_2 = this.column2Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 3) { // 第三列 column3 const _row_2 = this.column3Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 4) { // 第四列 column4 const _row_2 = this.column4Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 5) { // 第五列 column5 const _row_2 = this.column5Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } else if (columnIndex === 6) { // 第六列 column6 const _row_2 = this.column6Arr[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } } } } } </script> <style lang="scss" scoped> .table-wrap { width: 100%; height: 100%; padding: 20px; } </style>
總結(jié)
到此這篇關(guān)于Element UI中table單元格合并的文章就介紹到這了,更多相關(guān)Element UI table單元格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼
這篇文章主要介紹了vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼,文中補充介紹了高德vue-amap使用(一)標(biāo)記點位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-01-01vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue中img標(biāo)簽的src屬性總結(jié)(問題解決)
初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧2023-11-11