记录工作时遇到的 el-table 合并单元格的需求，超详细o(￣▽￣)ブ
首先看官方给出的方法与返回格式：
于是乎有了简单的思路: 通过遍历table数据比较前后两个元素是否相等 来构造一个 spanArr 数组存放rowspan，通过判断rowspan 来确定colspan的值
模拟数据
因为考虑到后端返回的数据非统一性：可能并不是按照类别排好的，而是混乱的
// 比如我们要合并a字段的数据，第一行数据是
{ a: '2222', b: '1', c: '2' }
// 第二行可能就不是我们所期待的 a字段为‘2222'的数据
{ a: '2222', b: '1', c: '2' },
{ a: '2222', b: '1', c: '2' }
// 而是字段为a：'111'的数据
{ a: '2222', b: '1', c: '2' },
{ a: '111', b: '1', c: '2' }
所以先模拟一下数据：
tableData: [
{ a: '2222', b: '1', c: '2' },
{ a: '111', b: '1', c: '2' },
{ a: '111', b: '2', c: '3' },
{ a: '111', b: '2', c: '3' },
{ a: '333', b: '333', c: '333' },
{ a: '111', b: '2', c: '3' },
{ a: '2222', b: '1', c: '2' },
{ a: '2222', b: '1', c: '2' },
{ a: '111', b: '2222', c: '3333' },
{ a: '333', b: '123', c: '321' },
{ a: '111', b: '2222', c: '3333' }
],
效果如下：
数据处理
有了数据于是乎开始干活！
- 因为获取到的数据的非统一性，我们需要先处理一下数据，把获取到的数据根据我们需要合并的字段进行排序分组。这里我简单实现一个groupBy方法处理数据：
//函数groupBy有两个形参，data 为 表格数据 ， params 为需要合并的字段
groupBy (data, params) {
const groups = {}
data.forEach(v => {
// 根据模拟数据 是通过a字段 来分组，获取data中的传入的params属性对应的属性值 ，放入数组中：["2222"]，再将属性值转换为json字符串：'["2222"]'
const group = JSON.stringify(v[params])
// 把group作为groups的key，初始化value，循环时找到相同的v[params]时不变
groups[group] = groups[group] || []
// 将对应找到的值作为value放入数组中
groups[group].push(v)
})
// 返回处理好的二维数组 （如果想返回groupBy形式的数据只返回groups即可）
return Object.values(groups)
}
*/
此时打印一下console.log(this.groupBy(this.tableData, ‘a’))
已经将数据分好组并合并在一个数组中啦
构造控制合并的数组spanArr
- 然后就是重头戏了：写一个
getSpanArr(data,params)方法 ：构造一个SpanArr数组赋予rowspan，即控制行合并
–接收重构数组 let arr = []
–设置索引let pos = 0
–控制合并的数组this.spanArr = []
将groupby()处理好的数据再次用arr进行处理：连接所有数组成员为一个新数组：
this.groupBy(this.tableData, 'a').map(v => (arr = arr.concat(v)))打印arr如下：
现在处理好了数据，需要赋予原数据了：this.tableData = arr
但是因为我是写在getSpanArr(data,params)方法中的，已经通过形参data将this.tableData传入了这里，如果想方便封装调用的话，不用每次使用都需要再次写入this.tableData = arr
于是想到一个办法，js数组的shift()和push()是直接修改数组所占内存的方法。所以有：
arr.map(res => {
// 每次遍历都删除data && this.tableData 的第一个元素
data.shift()
// 每次遍历都将arr数组元素对应push进 data && this.tableData
data.push(res)
})
此时对于data的处理也会应用到this.tableData了，相当于this.tableData = arr了 （这样做可能性能损耗比较大，shift方法复杂度为O(n)，push方法为O(1)，而且不太规范，但是还能解决前端搜索后合并错乱的问题，确实好用🤣）
接下来就是spanArr的处理了：
定义一个redata存放arr要合并字段的value
const redata = arr.map(v => v[params])
reduce处理spanArr数组
重点来了！！！重点来了！！！重点来了！！！
再使用reduce方法比较redata前后两个元素是否相等，相等的话spanArr中对应索引的元素的值+1，并且在其后增加一个0占位，否则的话增加一个1占位，并记录当前索引，往复循环，构造一个给 rowspan 取值判断合并的数组。不太明白的话一会解释，先上代码:
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
}, {})
先看下结果：
我们这一步的最终目的是构造spanArr，为了给rowspan判断合并。那么rowspan是怎么判断合并的呢？
结合我们第二步处理好的this.tableData数据可以明了的看到：数组中大于0的数字就是我们数据中要合并的这组数据数量同时也是这组数据需要合并的列数，而0就是代表这列不合并不合并，依次遍历，实现合并所选字段这一列的最终目的!如图理解：
返回最终结果
- 最后一步啦，根据官方给的方法把我们处理好的
spanArr传给rowspan即可！
cellMerge ({ row, column, rowIndex, columnIndex }) {
// 第一列合并
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
效果如图！
完整代码
就很nice，就很棒有木有！！！简直完美！！最后把完整代码贴上：
<template>
<el-table
border
size="mini"
height="100%"
:span-method="cellMerge"
:data="tableData"
>
<el-table-column
label="设备"
align="center"
prop="a"
/>
<el-table-column
label="参数"
align="center"
prop="b"
/>
<el-table-column
label="数值"
align="num"
prop="c"
/>
</el-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ a: '2222', b: '1', c: '2' },
{ a: '111', b: '1', c: '2' },
{ a: '111', b: '2', c: '3' },
{ a: '111', b: '2', c: '3' },
{ a: '111', b: '2', c: '3' },
{ a: '2222', b: '1', c: '2' },
{ a: '2222', b: '1', c: '2' },
{ a: '111', b: '2222', c: '3333' },
{ a: '111', b: '2222', c: '3333' }
],
spanArr: []
}
},
methods: {
// groupBy 数组
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 = []
// arr 处理
this.groupBy(data, params).map(v => (arr = arr.concat(v)))
// this.tableData = arr
arr.map(res => {
data.shift()
data.push(res)
})
// spanArr 处理
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
}, {})
},
// 合并 tableData 数据
cellMerge ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
},
created () {
this.getSpanArr(this.tableData, 'a')
}
}
</script>
结语
这里只是实现第一列的横行合并，同理可得n列n行的合并，最后封装通用组件调用即可！
XDM都看到这了点个赞再走呗！！撒花！！🎉🎉🎉
扫一扫
1438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
