Element Plus穿梭框数据怎么总是不同步？

码农文君提问于 2026-02-08 16:34:38 阅读 55

组件

用Element Plus的Transfer组件做数据迁移时，选中的项在左右切换后数据没及时更新，页面显示和实际数据不一致。试过用v-model绑定数据数组，但点击按钮后数据还是没变化。

代码结构大概是这样的：


<el-transfer
  v-model="selected"
  :data="items"
  :titles="['可选', '已选']"
/>

数据初始化没问题，但操作后selected数组一直没变化。控制台也没报错，是不是漏了什么事件监听？

UI组件 Vue组件主题定制

我来解答赞 16 收藏

反馈

2 条解答

❤静怡 Lv1

我之前踩过这个坑，你这问题八成是搞混了 v-model 绑定的数据结构。

el-transfer 的 v-model 绑定的不是选中项的数组内容，而是绑定的“右侧面板的 key 值数组”。也就是说 selected 必须是一个 number 或 string 类型的数组，里面存的是 data 里每一项的 key 值。

你的 items 数据是不是长这样？

items = [

  { key: 1, label: '选项1' },

  { key: 2, label: '选项2' }

]

那 selected 初始得是空数组：

selected = []

操作后如果右边有两项，selected 就变成 [1, 2]，而不是把整个对象塞进去。

重点来了：如果你的 items 里没有提供 key 字段，el-transfer 会拿 index 当 key，这就容易出问题，数据看着没变，其实是 key 对不上导致同步失败。

解决办法三个：

第一，确保每个 item 都有唯一 key 和 label
第二，v-model 绑定的 selected 是 key 的数组，别往里面 push 对象
第三，别手动改 selected，让组件自己更新，要用响应式

如果你非要监听变化，用 watch 监听 selected 就行，别去动 data 源头。

说白了就是一句话：v-model 控的是右边有哪些 key，不是哪些数据。搞清楚这个，基本就通了。

2026-02-12 16:02

ლ熙炫 Lv1

你这个情况我之前也遇到过，其实是对 v-model 绑定的数据格式理解有点偏差。Element Plus 的 Transfer 组件虽然用了 v-model，但它绑定的不是简单的数组，而是选中项的 key 数组，而且每个 item 必须有唯一的 key 值。

首先确保你的 items 数据长这样：

items = [

  { key: 1, label: '选项1' },

  { key: 2, label: '选项2' },

  { key: 3, label: '选项3' }

]

然后 selected 应该是一个存放 key 的数组，比如：

selected = [1, 3]

如果你初始化的时候 items 是从接口拿的，很可能 key 字段没加上，或者数据结构不对，导致组件没法正确追踪选中状态。

我的做法是：在获取到原始数据后，立刻用 map 处理一遍，补全 key 和 label

this.items = res.data.map(item => ({

  key: item.id,

  label: item.name

}))

另外注意 v-model 绑定的 selected 一定要定义在 data 返回的对象里，不能漏掉。如果还是不更新，可以监听 change 事件看看有没有触发

<el-transfer

  v-model="selected"

  :data="items"

  :titles="['可选', '已选']"

  @change="handleChange"

/>

在 handleChange 里打个 console.log，确认是不是真的没变化。大概率是你 items 缺少 key 导致组件无法正确响应。

2026-02-09 03:05