当前位置：首页 > article >正文

如何使用ant design vue的a-select下拉框，实现既能输入内容，也可以下拉选择的效果，apiselect同样适用

article 2024/9/23 23:48:14

修改mode 强烈推荐
代码如下，重点在@search和mode

<ApiSelect
                              v-if="editableData[record.key]"
                                mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"
                                @search="inputinspect"
                                :api="problem"
                                :params="{projectId:projectId}"
                                showSearch
                                v-model:value="editableData[record.key][column.dataIndex]"
                                optionFilterProp="label"
                                resultField="result"
                                labelField="problem"
                                valueField="id"
                                @change="(val1,val2)=>changeinspect(val1,val2,editableData[record.key])"
                            />

async function inputinspect(val,val2){
                console.log(val,val2)
            }

如果无法结合@search @change事件解决你的问题的话，看看下面这种方案：
只需要改一下mode属性，@search就可以拿到最新的input值。
mode=“SECRET_COMBOBOX_MODE_DO_NOT_USE”
我这里antdv采用的是4.x的版本，这个属性目前官方文档里是没有的，但确实好用！！亲测！
有兴趣的同学可以翻一下源码是有这个属性的：

在这里插入图片描述