vue3 elementplus table表格高度自适应

最新推荐文章于 2025-10-28 15:42:41 发布

原创最新推荐文章于 2025-10-28 15:42:41 发布 · 7.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue3相关专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在Vue.js中实现表格高度动态调整的方法，通过监听窗口大小变化，根据表格元素的位置和浏览器窗口高度实时计算表格的高度，确保表格始终充满屏幕空间。此外，还展示了如何在表格中添加点击事件监听器，以实现行点击功能。

<el-table
      ref="tableRef"
      :data="tableData"
      stripe
      border
      :height="tableHeight"
      highlight-current-row
      @row-click="rowClick"
    >

// table元素
const tableRef = ref(null);
// table高度
const tableHeight = ref();

onMounted(() => {
  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
  tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85;
  // 监听浏览器高度变化
  window.onresize = () => {
    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85;
  };
});