//1.在指定页面,如admin.vue时触发获取可视区的宽高
import { mapActions } from "vuex";
data(){
return {
windowLock:false,
}
},
created() {
const refreshWindow = _ => {
this.setInnerHeight(window.innerHeight); //获取并设置可视区的高
};
refreshWindow();
window.onresize = _ => { //每次可视区窗口变动时触发重新设置可视区的宽高
if (!this.windowLock) { //设置开关,避免可视区变动过程中频繁触发设置宽高
this.windowLock = true;
window.setTimeout(_ => {
refreshWindow();
this.windowLock = false;
}, 100);
}
};
},
methods:{
...mapActions ([
"setInnerHeight",
]),
}
//在src/store.js中
const store = new Vuex.Store({
actions:{
setInnerHeight(state, number) {
state.inner_height = number;
},
},
mutations:{},
getters:{
innerHeight: state => state.inner_height
},
modules:{
},
state:{
inner_height:0
}
}
export default store;
//在需要的表格中根据可视区的高度变动 动态设置表格的高度
<el-table
:data="tableData"
border
:height='tableHeight'
style="width: 100%">
</el-table>
<script>
import {mapGetters} from 'vuex'
export default{
computed:{
...mapGetters([
'innerHeight',
]),
tableHeight(){
return innerHeight-50
}
}
}
</script>