美文网首页
element UI el-autocomplete 带输入建议

element UI el-autocomplete 带输入建议

作者: pengkiw | 来源:发表于2018-12-05 12:33 被阅读0次

    项目需求:需要用户在输入框中输入公司 全名    但是为了避免用户输入不全   需要做一个带输入建议的输入框

    element组件:

    <el-autocomplete       

            class="inline-input"          

            v-model="state1"         

            placeholder="请输入内容"     

            :fetch-suggestions="querySearch"       
                    // fetch-suggestions 是一个返回输入建议的方法属性

             :trigger-on-focus="false"               
                     //  false = >输入后匹配输入建议  true => 激活即列出输入建议

            @select="handleSelect"               
                      // 点击选中建议项时触发  handleSelect

    >   

    </el-autocomplete>

    在输入框变化时 会触发  querySearch 函数    获取到当前输入的字段  然后调用 createFilter 函数 筛选数据

    下图为官方写法  

    官方写法将 全部数据 放在 loadAll 函数里   然后通过 createFilter 函数做筛选

    而我需要从后台获取数据。

    querySearch(queryString, cb) {   

            this.$http({

                url: this.$http.adornUrl("/sys/selct/companyname"),

                method: "post",

                params: this.$http.adornParams({

                        companyName:queryString 

                 })

            }).then(({ data }) => {

                    for(var i=0;i<data.data.length;i++){

                            data.data[i].value = data.data[i].companyName;   

                    }

                    cb(data.data);

          });

    }

     我需要筛选的数据字段名并不是value,所以现在需要遍历数组把筛选字段换成value

    最后将数据 cb() 回去  返回到 autocomplete 组件中 

    相关文章

      网友评论

          本文标题:element UI el-autocomplete 带输入建议

          本文链接:https://www.haomeiwen.com/subject/brkicqtx.html