vue设置表格高度自适应

 


data(){
        return {
            gloable_screenHeight: 0,//浏览器窗口的文档显示区的高度
            gloable_tableHeight: null,//table的高度
        }
    },
    watch: {
        // '$data': {
        //     handler(newVal, oldVal) {
        //         let param = {
        //             path    : window.location.href,
        //             data    : this.$data
        //         }
        //         this.$store.dispatch('setCache',param);
        //     },
        //     // immediate: true,
        //     deep: true
        // },
        gloable_screenHeight: {
            handler(n, o) {
                
              // 初始化表格高度
              if (n) {//监听窗口的ping文档显示区的高度的变化（90，15，39，50）分别代表分页的高度+padding:20+margin:20，section的padding:15，底部footer的高度39，顶部header的高度50
                 //设计原理为文档显示区的高度=(分页类的高度)+table高度+section的padding+底部footer的高度+顶部header的高度
            this.gloable_tableHeight =
                  n -
                  90-15-39-50+
                  "px";
              }
            },
              immediate: true,
              deep: true
          }
    },
    mounted() {//第一次获取文档显示区的高度的变化
        this.gloable_screenHeight = window.innerHeight;
    },
    updated(){//实时监测文档显示区的高度的变化
        window.onresize = () => {
        return (() => {
          this.gloable_screenHeight = window.innerHeight;
        })();
      };
    },