Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法_el-table span-method

---

记录工作时遇到的 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' }
1
2
3
4
5
6
7
8
9

所以先模拟一下数据：

      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' }
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下：

数据处理

有了数据于是乎开始干活！

1. 因为获取到的数据的非统一性，我们需要先处理一下数据，把获取到的数据根据我们需要合并的字段进行排序分组。这里我简单实现一个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)
    }
 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此时打印一下console.log(this.groupBy(this.tableData, ‘a’))

已经将数据分好组并合并在一个数组中啦

构造控制合并的数组spanArr

2. 然后就是重头戏了：写一个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)
      })
1
2
3
4
5
6

此时对于data的处理也会应用到this.tableData了，相当于this.tableData = arr了 （这样做可能性能损耗比较大，shift方法复杂度为O(n)，push方法为O(1)，而且不太规范，但是还能解决前端搜索后合并错乱的问题，确实好用