Vue笔记-浏览器窗口改变时,重新计算表格高度并设置

当窗口大小改变时,你监听 window 对象的 resize 事件,然后在事件处理程序中重新计算表格的高度。在 Vue 中,可以在组件中通过 created 生命周期钩子来添加事件监听器,然后在组件销毁时移除事件监听器。

如下vue代码:

javascript 复制代码
<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    ref="table"
  >
    <!-- 表格内容 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 假设这是你的表格数据
      tableHeight: 0 // 初始高度为0
    };
  },
  created() {
    this.calculateTableHeight(); // 初始化时计算表格高度
    window.addEventListener('resize', this.handleResize); // 添加窗口大小改变事件监听器
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize); // 在组件销毁前移除事件监听器
  },
  methods: {
    calculateTableHeight() {
      // 这里可以根据需要动态计算表格的高度
      // 例如,获取窗口高度的一定比例等等
      this.tableHeight = window.innerHeight * 0.9; // 将表格高度设置为窗口高度的90%
    },
    handleResize() {
      // 窗口大小改变时触发的事件处理程序
      this.calculateTableHeight(); // 重新计算表格高度
      // 还可以根据需要重新加载表格数据等操作
    }
  }
};
</script>

在这个示例中,在 created 生命周期钩子中添加了窗口大小改变事件的监听器,并在 beforeDestroy 钩子中移除了监听器,以避免内存泄漏。当窗口大小改变时,handleResize 方法会被调用,重新计算表格的高度并更新视图。

相关推荐
周周记笔记3 分钟前
学习笔记:第一个Python程序
笔记·学习
丑小鸭是白天鹅5 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
潘达斯奈基~6 分钟前
《大数据之路1》笔记2:数据模型
大数据·笔记
萌萌哒草头将军9 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
..过云雨19 分钟前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习
Qlittleboy33 分钟前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
咸甜适中34 分钟前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui
一又四分之一.43 分钟前
高数基础知识(下)②
笔记
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js