element ui table表格中 span-method的用法_el-table中span-method的使用

前景：前天突然接到一个蓝湖，上面需要动态添加数据到表格中，并且要实现一对多的数据，在网上找了一些，看到了表格中还有一个span-method的属性可以实现合并表格，写完之后来总结一下。
官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号
代码如下：

//   动态和并的操作
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {//这个是你要合并的规则
          const _row = this.mergeSpanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
          },
          // 生成一个与行数相同的数组，记录每一行设置的合并数
          setMergeArr (data) {
              this.mergeSpanArr=[]
            for (var i = 0; i < data.length; i++) {
              if (i === 0) {
                this.mergeSpanArr.push(1);
                this.mergeSpanArrIndex = 0
              } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].sn === data[i - 1].sn) {//如何判断出是合并哪一个
                  this.mergeSpanArr[this.mergeSpanArrIndex] += 1;
                  this.mergeSpanArr.push(0);
                } else {
                  this.mergeSpanArr.push(1);
                  this.mergeSpanArrIndex = i;
                }
              }
            }
            // 如果第一条记录索引为0，向数组中push 1，设置索引值
            // 如果不是第一条记录，判断与前一条记录是否相等，相等则向mergeSpanArr添加元素0
              // 且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
          },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

注意的点：当我们动态添加删除数据的时候需要里面存储的序号清空在把数据重新赋值。还有当我们动态添加数据的时候可能会有缓存之类的，所以我们就需要刷新表格，达到是最新的数据（我这边在表格上面添加了 :key=“Math.random()”，就实现了当数据发生改变的时候，就会刷新表格了。）