elementUI-select 遠程搜索

設置三個遠程屬性，調用模糊接口<br><template>

   < ui-select

     v-model="dataId"

     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,

         dataId: this.user ? this.user.id : null

       }

     }

   }

</ script >

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

< style  scoped lang="scss">

 

</ style >