列表高度根据页面高度自适应

自适应前的列表问题：

1、列表底部与页面底部有一定距离，页面不美观；

2、将页面进行缩放拖动，列表高度为固定，不会自适应；

自适应前的列表.png

解决办法：

HTML

给列表一个动态高度参数

<el-table :height="tableHeight">
</el-table>

data

data(){
    return{
        tableHeight: ""
    }
}

methods

获取动态高度函数方法

getTableHeight(num) {
    const tableH = num ? 120 + num : 120   // 因为头部还有导航等功能的盒子占位，所以将其高度减掉
    this.tableHeight = window.innerHeight - tableH
},

mounted

mounted(){
    // resizeFlag表示是否可缩放以及是否可拖拽
    const that = this
    window.onresize = () => {
      if (that.resizeFlag) {
        clearTimeout(that.resizeFlag)
      }
      that.resizeFlag = setTimeout(() => {
        that.getTableHeight()
        that.resizeFlag = null
      }, 100)
    }
}

最后created创建

created() {
    this.getTableHeight()
  },

最终效果：

哪怕导航位置有筛选组件展开，列表也会相应增加或减少自己的高度，达到自适应效果。

自适应高度列表.png