Element中el-table動態(tài)合并單元格(span-method方法)
合并單元格
記錄一下工作時遇到的 el-table 合并單元格的需求,超詳細??
el-table官方提供了合并單元格的方法與返回格式 如下:

根據(jù)敘述有了如下思路:
因為后端返回的數(shù)據(jù)非統(tǒng)一, 可能不是按照類別排好的??, 所以官網(wǎng)的例子滿足不了所有的需求所以我們通過遍歷table的數(shù)據(jù)比較前后兩個元素是否相等, 來構造一個spanArr用來存放rowspan, 最后通過rowspan的值來判斷colspan的值??.
案例如下, 這是我需要處理的一個表格:
需要根據(jù)數(shù)據(jù)動態(tài)的合并

對應的配置數(shù)組為

處理數(shù)據(jù)
因為獲取的數(shù)據(jù)的非統(tǒng)一性, 我們首先要將數(shù)據(jù)根據(jù)我們想要合并的字段進行排序分組, 這里我實現(xiàn)了一個簡單的方法來處理數(shù)據(jù):
// data 為 表格數(shù)據(jù) , params 為需要合并的字段
groupBy (data, params) {
const groups = {};
data.forEach(v => {
// 獲取data中的傳入的params屬性對應的屬性值
const group = JSON.stringify(v[params]);
// 把group作為groups的key,初始化value,循環(huán)時找到相同的v[params]時不變
groups[group] = groups[group] || [];
// 將對應找到的值作為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ù)組
構造控制合并的數(shù)組spanArr
這里實現(xiàn)了一個方法, 用來構造一個spanArr數(shù)組賦予rowspan,即控制行合并
- 接收重構數(shù)組 let arr = []
- 設置索引 let pos = 0
- 控制合并的數(shù)組 this.spanArr = []
先將groupby()處理好的數(shù)據(jù)再次用arr進行處理:連接所有數(shù)組成員為一個新數(shù)組this.groupBy(this.tableListData.items, 'FirstIndex').map(v => (arr = arr.concat(v)))
現(xiàn)在處理好了數(shù)據(jù),需要賦予原數(shù)據(jù)了:this.tableListData.items = arr
但是因為我是寫在getSpanArr(data, params)方法中的,已經(jīng)通過形參data將 this.tableListData.items傳入了這里,如果想方便封裝調用的話,不用每次使用都需要再次寫入 this.tableListData.items = arr
于是想到一個辦法,js數(shù)組的shift()和push()是直接修改數(shù)組所占內存的方法。
所以有:
arr.map(res => {
// 每次遍歷都刪除data && this.tableListData.items的第一個元素
data.shift()
// 每次遍歷都將arr數(shù)組元素對應push進 data && this.tableListData.items
data.push(res)
})還需要定義一個redata存放arr要合并字段的value
const redata = arr.map(v => v[params])
reduce處理spanArr數(shù)組
使用reduce方法比較redata前后兩個元素是否相等,相等的話spanArr中對應索引的元素的值+1,并且在其后增加一個0占位(防止合并過后表格數(shù)據(jù)錯位),否則的話增加一個1占位,并記錄當前索引,往復循環(huán),構造一個給 rowspan 取值判斷合并的數(shù)組:
const redata = arr.map(v => v[params])
redata.reduce((old, cur, i) => {
// old 上一個元素 cur 當前元素 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就是代表這列不合并, 依次遍歷,實現(xiàn)合并所選字段這一列的最終目的 如圖理解:

返回最終結果
最后一步啦??根據(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
}
}
}效果如圖!

完整代碼
最后把完整代碼貼上:
// ......
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
}
}
}
}到此這篇關于Element中el-table動態(tài)合并單元格(span-method方法)的文章就介紹到這了,更多相關Element el-table動態(tài)合并單元格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染
下面小編就為大家分享一篇淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
el-select 下拉框多選實現(xiàn)全選的實現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內,無論觸發(fā)了多少次回調,都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
vue攔截器Vue.http.interceptors.push使用詳解
這篇文章主要為大家詳細介紹了vue攔截器Vue.http.interceptors.push的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04
深入探討如何在Vue中使用EventBus實現(xiàn)組件間的高效通信
在現(xiàn)代前端開發(fā)中,Vue.js?作為一種流行的漸進式框架,廣泛應用于各類?Web?項目的構建中,本文將深入探討如何在?Vue?中使用?EventBus,實現(xiàn)組件間的高效通信,需要的可以了解下2024-11-11

