解决ElementUI多选远程搜索时label变空

在 ElementUI 中使用 el-select 多选，option 的 value 值为 object 类型，远程搜索时，label 显示变空，效果如下图

这是因为，再次搜索时，下拉选项里没有之前选中的内容，所以无法显示数据。那么，解决方法，就是在搜索时，把之前的选中内容加到下拉列表里。

页面布局

<el-select
  v-model="value"
  placeholder="请选择"
  multiple
  filterable
  remote
  :remote-method="multiSearch"
  @change="updateValue"
  @remove-tag="doRemoveTag"
  value-key="id" <!-- value为object时必加value-key -->
>
  <el-option
    v-for="item in options"
    :key="item.id"
    :value="item"
    :label="item.name"
  >
    <div>{{ item.name }}({{ item.otherInfo }})</div>
  </el-option>
</el-select>

搜索结果回来时

getOptions.search(searchStr).then(list => {
  // 在返回的列表里查找是否和选中项有重复的，没有的话加进去
  this.value.map(v => {
    if (!list.find(l => l.id === v.id)) {
      list.push(v);
    }
  });
  this.options = list;
})
.catch(err => {
  console.error(err);
});

删除选项时

// 下拉列表为空时则等同于已选内容列表，需要浅拷贝，防止数据错乱
doRemoveTag() {
  this.options = [].concat(this.value);
}

delect 键删除选项时

updateValue() {
  if (this.options.length === 0) {
    this.options = [].concat(this.value);
  }
}

但是这种解决方法还有 bug：在用 delect 键删除时，第一次无法监听，label 变空。第二次删除因为触发了 change 事件，会恢复正常。大家有什么好的解决方法，欢迎讨论交流。