1.判断表格的数据是否为空
<el-table ref='table' :class='{"is-empty":!tableData.length}' :data='tableData' height='100%' border >
<div slot='empty' class='empty'><img src='../../../assets/img/contract/no-data.png' alt=''></div>
</el-table>
2.在mount里面添加滚动条事件
mounted() {
// 获取需要绑定的table
this.dom = this.$refs.table.bodyWrapper
this.dom.addEventListener('scroll', () => {
// 横向滚动距离
let scrollLeft = this.dom.scrollLeft
// 获取伪元素
let scrollBar = document.getElementsByClassName('el-table__empty-block')[0]
scrollBar.style.left = scrollLeft + 'px'
})
},
3.表格空图片样式
::v-deep {
.is-empty {
.el-table__body-wrapper {
position: relative;
.el-table__empty-block {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
.el-table__empty-text {
width: 100% !important;
height: 100% !important;
.empty {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
}