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>