Svelte问题：使用class directive高亮表格行失效

1. 确认class指令的语法与判断逻辑 #

先检查你的class绑定写法是否正确，比如是否是：

<tr class:selected={selected.has(row[key])} on:click={() => toggle(row[key])}>

这里要确保row[key]是行的唯一标识，并且和你存入selected Set的内容完全一致——比如如果row[key]是数字类型，但你不小心存了字符串类型，selected.has()会返回false，导致样式不生效。可以在模板里临时添加{selected.has(row[key])}来实时显示判断结果，看是否和控制台输出的选中状态匹配。

2. 检查样式优先级 #

默认的表格行样式可能会覆盖你自定义的selected类样式。比如浏览器默认的tr样式，或者你自己写的基础行样式优先级更高：

/* 基础行样式 */
tr {
  background-color: #fff;
}

/* 选中样式可能被覆盖，需要提升优先级 */
tr.selected {
  background-color: #f0f0f0;
  /* 或者用更具体的选择器 */
  table > tbody > tr.selected {
    background-color: #f0f0f0;
  }
}

如果临时加!important能生效，说明就是优先级问题，这时候建议优化选择器而非依赖!important。

3. 确认Set的响应式更新 #

虽然Svelte支持Set的add/delete操作触发响应式，但极端情况下可能存在追踪失效。可以修改toggle函数，通过重新赋值Set强制触发更新：

let selected = new Set();

function toggle(id) {
  if (selected.has(id)) {
    selected.delete(id);
  } else {
    selected.add(id);
  }
  // 强制更新：创建新的Set实例
  selected = new Set(selected);
}

这样能确保Svelte检测到状态变化，重新渲染行的class。

4. 排查模板循环的key绑定 #

如果你的表格行是用#each循环渲染的，要确保绑定了正确的key值：

{#each rows as row (row[key])}
  <tr class:selected={selected.has(row[key])} on:click={() => toggle(row[key])}>
    <!-- 单元格内容 -->
  </tr>
{/each}

正确绑定key能避免Svelte复用DOM元素导致的样式不更新问题。

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