Svelte中如何动态渲染适配未知屏幕的最大表格行数？

一、计算逻辑的可靠性 #

你的思路完全可行：

• 表格的可用显示高度 = 主容器高度 - 头部导航栏高度 - 底部分页栏高度
• 可显示行数 = Math.floor(可用显示高度 / 52)
  用Math.floor是为了保证所有行都能完整显示，避免出现截断的半行。

二、Svelte中获取尺寸（无需直接操作DOM） #

Svelte自带元素绑定能力，结合<svelte:window>监听窗口 resize 事件，就能实现响应式的尺寸获取与行数计算：

1. 绑定元素高度并计算行数 #

直接给目标元素绑定clientHeight或offsetHeight，就能自动获取对应高度值：

<script>
  import { onMount } from 'svelte';

  let mainContainerHeight = 0;
  let headerHeight = 0;
  let paginationHeight = 0;
  let visibleRows = 0;

  // 计算可视行数的核心函数
  function calculateVisibleRows() {
    const availableHeight = mainContainerHeight - headerHeight - paginationHeight;
    visibleRows = Math.floor(availableHeight / 52);
    // 这里可触发分页逻辑，比如截取对应数量的数据渲染
  }

  // 窗口大小变化时重新计算
  function handleResize() {
    calculateVisibleRows();
  }

  // 组件挂载后初始化计算
  onMount(() => {
    calculateVisibleRows();
  });
</script>

<svelte:window on:resize={handleResize} />

<!-- 头部导航栏 -->
<header bind:clientHeight={headerHeight}>
  <!-- 导航内容 -->
</header>

<!-- 主容器 -->
<main bind:clientHeight={mainContainerHeight}>
  <table>
    {#each data.slice(0, visibleRows) as row}
      <tr style="height: 52px;">
        <!-- 表格单元格内容 -->
      </tr>
    {/each}
  </table>
</main>

<!-- 底部分页栏 -->
<footer bind:clientHeight={paginationHeight}>
  <!-- 分页控件 -->
</footer>

2. 高度属性的选择 #

• clientHeight：元素内容区高度（包含内边距，不含边框、外边距、滚动条）
• offsetHeight：元素总高度（包含内边距、边框，不含外边距、滚动条）
  如果头部/分页栏有边框，用offsetHeight计算会更准确。

三、注意事项 #

• 确保表格行高固定为52px，避免内容换行导致行高变化，影响计算结果
• 若主容器有内边距或滚动条，需要在计算时额外减去对应尺寸
• 如果头部/分页栏高度会动态变化（比如折叠菜单），要在高度改变后重新调用calculateVisibleRows

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