项目中遇到这么个需求，由于选项数据量过大，采用远程搜索的方式，相当于没有初始的下拉数组options选项数组，保存时需要传给后端id和userName两个字段。
此时我的value绑定的为item（选项对象），注意下列例子为 多选 情况
- 绑定值为对象
- label绑定值为userName
// item实例
item = {
userId: '1',
userName: 'user004'
}
<el-select
v-model="selectedList" //将选中的值绑定到集合selectedList中
multiple
ref="selectDom"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item">
</el-option>
</el-select>
当我再次编辑需要回显时，我拿到的数据后如何去让组件正确回显呢？当我把拿到的数据以对象数组的形式赋值给v-model绑定的变量中，此时会发现：组件的tag上并无label显示，显示为空，如图所示
有值，但不显示label
下面提供两个方法
1.给下拉选项options赋值
//selectedList 接收后端返回来的选中集合
this.options.push(...selectedList )
由于下拉选项options中没有值所以无法正确显示，那么第一种思路我们就把options中添加数据，使其能找到对应的选中项从而正确显示
但是这个方法有个缺陷，
在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渲染到组件上,
所以最终解决方法为：在拿到数据后执行下面代码
// 注意 我的例子中label绑定的为userName, value绑定的为item;
// :label="item.userName" :value="item"
// selectedList为后端返回的选中的回显数据
// 这段代码根据你们绑定的字段进行修改
selectedList.forEach(item = > {
this.$refs.selectDom.cachedOptions.push({
currentLabel: item.userName,
currentValue: {
userId: item.userId,
userName: item.userName
},
label: item.userName,
value: {
userId: item.userId,
userName: item.userName
},
})
})
循环向cachedOptions中添加选项，这样就可以了
