Svelte响应式计算表格开发求助：无法实现动态密度计算

我看了你的代码，问题主要出在两个核心点：数据没有双向绑定导致修改输入框不会同步更新数据源，还有计算列没有实时触发公式计算。下面一步步帮你修复：

1. 给可编辑列加上双向数据绑定 #

你现在的input只是把item[col.name]单向赋值给value，但修改输入框的内容不会同步回data数组里的项。需要用Svelte的bind:value实现双向绑定，同时因为输入框默认是文本类型，要把输入的字符串转成数字（不然计算密度时会变成字符串拼接，结果完全错误）。

2. 让计算列实时调用公式并响应更新 #

原来的计算列硬写了0，我们需要调用传入的computed.method并传入对应参数。Svelte的响应式系统会自动追踪item里的依赖属性（比如females、males、area），一旦这些值变化，就会自动重新计算结果。另外，计算列是只读的，所以要把输入框禁用，避免用户修改。

修改后的Spreadsheet.svelte代码 #

<script>
 export let data = [];
 export let cols = [];
</script>
<style>
 .numeric {
 width: 70px;
 }
 input:disabled {
 background-color: #f0f0f0;
 cursor: not-allowed;
 }
</style>
<table>
 <tr>
 {#each cols as col}
 <th>{col.label}</th>
 {/each}
 </tr>
 {#each data as item}
 <tr>
 {#each cols as col}
 <td>
 {#if col.computed}
 <!-- 计算列：实时调用公式，禁用输入 -->
 <input 
 type="number" 
 class="numeric" 
 disabled 
 value={col.computed.method(...col.computed.args.map(arg => item[arg])).toFixed(2) || 0}
 />
 {:else}
 <!-- 可编辑列：双向绑定，自动转数字处理 -->
 <input 
 type="{col.name !== 'animal' ? 'number' : 'text'}" 
 class="{col.name !== 'animal' && 'numeric' }" 
 bind:value={item[col.name]}
 on:input={() => item[col.name] = Number(item[col.name]) || 0}
 />
 {/if}
 </td>
 {/each}
 </tr>
 {/each}
</table>

额外优化细节说明 #

• 把数值类的可编辑列改成type="number"，浏览器会提供数字专属输入控件（比如上下调节箭头），用户体验更友好；
• 给计算结果加上.toFixed(2)限制小数位数，避免出现过长的无意义小数；
• 加上|| 0处理空值或非数字输入的情况，防止计算出现NaN。

这样修改后，当你修改females、males或area的数值时，density列会自动重新计算并实时更新，完全实现你想要的响应式效果啦！

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