element el-table 高度自适应

element el-table 高度自适应

解决el-table的高度不能适应不同电脑的分辨率，也不能跟随浏览器的高度变化而变化的问题

效果：

前言

在这台电脑开发时设置了el-table的高度为500px，但是在小电脑，就看不到table后面几条数据了，浏览器高度缩小后，也看不到table后面几条数据。怎么让el-table的高度可以跟随变化呢？这篇文章的重点就是这个了。

一、解决思路

利用以下几点解决：
1.el-table的max-height属性
2.css的calc算法
3.dom的clientHeight
4.window.onresize

二、使用步骤

1.在el-talbe设置max-height

 :max-height="tableHeight"

2.在data定义 tableHeight

 tableHeight:600,  //表格的最大高度

3.设置el-table外部的div高度为动态高度

 .content {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100% - 3rem);
}

4.利用div的clientHeight获取该div的高度，设置tableHeight为此高度

mounted(){
  //获取容器当前高度，重设表格的最大高度
  this.getTableMaxHeight(); 
  let _this = this;
  window.onresize = function () {//用于使表格高度自适应的方法  
      _this.getTableMaxHeight();//获取容器当前高度，重设表格的最大高度
  }
  },
methods: {
  //获取容器当前高度，重设表格的最大高度
  getTableMaxHeight(){
    this.$nextTick(function () {
      let box = document.querySelector(".content").attributes
      let box_clientHeight = box[0].ownerElement.clientHeight;
      this.tableHeight = box_clientHeight - 100;
    })
  },
}

-------------------------------------手动分割线

还是太年轻了，其实完全可以很简单的一个参数就能搞定全部：
height=“calc(100% - 10rem)”
就是sass基础 很简单的calc算法。