Table组件合并单元格-让你头疼的问题
麻烦麻烦很麻烦相信很多小伙伴都遇到过这样的问题,element ui 中 table组件渲染表格,需要对数据进行处理,比如后端返回了一个树状结构的数据,需要做扁平化处理,还要进行单元格合并的计算,这是我的解决方法,假如小伙伴们有更好的方法,欢迎评论区留言!!!
先来看看效果图吧!
数据结构/格式如下:
拿到这样的数据,需要你去渲染表格,是不是头皮发麻?
解决思路分两步:
第一步:数据扁平化处理
第二步:计算合并单元格行列数
先来说说数据扁平化处理吧!就是转化成table组件可以渲染的格式
:span-method是计算合并行/列的方法
那么如何将一个树状数据扁平化处理呢?foreach、reduce、map都可以
话不多说,直接上代码:
reduce/map方法
let arr = this.scoreDate.evalItemList; let _list = arr.reduce((list, cur) => [ ...list, ...cur.childItemGroupList.reduce((l, c) => [ ...l, // ...c.childItemList.map(i => Object.assign(i, c, cur)) ...c.childItemList.reduce((i,n) => [ ...i, { ...cur, ...c, ...n } ], []) ], []) ], []); console.log(_list);复制代码
foreach方法
这边直接将数据进行处理,拿到需要合并单元格的行数
let row = 0; let i, j; this.scoreDate.evalItemList.forEach((item) => { const objI = {}; for (let key in item) objI[key] = [row]; if (row > 0) { for (let key in item) { this.tableList[i].rowData[key][1] = row - i; } } i = row; item.childItemGroupList.forEach((item2) => { const objJ = {}; for (let key in item2) objJ[key] = [row]; if (row > 0) { for (let key in item2) { this.tableList[j].rowData[key][1] = row - j; } } j = row; item2.childItemList.forEach((item3) => { row++; this.tableList.push({ ...item, ...item2, ...item3, rowData: { ...objI, ...objJ, }, }); }); }); }); console.log(this.tableList, "表格"); 复制代码
:span-method 方法如下
objectSpanMethod({ row, column, rowIndex, columnIndex }) { let rowspan = row.rowData[column.property]; if (rowspan) { if (rowspan[0] !== rowIndex) return [0, 0]; else if (rowspan.length === 1) return [this.tableList.length - rowIndex, 1]; else return [rowspan[1], 1]; } }, 复制代码
这是我的方法,小伙伴有没有更简便的方法呀!!评论区见
作者:Flavor_
链接:https://juejin.cn/post/7031106178922840078