element UI el-autocomplete 带输入建议的输入框 - 简书

安宇雨 - 随手采集
2020-03-07 17:56:14
随手采集
0000-未整理-等待研究

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

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 组件中

原网址: 访问
创建于: 2020-03-07 17:56:13
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论