el-table暂⽆数据居中，不随滚动条滚动
前⾔：最近做项⽬遇到⼀个问题，表头过长产⽣的横向滚动条，暂⽆数据会随滚动条⽽滚动，从效果上⾮常不好。其次是客户希望定制属于⾃⼰风格的暂⽆数据页⾯。
分析：
（1）table⾃带的暂⽆数据外层包了两层div，宽度是实际长度，若强⾏更改，横向滚动条会消失
（2）若在table外⾯声明⼀个暂⽆数据的div，通过定位来实现此功能，可能会⽆法适当撑开table的⾼度
（3）因此选择动态添加⼀个⾃⼰定义的模块，通过修改其样式达到⽬的
解决⽅案：
CommonTableNodData(tableData,height){
let top=getPercent((ElementsByClassName('el-table__header')[0].offsetHeight-
120)/ElementsByClassName('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(-html横向滚动条样式
50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%) ' src=+require("../../../assets/images/nodata.png")+>
let div2 = ateElement("div");
div2.setAttribute('style', 'text-align: center;height: 120px;');
div2.className = 'no-data-big showtip';
div2.innerHTML = yy;
if(tableData.length==0 ) {
ElementsByClassName('showtip').length){
[0].ElementsByClassName('showtip')[0]);
}
}else ElementsByClassName('showtip').length){
[0].ElementsByClassName('showtip')[0]);
}
} ;
使⽤⽅法：
（1）使⽤的table添加全局class='no-table-center'，隐藏原有的暂⽆数据
（2）引⽤此⽂件中的CommonTableNodData⽅法
（3）在⾃⼰的页⾯中监听tableData（表格数据）的变化
watch:{
tableData : {
handler(val) {
CommonTableNodData(val,300);
}
}
},
height：表格⾼度，若有⾼度，传进去，⽆默认为30%（⽤于保证垂直居中）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。