v-model 在 vue 3 的 el-transfer 中仅控制右侧目标列表的选中 key 数组，源数据不变时左右列表完全由 v-model 派生；初始化、清空、排序均通过操作该数组实现，并天然支持 el-form 表单联动。

v-model 在 Vue 3 的 el-transfer 中只控制右侧（目标）列表的选中项，它绑定的是一个 key 值数组，不是整个对象，也不是左侧数据。组件内部通过这个数组和原始 data 源自动计算出左右两列内容——没有独立维护左右列表状态，完全受控于 v-model + data。

核心逻辑：v-model 决定 targetData，其余全派生

组件源码中，targetData 是计算属性：
→ 所有 data 中 key 存在于 v-model 数组里的项，组成右侧列表；
→ 剩余项自动归入左侧列表（sourceData）。
这意味着：

• 初始化右侧有数据？直接把对应 key 写进 v-model 初始值，比如 ref([2, 5, 7])
• 想清空右侧？把 v-model 设为空数组 []
• 左侧数据变化（如过滤、搜索）？只要不改 v-model，右侧内容完全不受影响

修改右侧顺序：靠改 v-model 数组本身

默认情况下，右侧项按原始 data 顺序排列。若需自定义顺序（如上移/下移），必须开启 target-order="push"，然后直接操作 v-model 绑定的数组：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 拿到当前选中的 key（通过 @right-check-change 事件）
• 在 v-model 数组中查出该 key 对应的索引
• 用数组方法交换相邻元素（如 arr.splice(i, 1, ...arr.splice(i-1, 1, arr[i]))）
• 注意边界：索引为 0 时不能上移，索引为 arr.length - 1 时不能下移

双向绑定与表单集成

v-model 不仅是响应式绑定，还内置了表单联动能力：

• 当 v-model 值改变时，组件会自动触发 dispatch('ElFormItem', 'el.form.change', val)
• 如果穿梭框在 <el-form></el-form> 内，无需额外代码，校验状态和重置逻辑天然生效
• 自定义子组件封装时，只需用 defineModel() 或 props + emit 模拟相同行为即可保持一致性

本质就是“数组驱动视图”，不复杂但容易忽略数据源头——v-model 是开关，data 是底座，其余全是推导结果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！