table表格自定义表头以及 行合并

 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();
    })
}
 

动态合并

<!-- span-method 方法可以实现行合并和列合并    -->
    <el-table
      :data="tableData"
      :span-method="(...arg)=>strategySpanMethod(...arg,tableData)"
      border
      style="width: 1000px"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="180"
      />
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1"
      />
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2"
      />
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3"
      />
    </el-table>

主要处理函数

methods: {
    // / 合并单元格函数
    strategySpanMethod: function({ row, column, rowIndex, columnIndex }, data) {
      // data 就是从这里动态传过来的, column.property是表头的key
      var spanArr = this.getSpanArr(data, column.property)
      console.log('spanArr', spanArr)
      const _row = spanArr[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    // 处理合并行的数据
    getSpanArr: function(data, spanKey) {
      // var that = this
      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
    },

  }