a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题

a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题

记录一个a-auto-complete卡bug卡了两天,找不到哪里的问题下拉框选择选不上,不回显,最后终于解决了。

我还对下拉框显示的内容做了小调整。

直接看代码吧。

复制代码
<a-auto-complete v-model:value="inputValue" :options="personOptions" style="width: 300px" placeholder="请输入姓名"
            @select="onSelect" @search="onSearch">
            <template #option="item">
                <span>{{ item.name }}</span><br /><span style="color:#1890ff">{{ item.licenseNumber }}</span>
            </template>
        </a-auto-complete>
        ......
        ......
        ......
//input值
const inputValue = ref('');
//下拉框option
const personOptions = ref([]);
//输入的事件
const onSearch = searchText => {
//发送请求获取option数组
    const param = {
        name: searchText
    }
    relationApi.getPerson(param)
        .then((res) => {
        ///卡bug的地方就在这,请求接口返回的数据了没有value这个字段,所以要给option数组里的对象添加value属性
        ///option数组里需要name和value属性!
            const a = res.map(item => {
                return {
                    ...item,
                    value: item.name
                }
            })
            personOptions.value = !searchText
                ? []
                : a;
        })
        .finally(() => {
        })
};
//选择下拉框的事件
const onSelect = (value, option) => {
/value是下拉框选中的值,option是选中的所有属性,可以取你自己想要的值,我这里取的是option.licenseNumbe,然后自己进行后续操作。
    relationApi.getPersonDetial({ licenseNumber: option.licenseNumber })
        .then((res) => {
            if (res.body) {
                treeData.value = res.body
                
            } else {
                message.warning('暂无数据!')
                treeData.value = []
            }
            initTree();
        })
        .finally(() => {
        })
};
相关推荐
Dnn012 天前
修改el-select背景颜色
css·elementui·vue3
sen_shan6 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙6 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z7 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
Edward-tan9 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
sen_shan16 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan16 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
USER_A00117 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan21 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
qq_3085623123 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce