vue3中elementplus的table表格高度自适应

本文介绍了一种在Vue.js中实现表格高度动态调整的方法，通过监听窗口大小变化，根据表格元素的位置和浏览器窗口高度实时计算表格的高度，确保表格始终充满屏幕空间。

小夏同学呀

692人浏览 · 2024-09-20 15:56:59

小夏同学呀 · 2024-09-20 15:56:59 发布

<el-table
      ref="tableRef"
      :data="tableData"
      stripe
      border
      :max-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;
  };
});