element-ui的el-table怎么自定义合并表头

table自带合并属性：rowSpan和colSpan，所以合并表头的思路是：获取所有的表头单元格，针对性的对需要合并的单元格进行操作。

比如我们想要合并的是第二列和第三列，那么我们先获取到所有的表头，然后将第二列表头的colSpsn设为2，将第三列表头的display设为none。

data() {
    tableData: [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ],
},

methods: {
    setColSpan:function() {
      // console.log(document.getElementsByClassName("el-table__header"))
      // 获取表头的所有单元格
      var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      // 将第二列表头单元格的colSpan设为2
      x[1].colSpan = 2
      // 将第三列表头单元格的display设为none
      x[2].style.display = 'none'
    },
},
mounted() {
    // 注意一定要保证DOM渲染完成后在进行合并操作，否则会找不到元素
    this.$nextTick(function(){
      this.setColSpan();
    })
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201016211401445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU4ODgyMQ==,size_16,color_FFFFFF,t_70#pic_center)