【Iview】Select组件远程搜索，搜索有返回但下拉选项为空

做邮件添加搜索联系人时，发现输入文字可以显示下拉选项，当输入拼音时有返回但是下拉显示为空。

<Select
    class="my-select"
    ref="selectInput"
    multiple
    label-in-value
    filterable
    v-model="nameArr"
    :loading="loading"
    :default-label="name"
    :remote-method="remoteMethod"
    @on-set-default-options="setDefaultOptions"
    @on-change="onChangeOption"
>
      <Option
        v-for="item in emaliNameArr"
        :value="item.value"
        :key="item.label"
        :label="item.label"
      >
          {{ item.label }} ({{ item.organizationName }})
      </Option>
</Select>

export default {
  method: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const param = {
          keyword: query,
          withoutGroup: false,
        }
        dataHelper.getData(
            this,
            config.server.host + '/api/mail/ReceiverSearch',
            param,
            (result) => {
              const datas = result.data
              this.emaliNameArr = datas && datas.map(item => {
                return {
                  value: `${item.Id};${item.NickName}`,
                  label: `${item.Name}`,
                  organizationName: item.OrganizationName,
                };
              });
              this.loading = false;
            }
        )
      } else {
        this.emaliNameArr = []
      }
    },
  }
}

原因是iview的Select组件源码会把返回的数据筛选label包含关键词的才会返回

所以可以在label加上query关键词就能解决此问题了，不过这种还要处理数据。

还可以重写筛选的方法也可以解决问题：

mounted() {
  this.$nextTick(() => {
    // 替换过滤函数
    this.$refs.selectInput.validateOption = () => true;
  })
}