table表头合并

我的目标是合并前两列表头,如下:

遇到问题当然首选查看官网api,幸运的是官网有类似的api:

但是在尝试了一番后,发现会多出一行:

一顿操作后,没找到解决办法,于是放弃官网,改投百度,搜到解决办法:

原理主要是在dom加载完之后,通过设置对应列的colspan属性即可.

colspan我是知道的,之前有过html基础,于是决定试试:

headerClass() {
      var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      console.log(x)
      x[0].colSpan = 2
      x[1].style.display = 'none'
    },

mounted() {
    this.$nextTick(function () {
      this.headerClass();
    })
  }

mounted是vue的生命周期函数,不再赘述,$nestTick这个东西之前没见过,值得学习一下,一顿百度学习后,知识点+1

理解: vue的dom渲染是异步进行的,当数据修改后会放入异步队列,等待同一时间的所有数据都变完之后,经过一番去重等处理再渲染dom,属于一种优化策略,但是同时也带来了一个问题,即使用原生js的方式来操作dom时,有可能存在dom还没渲染完的情况,而这个$nextTick()就是解决这个问题的.

$nextTick()中的执行时机为dom渲染完成后再执行.

经过上面的一顿操作,结果果然有效.

可以总结了:

$nextTick()的执行时机为dom渲染结束后,如果要做一些操作dom元素的行为,最好放入此函数,避免出现无效问题.
要抛弃vue多么深奥的理念,不能给自己制造心理障碍,其实实现此功能的原理很简单,只是一个rowspan属性就可以解决.
elemenui应该也有支持的方法,还要深入研究以下官网api

elementui表格表头合并

table表头合并