vue中基於vuex根據可視區窗口動態設置表格的高度

//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>