2021-10-18

table 表格根据屏幕大小变化，自适应最大高度
1、模板中定义：

2、data 中定义：
data() {

return {

        tableHeight: 200, // 想写多少就写多少，后面会获取到值替换掉 

}

3、生命周期 mounted 和 destroyed
mounted () {

     this.$nextTick(function () {

             this.tableHeight =  document.body.offsetHeight  - 320;

              // 监听窗口大小变化      

               let self = this;     

              window.onresize = function () {

              self.tableHeight = window.innerHeight - 320;

    }

});

destroyed () {

window.onresize = null

}

贴出 JS 获取页面高度：

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth

网页可见区域高：document.body.offsetHeight

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop(IE7无效)

网页被卷去的左：document.body.scrollLeft(IE7无效)

网页被卷去的高：document.documentElement.scrollTop(IE7有效)

网页被卷去的左：document.documentElement.scrollLeft(IE7有效)

获取窗口的宽度:window.innerWidth(不包含工具条与滚动条)

获取窗口的高度:window.innerHeight(不包含工具条与滚动条)

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width