获取 table 距离窗口上方的高度（有深度的文章）

import { ref, nextTick, computed, onBeforeUnmount } from 'vue'
export default function (tableRef, bottomHeight = '80px') {
  const topHeightVal = ref('400')
  nextTick(() => {
    topHeightVal.value = tableRef.value.$el.getBoundingClientRect().top
  })
  window.onresize = function () {
    topHeightVal.value = tableRef.value.$el.getBoundingClientRect().top
  }
  const topHeightValCom = computed(() => {
    return `calc(100vh - ${topHeightVal.value}px - ${bottomHeight})`
  })
  onBeforeUnmount(() => {
    window.onresize = undefined
  })
  return topHeightValCom
}

import { ref, nextTick, computed, onBeforeUnmount } from 'vue'
export default function (tableRef, bottomHeight = '80px') {
  const topHeightVal = ref('400')
  // 防止获取不到 top
  nextTick(() => {
    nextTick(() => {
      topHeightVal.value = tableRef.value.$el.getBoundingClientRect().top
    })
  })
  window.onresize = function () {
    topHeightVal.value = tableRef.value.$el.getBoundingClientRect().top
  }
  // 设置高度 (需要等待页面渲染完毕)
  function setTopHeight() {
    nextTick(() => {
      topHeightVal.value = tableRef.value.$el.getBoundingClientRect().top
    })
  }
  const topHeightValCom = computed(() => `calc(100vh - ${topHeightVal.value}px - ${bottomHeight})`)
  onBeforeUnmount(() => {
    window.onresize = undefined
  })
  return { topHeightValCom, setTopHeight }
}