1. Get Height

• document.body 表示文档中body元素

• document.documentElement表示文档的根元素，即html元素

• clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度

• offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度

• scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight 表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。

2. onresize

www.runoob.com/jsref/event…

每次屏幕尺寸變更都會觸發

<template>
    <span id="sourceHeight" />
    <el-table
        :data="data"
        :height="height"
      >
    </el-table>
</template>

const hegiht = ref();

onresize = () => {
  const sourceHeight = document.querySelector("#sourceHeight")?.clientHeight
  if(sourceHeight == 0){
    height.value = document.querySelector("#initialHeight")?.clientHeight
  }else{
    height.value = treeHeight
  }
}

3. useResizeObserver

vueuse.nodejs.cn/core/useRes…

<script setup>
import { ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'

const el = ref(null)
const text = ref('')

useResizeObserver(el, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
})
</script>

<template>
  <div ref="el">
    {{ text }}
  </div>
</template>