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) ;
                    };
                });
            }