template部分
<el-select
v-model="searchParams.platformName"
filterable
remote
clearable
reserve-keyword
placeholder="请选择平台"
:remote-method="remoteMethod"
:loading="remoteLoading"
:disabled="isRemote"
@focus="repeatList"
@change="handleSelectBranchCom"
style="width:217px"
>
<el-option
v-for="item in remoteOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
script部分
data(){
return{
remoteOptions: [], // 远程搜索列表
remoteList: [], // 返回的远程搜索列表
remoteLoading: false, // 是否正在从远程获取数据
isRemote: false ,// 是否为远程搜索
}
},
methods:{
// 获取管理机构列表
getBranchCom () {
this.$post(SelectCompanyAndPage, {
size: 3000,
page: 1
}).then(res => {
if (res.status == 1) {
console.log(res.data.rows)
let a=res.data.rows.map((v)=>{
return v.companyName
})
console.log(a)
this.remoteList = a.map(item => {
return {
value: item,
label: item,
}
})
}
})
},
// 清空选择项
repeatList () {
this.remoteOptions = this.remoteList.filter(item => {
return item.label
})
},
// 选中管理机构时触发
handleSelectBranchCom (item) {
console.log('远程搜索选中后返回的item:::::即value的值')
console.log(item)
this.searchParams.platformName = item
},
remoteMethod (query) {
console.log(this.remoteList)
if (query !== '') {
this.remoteLoading = true
setTimeout(() => {
this.remoteLoading = false
this.remoteOptions = this.remoteList.filter(item => {
return item.value
.indexOf(query) > -1
})
console.log('this.remoteOptions')
console.log(this.remoteOptions)
}, 200)
} else {
this.remoteOptions = []
}
},
}
效果图