如何在Svelte中创建分组行表格？现有模板代码无法运行

你要做的是这种分组表头的表格：

你的伪代码跑不起来的核心原因是：{@const}声明的变量属于块级作用域，每次{#if}块执行完毕后，currentCity就会失效，下一次循环时该变量不存在，再加上初始未定义，直接导致报错。

下面给两种可行的解决方案：

方案1：用组件级变量跟踪当前城市 #

在script标签里声明一个变量来保存当前分组的城市名，循环时直接更新这个变量即可：

<script>
// 示例数据
let cities = [
    { name: '纽约', person: '张三', jobTitle: '工程师' },
    { name: '纽约', person: '李四', jobTitle: '设计师' },
    { name: '伦敦', person: '王五', jobTitle: '产品经理' },
];
let currentCity = '';
</script>

<table border="1">
{#each cities as city}
    {#if city.name !== currentCity}
        {currentCity = city.name}
        <tr><th colspan="5" scope="colgroup">{currentCity}</th></tr>
    {/if}
    <tr><td>{city.person} - ({city.jobTitle})</td></tr>
{/each}
</table>

方案2：提前分组数据（更推荐） #

先把原始数据按城市名分组，再循环分组后的数据。这种方式将数据处理与模板渲染分离，逻辑更清晰，也避免了模板内状态变量可能引发的更新异常：

<script>
// 示例数据
let cities = [
    { name: '纽约', person: '张三', jobTitle: '工程师' },
    { name: '纽约', person: '李四', jobTitle: '设计师' },
    { name: '伦敦', person: '王五', jobTitle: '产品经理' },
];

// 自定义分组函数（也可以直接使用lodash的groupBy工具）
function groupBy(arr, key) {
    return arr.reduce((acc, item) => {
        const groupKey = item[key];
        if (!acc[groupKey]) acc[groupKey] = [];
        acc[groupKey].push(item);
        return acc;
    }, {});
}

const groupedCities = groupBy(cities, 'name');
</script>

<table border="1">
{#each Object.entries(groupedCities) as [cityName, people]}
    <tr><th colspan="5" scope="colgroup">{cityName}</th></tr>
    {#each people as person}
        <tr><td>{person.person} - ({person.jobTitle})</td></tr>
    {/each}
{/each}
</table>

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