一、效果
二、代码
<script>
export default {
data () {
return {
maxHeight: 500
}
},
methods: {
handlePageReSize () {
let card = document.querySelector('.el-card');
this.maxHeight = card.clientHeight - 108;
}
},
mounted () {
let _this = this;
window.onresize = () => {
return (() => {
_this.handlePageReSize();
})();
};
this.$nextTick(() => {
//必须放在this.$nextTick里,不然表格动态高度及滚动条滑至最右有可能不生效
this.handlePageReSize();
//进入页面就让表格的横向滚动条滑至最右
this.$refs.table.bodyWrapper.scrollLeft = Number(this.$refs.table.bodyWidth.replace('px',''));
});
},
destroyed () {
window.onresize = null;
}
}
</script>