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

最新推荐文章于 2024-09-24 10:50:41 发布

小夏同学呀

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量162

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web5219/article/details/142387769

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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