vue监听div的变化，动态渲染表格的高度

最新推荐文章于 2024-08-06 17:57:29 发布

qq_46167326

最新推荐文章于 2024-08-06 17:57:29 发布

阅读量369

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_46167326/article/details/133749206

版权

文章讲述了在Vue.js应用中，如何通过`mounted`和`beforeDestroy`生命周期钩子管理表格组件的高度，使用`watchHeights`方法实时监听窗口大小变化，确保表格高度适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mounted() {
  // 初始化渲染表格高度
  this.initTableHeights
},
beforeDestroy() {
  window.removeEventListener('resize', this.watchHeights)
},
methods: {
  watchHeights() {
    const el = document.getElementById('main_select')
    this.maxHeight = window.innerHeight - el.offsetHeight - 210
  },
  initTableHeights() {
    // 获取表单初始高度
    const el = document.getElementById('main_select')
    this.maxHeight = window.innerHeight - el.offsetHeight - 210
    // 监听表单高度
    window.addEventListener('resize', this.watchHeights)
  }
}