Element-UI table的高度动态自适应 !_element ui table__body 高度-程序员宅基地
技术标签： vue
从官方文档，我们可以知道 table 想要设置高度，就必须在 table里面设置高度
但是，如果你只输入一个固定的值，那么table的高度就会固定死，达不到我们想要的动态的效果
因此，我们可以这样做
在height中 使用 window.innerHeight，返回窗口的文档显示区的高度（这是一个动态值，随着我们浏览器大小会变化）。
好了，到这里，小伙伴们是不是以为就结束了………才怪 !
虽然这时候，已经可以根据窗体大小，高度动态变化，但是，还要每次刷新才行……
所以，我们需要加一个监听器即可，监听窗体大小变化，一旦变化就执行方法重新设定height
// ↓在methods里面
getHeight () {
this.tableConfig.height = window.innerHeight - 159
}
// ↑在methods里面
// 窗体大小变化就执行getHeight方法即可
created () {
window.addEventListener('resize', this.getHeight)
},
destroyed () {
window.removeEventListener('resize', this.getHeight)
}
这里还有个需要注意的地方，就是修改下el-table的css，否则table会有很多留白，看起来体验不是很好
这里使用了/deep/ ，否则我们是修改不了 element自带的样式。
/deep/ .el-table {
.el-table__body{
height: 100%;
}
}
自此，就能达到table高度自适应的效果啦~~
还等什么? 快去试试吧！
智能推荐
计算机毕业设计Java疫情防控医用品管理(系统+源码+mysql数据库+Lw文档）_疫情防护用品销售管理系统 论文-程序员宅基地
文章浏览阅读467次。计算机毕业设计Java疫情防控医用品管理(系统+源码+mysql数据库+Lw文档）springboot基于SpringBoot的婚庆策划系统的设计与实现。JSP健身俱乐部网站设计与实现sqlserver和mysql。JSP网上测试系统的研究与设计sqlserver。ssm基于SpringMvC的流浪狗领养系统。ssm基于Vue.js的音乐播放器设计与实现。ssm校园流浪猫图鉴管理系统的设计与实现。_疫情防护用品销售管理系统 论文
android插件化开发打包，Android项目开发如何设计整体架构-程序员宅基地
文章浏览阅读988次，点赞28次，收藏28次。最后小编想说：不论以后选择什么方向发展，目前重要的是把Android方面的技术学好，毕竟其实对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！这里附上我整理的几十套腾讯、字节跳动，京东，小米，头条、阿里、美团等公司19年的Android面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。由于篇幅有限，这里以图片的形式给大家展示一小部分。
基于单片机数码管秒表控制系统设计-程序员宅基地
文章浏览阅读600次，点赞11次，收藏6次。*单片机设计介绍，基于单片机数码管秒表控制系统设计。
Python小程序之验证码图片生成_小程序图片验证码后端生成-程序员宅基地
文章浏览阅读235次。python小程序之验证码图片的生成定义随机字母的生成函数定义随机颜色生成函数，采用RGB格式，生成一个元组调用Image，生成画布，填充底色为白色调用画笔函数Draw，传入画布对象填充画布的每一个色块，作为背景在画布上控制间距，填上每一个字在最后的图上进行模糊操作代码# 生成一个随机的二维码小程序from PIL import Image,ImageDraw,ImageF..._小程序图片验证码后端生成
思科自防御网络安全方案典型配置_思科设备怎么ranga)服务器区域独立防护;-程序员宅基地
文章浏览阅读2.2k次。 1. 用户需求分析客户规模：客户有一个总部，具有一定规模的园区网络； 一个分支机构，约有20－50名员工； 用户有很多移动办公用户 客户需求：组建安全可靠的总部和分支LAN和WAN； 总部和分支的终端需要提供安全防护，并实现网络准入控制，未来实现对VPN用户的网络准入检查； 需要提供IPSEC/SSLVPN接入； 在内部各主要部门间，及内外网络间进_思科设备怎么ranga)服务器区域独立防护;
苹果账号迁移流程_apple 账号迁移-程序员宅基地
文章浏览阅读445次。4、转移账号生成的 p8 文件（证书文件）1、转移苹果账号的 teamID。2、接受苹果账号的 teamID。5、接受账号生成的 p8 文件。3、转移应用的 AppID。_apple 账号迁移
随便推点
深度学习中优化方法之动量——momentum、Nesterov Momentum、AdaGrad、Adadelta、RMSprop、Adam_momentum seg-程序员宅基地
文章浏览阅读1k次。https://blog.csdn.net/u012328159/article/details/80311892_momentum seg
动态数据生成静态html页_监听数据变更自动生成静态html-程序员宅基地
文章浏览阅读816次。主要的原理就是替换模板里的特殊字符。 1、静态模板页面 template.html，主要是定义了一些特殊字符，用来被替换。 HTML code DOCTYPE HT_监听数据变更自动生成静态html
预防按钮的多次点击 恶意刷新-程序员宅基地
文章浏览阅读494次。 今日在做一个新闻系统的评论时. 想到了预防"提交"按钮的多次点击的问提 (prevent multiple clicks of a submit button in ASP.NET). 以前碰到此类问提总是用重定位页面来解决. 这次我想找到一个一劳永逸的办法. 通过查讯Google,找到了一些代码,挑选一些较好的修改了一下。public void pa
sokcs5软件dante配置指南_dante 代理 配置pam用户名密码 模式-程序员宅基地
文章浏览阅读4.7k次。近来公司业务有需要做socks5代理的需求，研究了一下，主要的开源实现有2个:dante http://www.inet.no/dante/ss5 http://ss5.sourceforge.net/比较了一下，还是比较倾向于dante,因为看到有人这样评价ss5：Project has an incredibly poor source code quality. Th_dante 代理 配置pam用户名密码 模式
Excel vba 求助。_vba countifs 源码-程序员宅基地
文章浏览阅读809次。在excel vba 中用到countifs 函数，但用来统计带有特殊符号* 时总是统计chu_vba countifs 源码
web前端基础——实现动画效果_web前端实现图片动画效果-程序员宅基地
文章浏览阅读2.6k次。当两个效果之间变换时，可以使用transition过渡属性，但是有多个效果来回变换时，就需要使用动画效果,且动画过程可控（重复播放，画面暂停，最终画面等）文章目录1、简介2、实现步骤3、复合属性animation4、动画属性1、简介动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面构成动画的最小单元：帧或者动画帧2、实现步骤定义动画@keyframes 动画名称{ from{} to{}}@keyframes 动画名称{ 0%{} 10%{} 20%{} 50._web前端实现图片动画效果