项目中遇到这么个需求，由于选项数据量过大，采用远程搜索的方式，相当于没有初始的下拉数组options选项数组，保存时需要传给后端id和userName两个字段。

此时我的value绑定的为item（选项对象），注意下列例子为 多选 情况

绑定值为对象

当我再次编辑需要回显时，我拿到的数据后如何去让组件正确回显呢？当我把拿到的数据以对象数组的形式赋值给v-model绑定的变量中，此时会发现：组件的tag上并无label显示，显示为空，如图所示

有值，但不显示label

注意，官方案例中获取选中的值为

   [{
      userId: '1',
      userName : 'user004'  
    }, {
      userId: '2',
      userName : 'user005'
    }]

以下我的代码中出现的ids和str是根据我们业务存取规则设定的临时变量

//userId= value; 
//userName = label; 
//item = { userId: 1, userName = "user004"}
ids = ['1', '2'];
str = [ 'user004' ,  'user005' ]

下面提供两个方法

1.给下拉选项options赋值

将回显数据添加到options中。图中this.personOptions为select-options对应的数据

由于下拉选项options中没有值所以无法正确显示，那么第一种思路我们就把options中添加数据，使其能找到对应的选中项从而正确显示

但是这个方法有个缺陷，

image

在select组件获焦但未远程搜索时，下拉选项会有选项出现，就是我们刚刚添加的两项，下面再提供一种方法

2.看源码理解组件是如何渲染的

先前使用给$res.selectDom.selected赋值

$res.selectDom.selected.push({
  currentLabel: **,
  currentValue: {
    userId: **,
    userName: **
  },
  value: {
    userId: **,
    userName: **
  }
})

，但发现最后selected中各项的currentLabel并未被赋值，猜想组件渲染过程中有过程将此部分重新赋值，方法失败

后找到element的select.vue发现

setSelected方法

设置选中的方法中，多选时（this.multiple == true时），通过getOption方法处理value值后返回this.selected = result

getOption方法

而在getOption方法中看到有个很关键的地方：this.cachedOptions，通过遍历并比对找到对应的option并return，猜想this.cachedOptions就是当前组件后台隐匿储存的下拉选项集合，那我们可以通过在这个集合中把我们需要显示的选项添加进去，即可通过组件的setSelected方法去让label渲染到组件上,

所以最终解决方法为：在拿到数据后执行下面代码

for (let i=0; i<str.length; i++) {
  this.ruleForm.person.push({ //data中赋值
    userId: ids[i],
    userName: str[i]
  })
  this.$refs.selectDom.cachedOptions.push({
    currentLabel: str[i],
    currentValue: {
      userId: ids[i],
      userName: str[i]
    },
    label:str[i],
    value: {
      userId: ids[i],
      userName: str[i]
    },
  })
}

循环向cachedOptions中添加选项，这样就可以了