Svelte中如何按每组4条分组遍历Supabase获取的数据

要实现每4条数据生成一行的布局，核心是先将原始数据数组按每4个元素一组拆分，再通过嵌套的{#each}循环分别渲染行和行内的卡片。

步骤1：在脚本中处理数据分组 #

在<script>块里添加数据分组逻辑，把你的visibleLawFirms数组拆分成二维数组（每个子数组最多包含4个元素）：

<script>
    export let data;
    // 假设你的律所数据存储在 data.lawFirms，或直接使用你的 visibleLawFirms
    const visibleLawFirms = data.lawFirms;
    
    // 分组函数：将数组按指定大小拆分
    function groupArray(arr, groupSize) {
        const grouped = [];
        for (let i = 0; i < arr.length; i += groupSize) {
            grouped.push(arr.slice(i, i + groupSize));
        }
        return grouped;
    }
    
    // 按每4条一组拆分数据
    const groupedLawFirms = groupArray(visibleLawFirms, 4);
</script>

步骤2：修改模板渲染结构 #

将原来的单层循环改成嵌套循环：外层循环渲染行，内层循环渲染每行里的4张卡片。调整HTML结构以适配行布局：

<!-- 外层容器，控制行的垂直排列 -->
<div class="row-container">
    {#each groupedLawFirms as row}
        <!-- 每行容器，控制卡片横向排列 -->
        <div class="card-row">
            {#each row as lawFirm}
                <li class="cardShape">
                    <h3>{lawFirm.lawfirmname}</h3>
                </li>
            {/each}
        </div>
    {/each}
</div>

补充：CSS样式参考 #

为了让卡片在每行内横向排列，给行容器添加基础flex样式：

.row-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 行与行之间的间距 */
}

.card-row {
    display: flex;
    gap: 1.5rem; /* 卡片之间的间距 */
    flex-wrap: wrap; /* 屏幕宽度不足时自动换行，适配响应式 */
}

.cardShape {
    flex: 1 1 calc(25% - 1.5rem); /* 每张卡片占每行1/4宽度，减去间距 */
    list-style: none;
    padding: 1.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

说明 #

• 分组函数groupArray是通用逻辑，调整groupSize参数就能改变每行的卡片数量；
• 嵌套{#each}循环先遍历分组后的行数组，再遍历每行内的单个律所数据；
• CSS部分可根据实际布局需求调整，比如去掉flex-wrap可强制每行固定4张卡片，保留则能适配小屏幕自动换行。

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