【小白成长记】页面上表格高度需根据页面高度进行动态计算赋值

原创

于 2024-03-19 15:26:01 发布 · 563 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue3项目，页面上的表格高度需要根据页面高度变化进行动态计算赋值，实现如下。

如下图表格，其父元素（红框元素）高度不是具体值，表格需要设置一个最大高度以便超出后显示滚动条，同时确保页面高度变化时（浏览器窗口大小改变）表格高度动态计算。

在这里插入图片描述

代码实现：

<template>
  <div class="table-wrap">
    <el-table ref="tableRef" :data="tableData" :max-height="tableHeight" style="width: 80%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name"