vue3 elementplus table表格高度自适应

最新推荐文章于 2024-07-22 10:21:38 发布

Beesia

最新推荐文章于 2024-07-22 10:21:38 发布

阅读量6.7k

点赞数 9

分类专栏： vue3相关文章标签： vue elementui

本文链接：https://blog.csdn.net/niyooooo/article/details/124188667

版权

vue3相关专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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

<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;
  };
});