Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法代碼詳解
合并單元格
記錄一下工作時遇到的 el-table 合并單元格的需求,超詳細(xì)??
el-table官方提供了合并單元格的方法與返回格式 如下:
根據(jù)敘述有了如下思路:
因?yàn)楹蠖朔祷氐臄?shù)據(jù)非統(tǒng)一, 可能不是按照類別排好的??, 所以官網(wǎng)的例子滿足不了所有的需求所以我們通過遍歷table的數(shù)據(jù)比較前后兩個元素是否相等, 來構(gòu)造一個spanArr用來存放rowspan, 最后通過rowspan的值來判斷colspan的值??.
案例如下, 這是我需要處理的一個表格:
需要根據(jù)數(shù)據(jù)動態(tài)的合并
對應(yīng)的配置數(shù)組為
處理數(shù)據(jù)
因?yàn)楂@取的數(shù)據(jù)的非統(tǒng)一性, 我們首先要將數(shù)據(jù)根據(jù)我們想要合并的字段進(jìn)行排序分組, 這里我實(shí)現(xiàn)了一個簡單的方法來處理數(shù)據(jù):
// data 為 表格數(shù)據(jù) , params 為需要合并的字段 groupBy (data, params) { const groups = {}; data.forEach(v => { // 獲取data中的傳入的params屬性對應(yīng)的屬性值 const group = JSON.stringify(v[params]); // 把group作為groups的key,初始化value,循環(huán)時找到相同的v[params]時不變 groups[group] = groups[group] || []; // 將對應(yīng)找到的值作為value放入數(shù)組中 groups[group].push(v); }) // 返回處理好的二維數(shù)組 return Object.values(groups); },
此時打印一下我們的數(shù)據(jù) console.log(this.groupBy(this.tableListData.items, 'FirstIndex'))
如圖, 我們已經(jīng)將數(shù)據(jù)分好組并合并在一個數(shù)組中啦, FirstIndex
相同的在一個數(shù)組
構(gòu)造控制合并的數(shù)組spanArr
這里實(shí)現(xiàn)了一個方法, 用來構(gòu)造一個 spanArr
數(shù)組賦予 rowspan
,即控制行合并
- 接收重構(gòu)數(shù)組 let arr = []
- 設(shè)置索引 let pos = 0
- 控制合并的數(shù)組 this.spanArr = []
先將groupby()處理好的數(shù)據(jù)再次用arr進(jìn)行處理:連接所有數(shù)組成員為一個新數(shù)組 this.groupBy(this.tableListData.items, 'FirstIndex').map(v => (arr = arr.concat(v)))
現(xiàn)在處理好了數(shù)據(jù),需要賦予原數(shù)據(jù)了:this.tableListData.items = arr
但是因?yàn)槲沂菍懺?getSpanArr(data, params)
方法中的,已經(jīng)通過形參data將 this.tableListData.items傳入了這里,如果想方便封裝調(diào)用的話,不用每次使用都需要再次寫入 this.tableListData.items = arr于是想到一個辦法,js數(shù)組的shift()和push()是直接修改數(shù)組所占內(nèi)存的方法。
所以有:
arr.map(res => { // 每次遍歷都刪除data && this.tableListData.items的第一個元素 data.shift() // 每次遍歷都將arr數(shù)組元素對應(yīng)push進(jìn) data && this.tableListData.items data.push(res) })
還需要定義一個 redata
存放arr要合并字段的valueconst redata = arr.map(v => v[params])
reduce處理spanArr數(shù)組 ??
使用 reduce
方法比較redata前后兩個元素是否相等,相等的話spanArr中對應(yīng)索引的元素的值+1,并且在其后增加一個0占位(防止合并過后表格數(shù)據(jù)錯位),否則的話增加一個1占位,并記錄當(dāng)前索引,往復(fù)循環(huán),構(gòu)造一個給 rowspan 取值判斷合并的數(shù)組:
const redata = arr.map(v => v[params]) redata.reduce((old, cur, i) => { // old 上一個元素 cur 當(dāng)前元素 i 索引 if (i === 0) { // 第一次判斷先增加一個 1 占位 ,索引為0 this.spanArr.push(1) pos = 0 } else { if (cur === old) { this.spanArr[pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) pos = i } } return cur }, {})
看一下現(xiàn)在的數(shù)據(jù) spanArr
, 這里傳的參數(shù)為 SecondIndex
, 即表格的第二列
數(shù)組中大于0的數(shù)字就是我們數(shù)據(jù)中要合并的這組數(shù)據(jù)的數(shù)量, 同時也是這組數(shù)據(jù)需要合并的列數(shù),而0就是代表這列不合并, 依次遍歷,實(shí)現(xiàn)合并所選字段這一列的最終目的
如圖理解:
返回最終結(jié)果
最后一步啦??根據(jù)官方給的方法把我們處理好的spanArr傳給rowspan即可
spanMethod({ row, column, rowIndex, columnIndex }) { // 第一列 if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } }
效果如圖!
完整代碼
就很nice, !!最后把完整代碼貼上:
// ...... mounted() { this.getSpanArr(this.tableListData.items, 'FirstIndex'); }, methods: { groupBy (data, params) { const groups = {} data.forEach(v => { const group = JSON.stringify(v[params]) groups[group] = groups[group] || [] groups[group].push(v) }) return Object.values(groups) }, getSpanArr (data, params) { let arr = [] let pos = 0 this.spanArr = [] this.groupBy(data, params).map(v => (arr = arr.concat(v))) arr.map(res => { data.shift() data.push(res) }) const redata = arr.map(v => v[params]) redata.reduce((old, cur, i) => { if (i === 0) { this.spanArr.push(1) pos = 0 } else { if (cur === old) { this.spanArr[pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) pos = i } } return cur }, {}) }, spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } } }
完美! 撒花?。?!??????
總結(jié)
到此這篇關(guān)于Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法的文章就介紹到這了,更多相關(guān)el-table動態(tài)合并單元格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用Highcharts實(shí)現(xiàn)3D餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)3D餅圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue?parseHTML函數(shù)解析器遇到結(jié)束標(biāo)簽
這篇文章主要介紹了vue?parseHTML函數(shù)源碼解析之析器遇到結(jié)束標(biāo)簽的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue實(shí)現(xiàn)搜索并高亮文字的兩種方式總結(jié)
在做文字處理的項(xiàng)目時經(jīng)常會遇到搜索文字并高亮的需求,常見的實(shí)現(xiàn)方式有插入標(biāo)簽和貼標(biāo)簽兩種,這兩種方式適用于不同的場景,各有優(yōu)劣,下面我們就來看看他們的具體實(shí)現(xiàn)吧2023-11-11使用axios請求時,發(fā)送formData請求的示例
今天小編就為大家分享一篇使用axios請求時,發(fā)送formData請求的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10