前言：最近做项目遇到一个问题，表头过长产生的横向滚动条，暂无数据会随滚动条而滚动，从效果上非常不好。其次是客户希望定制属于自己风格的暂无数据页面。
分析：
（1）table自带的暂无数据外层包了两层div，宽度是实际长度，若强行更改，横向滚动条会消失
（2）若在table外面声明一个暂无数据的div，通过定位来实现此功能，可能会无法适当撑开table的高度
（3）因此选择动态添加一个自己定义的模块，通过修改其样式达到目的
解决方案：
CommonTableNodData(tableData,height){
let top=getPercent((height-document.getElementsByClassName('el-table__header')[0].offsetHeight-120)/2+document.getElementsByClassName('el-table__header')[0].offsetHeight,300,true);
let yy = <img style='position:absolute; left: 50%; top: ${height?top:'30%'}; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%) ' src=+require("../../../assets/images/nodata.png")+>
let div2 = document.createElement("div");
div2.setAttribute('style', 'text-align: center;height: 120px;');
div2.className = 'no-data-big showtip';
div2.innerHTML = yy;
if(tableData.length==0 ) {
if(document.getElementsByClassName('showtip').length){
document.getElementsByClassName('el-table__header-wrapper')
[0].removeChild(document.getElementsByClassName('showtip')[0]);
}
document.getElementsByClassName('el-table__header-wrapper')[0].appendChild(div2);
}else if(document.getElementsByClassName('showtip').length){
document.getElementsByClassName('el-table__header-wrapper')
[0].removeChild(document.getElementsByClassName('showtip')[0]);
}
} ;
使用方法：
（1）使用的table添加全局class='no-table-center',隐藏原有的暂无数据
（2）引用此文件中的CommonTableNodData方法
（3）在自己的页面中监听tableData（表格数据）的变化
watch:{
tableData : {
handler(val) {
CommonTableNodData(val,300);
}
}
},
height:表格高度，若有高度，传进去，无默认为30%（用于保证垂直居中）
el-table暂无数据居中，不随滚动条滚动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1.The forest teems with life. Whether up in the tree tops...
