目录
- 合并单元格
- 处理数据
- 构造控制合并的数组spanArr
- reduce处理spanArr数组 ⭐⭐
- 返回最终结果
- 完整代码
合并单元格
记录一下工作时遇到的 el-table 合并单元格的需求,超详细
el-table官方提供了合并单元格的方法与返回格式 如下:
根据叙述有了如下思路:
因为后端返回的数据非统一, 可能不是按照类别排好的, 所以官网的例子满足不了所有的需求所以我们通过遍历table的数据比较前后两个元素是否相等, 来构造一个spanArr用来存放rowspan, 最后通过rowspan的值来判断colspan的值.
案例如下, 这是我需要处理的一个表格:
需要根据数据动态的合并
对应的配置数组为
处理数据
因为获取的数据的非统一性, 我们首先要将数据根据我们想要合并的字段进行排序分组, 这里我实现了一个简单的方法来处理数据:
// data 为 表格数据 , params 为需要合并的字段groupBy (data, params) {const groups = {};data.forEach(v => {// 获取data中的传入的params属性对应的属性值const group = JSON.stringify(v[params]);// 把group作为groups的key,初始化value,循环时找到相同的v[params]时不变groups[group] = groups[group] || [];// 将对应找到的值作为value放入数组中groups[group].push(v);})// 返回处理好的二维数组return Object.values(groups);},
此时打印一下我们的数据console.log(this.groupBy(this.tableListData.items, 'FirstIndex'))
如图, 我们已经将数据分好组并合并在一个数组中啦, FirstIndex
相同的在一个数组
构造控制合并的数组spanArr
这里实现了一个方法, 用来构造一个spanArr
数组赋予rowspan
,即控制行合并
- 接收重构数组 let arr = []
- 设置索引 let pos = 0
- 控制合并的数组 this.spanArr = []
先将groupby()处理好的数据再次用arr进行处理:连接所有数组成员为一个新数组
this.groupBy(this.tableListData.items, 'FirstIndex').map(v => (arr = arr.concat(v)))
现在处理好了数据,需要赋予原数据了:this.tableListData.items = arr
但是因为我是写在getSpanArr(data, params)
方法中的,已经通过形参data将 this.tableListData.items传入了这里,如果想方便封装调用的话,不用每次使用都需要再次写入 this.tableListData.items = arr
于是想到一个办法,js数组的shift()和push()是直接修改数组所占内存的方法。
所以有:
arr.map(res => {// 每次遍历都删除data && this.tableListData.items的第一个元素data.shift()// 每次遍历都将arr数组元素对应push进 data && this.tableListData.itemsdata.push(res)})
还需要定义一个redata
存放arr要合并字段的value
const redata = arr.map(v => v[params])
reduce处理spanArr数组 ⭐⭐
使用reduce
方法比较redata前后两个元素是否相等,相等的话spanArr中对应索引的元素的值+1,并且在其后增加一个0占位(防止合并过后表格数据错位),否则的话增加一个1占位,并记录当前索引,往复循环,构造一个给 rowspan 取值判断合并的数组:
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] += 1this.spanArr.push(0)} else {this.spanArr.push(1)pos = i}}return cur}, {})
看一下现在的数据spanArr
, 这里传的参数为SecondIndex
, 即表格的第二列
数组中大于0的数字就是我们数据中要合并的这组数据的数量, 同时也是这组数据需要合并的列数,而0就是代表这列不合并, 依次遍历,实现合并所选字段这一列的最终目的 如图理解:
返回最终结果
最后一步啦根据官方给的方法把我们处理好的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 = 0this.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] += 1this.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}}}}
完美! 撒花!!!