Transfer穿梭框数据不更新怎么办？

欧阳诗雯提问于 2026-03-13 16:12:21 阅读 3

组件

我在用Element Plus的Transfer组件做权限分配，左边是所有角色，右边是已选角色。但当我从接口拿到新数据后，用this.data = newData赋值，穿梭框里的列表完全没变化，还是旧的。

我试过用this.$set和Vue.set，也试过把data先清空再赋值，都不行。控制台打印出来data确实是新数组了，但UI就是不动。是不是我漏了什么响应式处理？

fetchRoles().then(res => {
  this.data = res.list.map(item => ({
    key: item.id,
    label: item.name
  }))
})

导航组件

我来解答赞 2 收藏

反馈

1 条解答

Tr° 冰冰 Lv1

这个问题挺常见的，Transfer组件的数据更新和普通数据绑定不太一样。

问题在于：Transfer组件的v-model（或者叫left-default-checked/right-default-checked）和data是两个独立的数据源。你只更新了data，但组件内部的选中状态可能还保持着旧的key。

试试这样改：

fetchRoles().then(res => {

  const newData = res.list.map(item => ({

    key: item.id,

    label: item.name

  }))

  

  // 关键：同时更新data和v-model绑定的选中数组

  this.data = newData

  this.selectedRoles = newData.map(item => item.key)  // 重置选中状态

})

如果你是用v-model绑定Transfer：

还有一种情况：如果新数据的key和旧数据有重复，Vue可能不会触发更新。可以在key后面加点东西确保唯一性：

this.data = res.list.map((item, index) => ({

  key: item.id + '_' + index,  // 加个索引保证唯一

  label: item.name

}))

或者直接暴力一点，强制刷新组件：

this.$nextTick(() => {

  this.data = newData

})

你先试试第一种，同时更新data和v-model绑定的那一端，基本能解决。

2026-03-13 16:16