el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条

根据element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css，如：

max-height:calc(100vh - 40px)
//或者
max-height:calc(100% - 40px)

受网友启发，实现思路：

通过js计算表格的最大高度，然后将高度数值传给el-table的max-height属性，上代码：

html：

<el-table ref="table" :data="info" :max-height="tableHeight">
...
</el-table>

js：

<script>export default {data() {return {tableHeight: 0}},mounted() {this.tableHeight = window.innerHeight - 50;// 后面的50：根据需求空出的高度，自行调整},...
}
</script>

亲测，不行。。。网上大部分这个答案，但确实不行

于是，我看了下源码，发现el-table的max-height是有做监听的，所以，后期确实可以更改值，思路是对的，经过几番折腾，加上nextTick就可以了：

<script>export default {data() {return {tableHeight: 0}},mounted() {this.$nextTick(() => {this.tableHeight = window.innerHeight - 50;//后面的50：根据需求空出的高度，自行调整})},...
}
</script>

好啦，我觉得这个方式也不是特别完美，完美的做法是：提个issue，让element-ui可以支持max-height接收除px和数值之外的其他css，如：max-height:calc(100vh - 40px)。

番外：

更优雅的解决方案：

该方案只适用于element-ui2.7.2及以下的版本，2.8.0及以上max-height不支持百分百，只支持px和数值，是因为官网为修复该issue

现在发现max-height的合法的值除了数字或者单位为 px ，还可以是百分比，例如：max-height=“100%”这样设置是可以的。所以响应的动态设置el-table的max-height，我有了更优雅的解决方案，无需js，纯css，亲测有效：

<style lang="scss">.wrapper{height: calc(100% - 40px);}
</style>...<div class="wrapper"><el-table ref="table" :data="info" max-height="100%">...</el-table>
</div>

至于2.8.0及以上的版本，第一种方案依然有效，如果你有更好的方案，欢迎评论~

el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条相关推荐

根据屏幕大小动态设置字体rem
//根据屏幕大小动态设置字体rem var docEl = document.documentElement,//当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时,//注意现在当浏览器 ...
android 背景图片自适应屏幕大小,android 设置桌面背景图片适应屏幕大小
今天做demo,设置桌面每天自动更新背景,但是桌面的背景都是被系统裁剪过的图片,上网百度了一下,有个过时的方法,改进后果然有用了! Bitmap bmp=BitmapFactory.decodeRes ...
Android根据屏幕大小动态适配GridView
前言: 最近有个需求上面有图片,下面是个类似九宫格的列表,列表下面还有文字,刚开始只有3列还可以布满,后面改了需求有4列,在小屏手机就没有铺满,第4列看不到了,修改图片和文字长宽也没适配,后面想到利用 ...
VirtualBox - 自动调整屏幕大小，设置虚机自适应显示器
在VirtualBox中安装了Ubuntu后,Ubuntu的屏幕调整不太好,操作起来非常不方便,需要安装Vbox的增强功能.我使用的VirtualBox是5.0.24版本,具体操作如下: 1, 在 ...
android 动态让控件超出屏幕_android 动态设置屏幕控件宽高度
获取屏幕宽高度: WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); Displ ...
html怎么设置列表显示图片,网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式_html/css_WEB-ITnose...
1 2 3 4 5 示例 6 7 8 9 10 11 12 1314 15 16 17 1822 2327 2832 3337 3839404344 45 1 img 2 { 3 border: 0; ...
video 视频标签自适应屏幕大小（设置封面自适应屏幕）
<div class="videoContent"><video src="视频地址" autoplay loop mutedpreload= ...
移动端开发使用rem时动态设置html的字体大小
1.动态设置html的字体大小移动端开发时习惯使用rem单位,而rem是基于根html的字体大小的,为了适配不同尺寸屏幕需要动态设置html字体的大小.我们一般习惯于设置html的字体大小是基于iP ...
html页面一个屏幕大小不一样,关于web页自动适配屏幕大小
一.先了解下html5的viewport使用随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...

el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条

亲测，不行。。。网上大部分这个答案，但确实不行

el-table 根据屏幕大小动态设置max-height来自适应表格的最大高度出现滚动条相关推荐

最新文章

热门文章