vue页面表格组件高度控制

//浏览器窗口内部高度
console.log("window.innerHeight",window.innerHeight);
console.log("document.clientHeight",document.documentElement.clientHeight);
console.log("body.clientHeight",document.body.clientHeight);
//获取vue组件元素的高度
console.log('queryPanelHeight',self.$refs.queryPanel.$el['offsetHeight']);
//获取表格在浏览器内的位置坐标
console.log('tableRect',self.$refs.tableGrid.$el.getBoundingClientRect());

应用代码如下

mounted () {
            this.tableHeightChange();
        }

tableHeightChange:function (){
                //this.$refs.queryConditionRef.$el.getBoundingClientRect().top：表格距离浏览器的高度
                this.$nextTick(function () {
                    this.outPatientsTableHeight = (window.innerHeight - this.$refs.tableGrid.$el.getBoundingClientRect().top);
                    // 监听窗口大小变化
                    let self = this;
                    window.onresize = function () {
                      self.tableHeight = (window.innerHeight - self.$refs.tableGrid.$el.getBoundingClientRect().top) ;
                    };
                });
            }