前言：最近做項目遇到一個問題，表頭過長產(chǎn)生的橫向滾動條，暫無數(shù)據(jù)會隨滾動條而滾動，從效果上非常不好。其次是客戶希望定制屬于自己風格的暫無數(shù)據(jù)頁面。
分析：
（1）table自帶的暫無數(shù)據(jù)外層包了兩層div，寬度是實際長度，若強行更改，橫向滾動條會消失
（2）若在table外面聲明一個暫無數(shù)據(jù)的div，通過定位來實現(xiàn)此功能，可能會無法適當撐開table的高度
（3）因此選擇動態(tài)添加一個自己定義的模塊，通過修改其樣式達到目的
解決方案：
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',隱藏原有的暫無數(shù)據(jù)
（2）引用此文件中的CommonTableNodData方法
（3）在自己的頁面中監(jiān)聽tableData（表格數(shù)據(jù)）的變化
watch:{
tableData : {
handler(val) {
CommonTableNodData(val,300);
}
}
},
height:表格高度，若有高度，傳進去，無默認為30%（用于保證垂直居中）