elementUI-select 远程搜索

Posted 2020-10-28 LWJ_jay

设置三个远程属性，调用模糊接口
<template>
  <ui-select
    v-model="selectedPeopleId"
    filterable
    remote
    reserve-keyword
    placeholder="请输入人名进行搜索"
    :remote-method="userSearch"
    :loading="userSearchLoading"
    @change="userSelected">
    <ui-option
      v-for="item in userResult"
      :key="item.id"
      :label="item.userName"
      :value="item.id">
    </ui-option>
  </ui-select>
</template>

<script>
  import api from ‘@/api/user‘

  export default {
    components: {},
    // 父组件构建user对象传入(内容id和userName)
    props: [‘user‘],
    methods: {
      userSearch(query) {
        if (query !== ‘‘) {
          this.userSearchLoading = true
          api.pageQueryOnJobUsers({
            userName: query
          })
          .then(r => {
            this.userResult = r.data.data.list
            this.userSearchLoading = false
          })
          .catch(r => {
            this.userSearchLoading = false
          })
        }
      },
      // 触发selectedUserId绑定的事件
      userSelected(value) {
        this.$emit(‘selectedUserId‘, value)
      }
    },
    mounted() {
    },
    data() {
      return {
        userSearchLoading: false,
        // 调用父组件的至进行填充(如有)
        userResult: this.user ? [this.user] : null,
        selectedPeopleId: this.user ? this.user.id : null
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>