浏览器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>