项目中遇到这么个需求，由于选项数据量过大，采用远程搜索的方式，相当于没有初始的下拉数组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中添加选项，这样就可以了
