Vue根据浏览器窗体变化动态设置Element Table组件的最大高度
Vue根据浏览器窗体变化动态设置Element Table组件的最大高度这个场景应该经常遇到,比如说在一个页面有一个table,想让他数据过多的时候自动出现滚动条而不至于冲到屏幕外被隐藏,如果表格下面还有换页的话,换页直接冲没了,所以需要计算这个table表格的最大高度。使用的是饿了吗Element组件库的table组件,有一个属性是 max-height ,设置表格的最大高度,高出自动出现纵向滚
·
Vue根据浏览器窗体变化动态设置Element Table组件的最大高度
这个场景应该经常遇到,比如说在一个页面有一个table,想让他数据过多的时候自动出现滚动条而不至于冲到屏幕外被隐藏,如果表格下面还有换页的话,换页直接冲没了,所以需要计算这个table表格的最大高度。
使用的是饿了吗Element组件库的table组件,有一个属性是 max-height ,设置表格的最大高度,高出自动出现纵向滚动条。
<el-table
:data="dataList"
:max-height="maxheight"
v-loading="loading"
class="table">
</el-table>
然后在data里面定义一个属性,就是 maxheight ,设置表格的最大高度。
data() {
return {
// 这个减195是除了表格还有50px其他的东西在这个页面所占的高度,比如下面的分页,上边的搜索啥的
maxheight: window.innerHeight - 50
}
}
这样的话,第一次进入页面,页面显示就可以了。但是有问题,就是当浏览器突然缩放或者是放大,放小,又会出问题。
这是由于在浏览器变化的时候没有重新计算高度导致的,我们需要在浏览器变化的时候重新计算一下高度然后给table赋值就可以了。
mounted () {
window.onresize = () => {
return (() => {、
this.maxheight = window.innerHeight - 50
})()
}
},
为保险,在actived钩子中也重新赋值一下。
activated () {
this.maxheight = window.innerHeight - 50
},
更多推荐
已为社区贡献45条内容
所有评论(0)