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算法。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。