1、合并相同數據的行

效果圖如下，合并相同名稱的行

代碼如下：

data(){
		return{
			tableData1:[{a:6},{a:12},{a:7},{b:6},{b:7},{c:44}]
		}
}

?在el-table頭中加入:span-method="arraySpanMethod"，span-method：合并行或列的計算方法

<el-table
          :data="tableData1"
          border
          :span-method="arraySpanMethod" //官網介紹有，綁定:span-method事件，使用arraySpanMethod方法去響應，做出處理
          style="width: 100%"
          class="el-table__header_er"
          ref="tableDon"
       >

// 合并列篩選
    flitterData (arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          if (item && arr[index - 1] && item.a === arr[index - 1].a) { // 第一列需合并相同內容的判斷條件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      }
    },
    // 合并相同列
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let data = [];
        data = this.tableData1;
        const _row = (this.flitterData(data).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

2、自定義合并表頭

table自帶合并屬性：rowSpan和colSpan，所以合并表頭的思路是：獲取所有的表頭單元格，針對性的對需要合并的單元格進行操作。類似下面這種表頭的合并

?比如我們想要合并的是第n列和第n+1列，那么我們先獲取到所有的表頭，然后將第n列表頭的colSpsn設為2，將第n+1列表頭的display設為none。

備注：
1、el-table__header：是你table的class名，自定義，也可以使用vue中的ref去定義，然后使用this.$refs.xxx去拿到
2、.rows[0]是拿到table的第一行（rows行）
3、cells：中文的意思是:單元格。就是我們獲取一行（rows）后,這一行中有多少單元格，一行中所有的單元格集合，可以理解cells為這個行的第幾列
4、colSpan ：跨多少列（單元格自帶的屬性）
5、display：none可以隱藏某個元素，且隱藏的元素不會占用任何空間。該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

methods: {
    setColSpan:function() {
      //this.$refs.el-table__header
      // console.log(document.getElementsByClassName("el-table__header"))
      // 獲取表頭的所有單元格
      let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      // 將第二列表頭單元格的colSpan設為2
      n[1].colSpan = 2
      // 將第三列表頭單元格的display設為none
      n[2].style.display = 'none'
    },
},


mounted() {
    // 注意一定要保證DOM渲染完成后在進行合并操作，否則會找不到元素
    this.$nextTick(function(){
      this.setColSpan();
    })
}