穿梭框采用事件委托统一处理交互：监听外层容器，根据event.target类型分流——点击复选框更新选中状态，点击操作按钮触发数据转移，避免重复绑定。
在穿梭框（Transfer）组件中，用单一事件委托统一处理左右两侧数据框的穿梭与复选逻辑，核心在于：**监听父容器上的点击/变更事件，通过事件目标（event.target）精准识别操作源（左/右面板、复选框、操作按钮），再结合数据状态驱动视图更新，避免为每个元素重复绑定事件**。
统一监听容器，按 target 类型分流处理
将事件监听器绑定在穿梭框最外层容器（如 .transfer-wrapper）上，利用事件冒泡捕获所有交互：
- 点击复选框（
input[type="checkbox"]）→ 触发「单选/全选切换」，更新对应侧的选中状态数组 - 点击「>」或「
- 点击「>>」或「
用 data 属性标记上下文，解耦 DOM 与数据
在左右面板的复选框和操作按钮上，添加语义化 data- 属性，例如：
-
data-side="left"标记左侧列表项 -
data-side="right"标记右侧列表项 -
data-action="move-to-right"标记「>」按钮 -
data-action="select-all-left"标记左侧全选框
事件处理器内通过 event.target.dataset.side 或 dataset.action 快速判断意图，无需依赖 DOM 层级或 class 名硬编码。
维护两套独立选中状态，穿梭即数据迁移
用两个响应式变量（如 leftCheckedKeys 和 rightCheckedKeys）分别记录两侧当前选中的数据唯一标识（如 id）：
- 复选框 change 时，根据其
data-side和checked状态增删对应数组 - 执行穿梭时，从源侧数组中取出对应
id的完整数据项，插入目标侧数据列表尾部（或按需排序），同时从源侧数据列表中移除，并重置该侧选中状态 - 确保穿梭后，目标侧新加入项的复选框默认未勾选（除非业务要求连带选中）
全选/反选逻辑复用，避免重复遍历
全选框本质是批量更新同侧所有复选框的状态。不建议遍历 DOM 节点触发 click，而是：
- 监听全选框 change → 获取当前侧全部可选项的
id列表 - 若勾选，则将整张 id 表赋给对应侧的 checkedKeys；若取消，则清空
- 视图层通过
v-model（Vue）或checked={keys.includes(id)}（React）自动同步所有复选框状态
这样既保证逻辑集中，又避免因手动操作 DOM 引发状态不一致。
不复杂但容易忽略的是：穿梭前后必须同步更新「全选框」的 indeterminate（半选）状态——当部分项被选中时，全选框应显示为中间态，这需要每次修改选中数组后，根据当前选中数与总项数的关系动态计算。
