ElementUI列表无数据提示问题

背景：

VUE + Element-UI

需求：

列表无数据时的显示如下图

1.png

由于列表的列数过长导致有横向滚动条出现，希望暂无数据以及这个img能够显示在滚动条与表头之间。

现状：

目前的实现形式是将暂无数据的提示封装为一个组件，无数据时显示在滚动条的下方，如下图

2.png

解决思路：

（1）修改el-table的源码，当data无数据时，按照我们需要的样子显示

（2）在表头与滚动条之间动态的挂载和删除node节点

采取的解决方案：

考虑到波及面小的关系，本项目暂时使用第二种动态挂载节点的方式。

具体的代码实现：

watch: {
      showNoData : {
        handler(val) {
          let yy = `<img data-v-245b79d0="" 
                         src="youimgsrc"> 
                    <div data-v-245b79d0="" class="tips-big">暂无数据</div>`
          let div2 = document.createElement("div");
          div2.setAttribute('data-v-245b79d0', '');
          div2.setAttribute('data-v-2014920a', '');
          div2.className = 'no-data-big showtip';
          div2.innerHTML = yy;
          if(this.showNoData && this.count <= 0) {
            this.count++;
            document.getElementsByClassName('el-table__header-wrapper')[0].appendChild(div2);
          }else if(document.getElementsByClassName('showtip').length){
            this.count--;
            document.getElementsByClassName('el-table__header-wrapper')
            [0].removeChild(document.getElementsByClassName('showtip')[0]);
          }
        }
      }
    },

简单解释：

代码中的div2就是需要动态挂载的node节点，利用showNoData判断是否没有数据，利用count防止不断的添加相同节点。