open-platform-admin-ui/src/components/SelectRemoteUser.vue

<template>
  <el-select
    v-model="value"
    :multiple="multiple"
    filterable
    remote
    reserve-keyword
    clearable
    placeholder="昵称/ID/手机号/邮箱搜索"
    :remote-method="remoteMethod"
    :loading="loading"
    @change="onChange"
  >
    <el-option v-for="item in options" :key="item.id" :label="item.nickName+'['+item.id+']'" :value="item.id" />
  </el-select>
</template>

<script>
import { findSelectAccounts } from '@/api/userInfo'

export default {
  name: 'SelectRemoteUser',
  props: {
    multiple: {
      type: [Boolean, Object],
      default: false
    },
    value: {
      type: [String, Number, Array],
      default: ''
    }
  },
  data: function() {
    return {
      options: [],
      loading: false
    }
  },
  methods: {
    onChange(value) {
      this.$emit('input', value)
    },
    remoteMethod(searchKey) {
      findSelectAccounts(searchKey).then(options => {
        this.options = options
      })
    }
  }
}
</script>