vue3 elementplus table 高度自适应的两种方法

Thekingyu

已于 2022-04-21 16:52:27 修改

阅读量5.4k

点赞数 1

分类专栏： vue+apicloud 文章标签： vue3 vite

于 2022-04-14 11:31:57 首次发布

本文链接：https://blog.csdn.net/Thekingyu/article/details/124167885

版权

vue+apicloud 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文探讨了前端开发中如何实现表格的固定表头和动态内容区域滚动，利用`onMounted`和`window.resize`事件监听窗口大小变化，调整表格高度。同时提醒开发者注意同页面多个组件时可能遇到的冲突问题，并推荐使用 vh 单位来精确计算元素高度，确保页面响应式布局的顺畅。

摘要由CSDN通过智能技术生成

 ref="tables"

 
const tables=ref()
const tableHeight=ref()

//引入 onMounted
onMounted(() => {
  tableHeight.value = window.innerHeight - tables.value.$el.offsetTop - 100
   window.onresize = function() {
     tableHeight.value = window.innerHeight - tables.value.$el.offsetTop - 100
   }
})

table height属性给值后表头固定中间可以滑动

使用上述方法请注意 onresize 方法只能生效一个兄弟组件都用的话只会生效一个

建议还是用 vh 减去已占用的高度 calc(100vh-xxPX)