0
点赞
收藏
分享

微信扫一扫

Vue根据浏览器窗体变化动态设置Element Table组件的最大高度

Yaphets_巍 2022-05-06 阅读 98

使用的是饿了吗Element组件库的table组件,有一个属性是 max-height ,设置表格的最大高度,高出自动出现纵向滚动条。

<el-table

:data=“dataList”

:max-height=“maxheight”

v-loading=“loading”

class=“table”>

然后在data里面定义一个属性,就是 maxheight ,设置表格的最大高度。

data() {

return {

// 这个减195是除了表格还有50px其他的东西在这个页面所占的高度,比如下面的分页, 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 上边的搜索啥的

maxheight: window.innerHeight - 50

}

}

这样的话,第一次进入页面,页面显示就可以了。但是有问题,就是当浏览器突然缩放或者是放大,放小,又会出问题。

这是由于在浏览器变化的时候没有重新计算高度导致的,我们需要在浏览器变化的时候重新计算一下高度然后给table赋值就可以了。

mounted () {

举报

相关推荐

0 条评论