<template>
<div>
<a-select
show-search
allowClear
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
style="width: 260px"
v-model:value="addCompanyValue"
placeholder="请输入搜索"
@search="vagueSearchCompany"
v-model="addCompanyForm.companyId"
>
//渲染下拉框数据
<a-select-option v-for="item in companyList" :key="item.id" :value="item.id">
{{ item.companyName }}
</a-select-option>
</a-select>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
// 下拉列表
companyList: [],
// 表单
addCompanyForm: {
//值
companyId: void 0,
},
}
}
methods: {
/**
* @function 模糊搜索
*/
vagueSearchCompany(event) {
//当前值为空则将下拉框数据置空
if (!event) {
this.companyList = []
return
}
//不为空发送请求
this.getLikeCompany(event)
},
/**
* @function 模糊搜索请求
*/
getLikeCompany(value) {
//请求
likeCompany({ value}).then((res) => {
let { code, data } = res
if (code != 0) return
//存储下拉框数据
this.companyList = data ?? []
})
},
}
}
</script>
<style scoped>
</style>
ant design vue 中select搜索和远程数据
最新推荐文章于 2024-06-09 15:00:01 发布