码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-06-24 21:22:28      阅读:530      评论:0      收藏:0      [点我收藏+]

标签:pop   led   method   lower   callback   reac   log   search   llb   

<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);
            },

 

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

标签:pop   led   method   lower   callback   reac   log   search   llb   

原文地址:https://www.cnblogs.com/ahao214/p/11079329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!