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

应用代码如下

//声明属性和初始值
vTableHeight:'300px',

//组件高度属性绑定变量
:height="vTableHeight"

//页面挂载完成事件函数内运行初始化高度代码
mounted () {

    //这里不延时运行会出现getBoundingClientRect获取的为非最终位置
    setTimeout(this.initTableHeight,1000);
  }

 

//自适应表格高度函数实现
        initTableHeight:function (){
            //this.$refs.myTable.$el.getBoundingClientRect().top：表格距离浏览器的高度
            this.$nextTick(function () {
                this.vTableHeight = (window.innerHeight - this.$refs.myTable.$el.getBoundingClientRect().top) - 2;
                // 监听窗口大小变化
                let self = this;
                window.onresize = function () {
                    self.vTableHeight = (window.innerHeight - self.$refs.myTable.$el.getBoundingClientRect().top) - 2;
                };
            });
        }