element-ui table单元格合并

表格的方法

通过给table传入span-method方法可以实现合并行或列

原理：

getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。

如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，

以此往复，得到所有行的合并数，０即表示该行不显示

其他代码如下：

 data(){
   return{
     tableData:[{},{}]
     spanArr:[],
     pos:0
 },
  mounted() {
      this.getSpanArr(this.data); 
  }
 methods: {
      //表格第一列合并之前，元素要并列的行数获取
      getSpanArr(data) {　
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1)
              this.pos = 0  //pos是spanArr的索引
            } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].id === data[i - 1].id) {
                // 相同的话 就加一 表示合并行数加一  0表示该行不显示
                   this.spanArr[this.pos] += 1;
                   this.spanArr.push(0);
              } else {
                //不相同就添加一位1 并设置索引位置
                   this.spanArr.push(1);
                   this.pos = i;
              }
            }
            console.log('spanarr',this.spanArr)
        }
      },
      // 表格第一列合并的代码
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 1 ) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            console.log(`rowspan:${_row} colspan:${_col}`)
            // [0,0] 表示这一行不显示， [2,1]表示行的合并数
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
      },
    }

打印结果：

getSpanArr这个函数的作用是整合需要合并的行，假设data是需要处理的数据列表，对这个列表进行循环，如果是第一条先在spanArr数组加1，并且把这个位置pos置0，如果之后的数据和上一条数据的id相同，那就在同样的pos位置加1，同时push一个0，代表要合并的行的数量，如果不相同，就往spanArr中新加入一个1，同时记住位置。
这个方法需要数据已经是按id排序过的数组，即相同id的数据相邻。

objectSpanMethod是我写的span-method方法，因为我需要的是合并相同id的行的前4列单元格，首先判断columnIndex（列号）是多少，然后取出spanArr当前行号对应的数字，如果当前行号对应的数字是>0代表当前行存在且不需要合并，然后return，return既可以是一个对象，也可以是一个数组，第一个元素代表rowspan，第二个元素代表colspan。
这样就可以合并行的单元格