vue+element-ui表格之相同数据合并单元格，动态生成

开始利用组件方法，没法动态生成，因此另辟蹊径，下边方法可以直接粘贴

// HTML
// 传参，调用方法
// 利用element ui 组件方法进行 设置合并单元格的规则
  <el-table
      border
      :data="props.row.details"
      :show-header="false"
      style="margin: 0"
      :span-method="(scope) => objectSpanMethod(scope, props)"
    >

 :span-method="(scope) => objectSpanMethod(scope, props)"，scope作用域，props绑定的数据。

//举个例子，帮助理解，这个和上边的代码要一个就可以，都是一个套路
<el-table
          @cell-click="handleCellClick"
          border
          :data="tableData"
          style="width: 1100px; margin-top: 10px"
          :span-method="(scope) => objectSpanMethod(scope, tableData)"
        >

// 处理合并列的方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }, data) {
      if (columnIndex < 5) {
//这里时只有前五列使用合并方法，如果全表格使用，可以删除这个判断
// data 就是从这里动态传过来的        
// 如果数据中有id，可以传id进行合并，更加准确
//var spanArr = this.getSpanArr(data, "id");
        var spanArr = this.getSpanArr(data, column.property);
        const _row = spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      } else {
        return;
      }
    },
    // 处理合并行的数据
    getSpanArr(data, spanKey) {
      var spanArr = [];
      var pos = "";
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][spanKey] === data[i - 1][spanKey]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },