Svelte表单引入复选框组件传参实现分组选择数量限制

问题场景 #

需要实现商品规格选项表单，用户勾选对应选项后可添加至购物车，选项组为固定结构的配置数组，不同选项组有独立的最大选择数量限制（如某组最多选1项、某组最多选2项），需要基于组件化思路实现，避免逻辑耦合。
基础选项组配置如下：

let optiongroups = [
       {
        groupname : "exactly1",
        grouplimit : 1,
        id : 123,
        optionitems : [
          {
            name : "One",
            price : 1
          },
          {
            name : "Two",
            price : 2
          },
          {
            name : "Three",
            price : 3
          },
          {
            name : "Four",
            price : 4
          }
        ]

       },
       {
        groupname : "exactly2",
        grouplimit : 2,
        id : 369,
        optionitems : [
          {
            name : "2-One",
            price : 22
          },
          {
            name : "2-Two",
            price : 44
          },
          {
            name : "2-Three",
            price : 66
          },
          {
            name : "2-Four",
            price : 88
          }
        ]

       }]

未组件化的原始表单代码存在复用性差、限制逻辑散落在事件回调中的问题：

<form name="optionsform" on:submit|preventDefault={()=>collectoptions(itemid, itemprice, itemname,  itemdescription, variationname, variationprice)}>

  {#each optiongroups as group}
  <div style="margin : 5px; border : solid green;">
  <li style="list-style : none;">
    {group.groupname} - {group.grouplimit}
    {#each group.optionitems as option}

    <li>
      <label>
        <input name={group.groupname}  type="checkbox" bind:group={checkresults} value={option} on:click={handleclick}>
         {option.name} : {option.price}
   </label>
      
    </li>
    {/each}

  </li>
  </div>
  {/each}
<button type="submit" >Add To cart</button>
</form>

实现方案 #

1. 封装通用选项组件（Option.svelte） #

注意：初始参考组件为单选逻辑，需调整为数组绑定模式才能适配多选择数量限制场景
组件内置选择上限判断逻辑，无需父组件额外处理拦截事件：

<script>
  // 接收父组件传入的配置参数
  export let value; // 当前单个选项的配置对象
  export let selectedList; // 当前选项组已选中的值数组（支持双向绑定）
  export let groupLimit; // 当前选项组最大可选择数量
  export let optionName; // 表单input的name属性
  export let optionId; // 表单input的id属性

  // 响应式计算当前选项状态
  $: checked = selectedList.includes(value);
  // 达到选择上限时，未选中的选项自动禁用，已选中选项可正常取消
  $: disabled = !checked && selectedList.length >= groupLimit;
</script>

<label>
  <input 
    type="checkbox" 
    id={optionId}
    name={optionName}
    bind:group={selectedList}
    value={value}
    {checked}
    {disabled}
  />
  <slot />
</label>

2. 父表单引入组件并传递配置 #

首先在父组件中导入选项组件，按组独立维护选中状态，避免不同组的选择数据互相污染：

<script>
  // 导入封装好的选项组件
  import Option from './Option.svelte';

  // 选项组配置（原有配置无需修改）
  let optiongroups = [/* 同上文中的optiongroups数组 */];

  // 按组id存储每个组的选中结果
  let groupSelected = {};
  // 初始化每个组的选中值为空数组
  optiongroups.forEach(group => {
    groupSelected[group.id] = [];
  });

  // 表单提交逻辑
  function collectoptions(itemid, itemprice, itemname, itemdescription, variationname, variationprice) {
    // 直接从groupSelected中获取所有组的选中值做后续购物车添加逻辑
    console.log('各组选中结果：', groupSelected);
  }
</script>

调整表单模板，循环渲染选项组和选项时把对应配置传入组件：

<form name="optionsform" on:submit|preventDefault={()=>collectoptions(itemid, itemprice, itemname, itemdescription, variationname, variationprice)}>
  {#each optiongroups as group}
  <div style="margin : 5px; border : solid green;">
    <div style="list-style: none;">
      {group.groupname} - 最多选{group.grouplimit}项
      <ul>
        {#each group.optionitems as option, index}
        <li>
          <Option
            bind:selectedList={groupSelected[group.id]}
            value={option}
            groupLimit={group.grouplimit}
            optionName={group.groupname}
            optionId={`${group.id}-${index}`}
          >
            {option.name} : {option.price}
          </Option>
        </li>
        {/each}
      </ul>
    </div>
  </div>
  {/each}
  <button type="submit">Add To cart</button>
</form>

3. 方案特性 #

• 配置驱动：新增/修改选项组只需要调整optiongroups数组配置，无需修改模板和组件逻辑
• 逻辑内聚：选择数量限制逻辑完全封装在选项组件内部，不需要单独写on:click事件做手动拦截，依托Svelte响应式能力自动处理禁用状态
• 适配灵活：不管是限选1项（等效单选效果）、限选N项的场景，只需要修改对应组的grouplimit值即可
• 数据隔离：每个选项组独立维护选中值数组，不同组的选择状态不会互相干扰

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