Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称">
                            <el-autocomplete popper-class="my-autocomplete"
                                             v-model="customForm.MethodName"
                                             :fetch-suggestions="querySearchMethod"
                                             placeholder="请输入方法名称"
                                             :disabled="IsDisabled"
                                             @select="((item)=>selectMethodChange(item))">
                                <template slot-scope="{ item }">
                                    <div class="name">{{ item.value }}</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>

// 方法
            querySearchMethod(queryString, cb) {
                let that = this;
                var solList = []
                that.MethodOptionItems.forEach(item => {
                    solList.push({ 'label': item.value, 'value': item.label })
                })

                var results = queryString
                    ? solList.filter(this.createFilterMethod(queryString))
                    : solList;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilterMethod(queryString) {
                let that = this;
                var solList = that.MethodOptionItems;
                return solList => {
                    return (
                        //solList.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                        solList.label
                    );
                };
            },
            handleSelectMethod(item) {
                console.log(item);
            },

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
是的,Vue下拉框可以实现下拉选择并新增选项的功能。通常可以通过在下拉框添加一个“其他”选项,当用户选择“其他”选项时,弹出一个输入框供用户填写新的选项。具体实现方式可以参考以下步骤: 1. 在下拉框的选项列表添加一个“其他”选项。 ``` <select v-model="selectedOption"> <option v-for="option in options" :value="option.value">{{ option.label }}</option> <option value="other">其他</option> </select> ``` 2. 监听下拉框的值变化,当选择了“其他”选项时,弹出输入框。 ``` <select v-model="selectedOption" @change="onSelectChange"> <option v-for="option in options" :value="option.value">{{ option.label }}</option> <option value="other">其他</option> </select> ... methods: { onSelectChange() { if (this.selectedOption === 'other') { this.showInput = true; } else { this.showInput = false; } } } ``` 3. 根据输入框的值,动态添加新的选项。 ``` <select v-model="selectedOption" @change="onSelectChange"> <option v-for="option in options" :value="option.value">{{ option.label }}</option> <option value="other">其他</option> </select> ... <div v-if="showInput"> <input type="text" v-model="newOption" @blur="addNewOption" /> </div> ... methods: { onSelectChange() { if (this.selectedOption === 'other') { this.showInput = true; } else { this.showInput = false; } }, addNewOption() { if (this.newOption.trim() !== '') { const newOption = { label: this.newOption, value: this.newOption }; this.options.push(newOption); this.selectedOption = newOption.value; } this.showInput = false; this.newOption = ''; } } ``` 以上是一个简单的示例,具体实现方式可以根据项目需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值