Vue如何遍历数组在固定高度容器内渲染条目至占满空间且支持响应式

你初始的计算思路可行，但只靠字体高度算容量会有误差——条目内边距、边框、内容换行带来的高度变化都会导致计算结果不准，下面两种方案都能满足需求，且原生支持响应式适配。

方案1：DOM实测法（适配任意高度条目，准确率100%） #

不依赖预设的条目高度，通过实际DOM测量计算可容纳条目数，哪怕条目内容长短不一、存在动态换行、自定义边距都能准确适配。
实现逻辑：

• 定义响应式变量visibleCount控制实际渲染的条目数量，初始值为0，列表区域只渲染前visibleCount个数组元素
• 组件挂载、窗口尺寸变化时，先获取.body容器的clientHeight，这个值就是除去固定高header、footer后剩余的可用渲染高度
• 逐次创建和实际渲染样式完全一致的临时条目，累加单条高度，直到总高度超过可用高度时停止，此时统计到的条目数就是最大可渲染数量
• 给resize事件加防抖，避免窗口频繁调整时重复计算造成卡顿，组件卸载时移除事件监听

可直接复用的Vue3实现代码：

<template>
  <div class="container">
    <div class="header">Header</div>
    <div class="body" ref="bodyRef">
      <div v-for="(item, idx) in visibleItems" :key="idx" class="item">
        {{ item.data }}
      </div>
    </div>
    <div class="footer">Footer</div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})
const bodyRef = ref(null)
const visibleCount = ref(0)
const visibleItems = computed(() => props.items.slice(0, visibleCount.value))

const debounce = (fn, delay = 150) => {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

const calcVisibleCount = () => {
  if (!bodyRef.value) return
  const availableHeight = bodyRef.value.clientHeight
  let totalHeight = 0
  let count = 0
  // 创建临时测量节点，避免反复渲染造成页面抖动
  const measureNode = document.createElement('div')
  measureNode.className = 'item'
  for (let i = 0; i < props.items.length; i++) {
    measureNode.innerHTML = props.items[i].data
    bodyRef.value.appendChild(measureNode)
    totalHeight += measureNode.offsetHeight
    if (totalHeight > availableHeight) {
      bodyRef.value.removeChild(measureNode)
      break
    }
    count++
    bodyRef.value.removeChild(measureNode)
  }
  visibleCount.value = count
}

const debouncedCalc = debounce(calcVisibleCount)

onMounted(() => {
  calcVisibleCount()
  window.addEventListener('resize', debouncedCalc)
})

onUnmounted(() => {
  window.removeEventListener('resize', debouncedCalc)
})
</script>

<style scoped>
.container {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.header {
  height: 100px;
}
.footer {
  height: 100px;
}
.body {
  flex: 1;
  overflow: hidden;
}
/* 实际渲染条目样式，测量节点会复用这个类，保证测量结果准确 */
.item {
  padding: 12px 16px;
  line-height: 1.5;
}
</style>

方案2：固定高度计算法（适合条目高度完全统一的场景） #

如果你所有列表条目的高度完全固定（无动态换行、无内容高度差异），可以用这个方案，计算成本极低性能更好：

• 提前统计单条目的完整高度（包含padding、border、margin，不要只算字体高度）
• 直接用.body的可用高度除以单条高度，向下取整得到最大可渲染条目数
• 同样监听resize事件，窗口变化时重新计算即可

注意：计算高度时优先用clientHeight/offsetHeight，不要用getBoundingClientRect——后者会把CSS transform的缩放影响算入结果，容易出现高度计算偏差。

选型建议 #

• 列表内容动态、条目高度不固定时选方案1，适配性最强无误差
• 列表条目高度100%固定时选方案2，性能最优

内容的提问来源于stack exchange，提问作者James