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

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

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

代码实现:

javascript 复制代码
<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" width="180" />
      <el-table-column prop="address" width="180" label="Address" />
      <el-table-column prop="address" width="180" label="Address" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup>
  import {reactive,ref,onMounted,onUnmounted,nextTick} from 'vue'

  let tableData = reactive([])
  let tableRef = ref(null)
  const tableHeight = ref()

  // 生成表格数据
  let tableDataList = []
  for(let i=0;i<50;i++){
    tableDataList.push({
      id: i + 1,
      date: '2024年3月19日',
      name: 'sy',
      address: 'address'
    })
  }
  tableData = tableDataList

  const computedHeight = () => {
    if (tableHeight.value) {
      tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 180
    }
  }

  onMounted(() => {
    nextTick(() => {
      tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 180
      window.addEventListener('resize', computedHeight)
    })
  })

  onUnmounted(() => {
    window.removeEventListener('resize', computedHeight)
  })

</script>

<style>
  .table-wrap{
    height: calc(100vh - 160px);
    border: 1px solid red;
    overflow: hidden;
  }
</style>

关于 window.innerHeight:

关于offsetTop:


相关推荐
给月亮点灯|1 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺1 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
lxh01132 小时前
LRU 缓存
开发语言·前端·javascript
wow_DG2 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...3 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See3 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
草字3 小时前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
局i4 小时前
ES6 类与继承:现代 JavaScript 面向对象编程
前端·javascript·es6
叫我詹躲躲4 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js