eltable 无数据文案修改_ElementUI列表无数据提示问题

背景：

VUE + Element-UI

需求：

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

1.png

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

现状：

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

2.png

解决思路：

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

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

采取的解决方案：

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

具体的代码实现：

watch: {

showNoData : {

handler(val) {

let yy = `

src="youimgsrc">

暂无数据

`

let div2 = document.createElement("div");

div2.setAttribute('data-v-245b79d0', '');

div2.setAtt