浏览器F11全屏效果
全屏.jpg
浏览器窗口缩小效果
小屏.jpg
1.结合Vuex 来保存状态，路由跳转到别的表格时，保证当前高度是自适应后的高度
export default {
state: {
getHeigth:0 ,//表格高度
},
getters: {
},
mutations: {
setHeigth(state, num){
console.log( ((num.split('px')[0]) - 100 ))
state.getHeigth = ((num.split('px')[0]) - 240 );
}
},
actions: {
}
}
2.在Element 的 el-table 组件上绑定 height
<template>
<div ref = "getHeight">
<el-table ref="multipleTable" :data="tableData" :height="getHeigth" >
<el-table-column type="selection" ></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed: {
getHeigth () {
return this.$store.state.app.getHeigth
}
},
mounted(){
const that = this
this.$store.commit("setHeigth", window.getComputedStyle(that.$refs.getHeight).height);
window.onresize = () => {
this.$store.commit("setHeigth", window.getComputedStyle(that.$refs.getHeight).height);
}
},
},
}
</script>
