elementUI-select 遠程搜索

設置三個遠程屬性，調用模糊接口<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>