Vue根据浏览器窗体变化动态设置Element Table组件的最大高度
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
},
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡