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
>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步