Element组件---带输入建议的input小坑
程序员文章站
2022-06-07 15:35:15
...
组件el-autocomplete小坑
不再赘述使用方法,这个组件的api文档非常齐全,可以参考官方地址------element-input
从文档里扒下来:fetch-suggestions="querySearch"如下,
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
//这段语句的数据源只能被识别value属性
};
},
重点在于,输入建议只识别数据源value键对应的data作为数据,否则弹出的下拉框会一片空白.
上一篇: ElementUI输入框设置样式
下一篇: linux大文件压缩及解压需要注意问题
推荐阅读
-
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
-
详解使用element-ui table组件的筛选功能的一个小坑
-
微信小程序picker组件下拉框选择input输入框的实例
-
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
-
vue中使用element ui的input框做一个带远程搜索的输入框
-
element-ui带输入建议的input框踩坑--输入建议空白
-
Element组件---带输入建议的input小坑
-
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
-
详解使用element-ui table组件的筛选功能的一个小坑
-
微信小程序picker组件下拉框选择input输入框的实例