欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

解决 el-autocomplete 在没有数据时不显示和闪烁的问题。

最编程 2024-03-08 22:03:26
...
data() { return { cname: "" }; }, methods: { oop(e) { //这里能获取到点击的input框的自定义类名,这里我命为cname0,cname1,cname3,... this.cname = e; }, querySearch(queryString, cb) { //queryString是input的值,cb是回调函数; var tem_list = []; API.wordSuggest({ word: queryString }) .then(rs => { //这里假设返回的rs是参数为 {word:山西} 的数据,rs= ["山西一零九医院", "山西万荣技师学院", "山西万辉制药", "山西三化饮料", "山西三奇疗养院", "山西三立化工", "山西三通电子", "山西三针脑血管病医院", "山西三院", "山西下"]; rs.map((item, index) => { var tem_obj = {}; tem_obj.value = item; tem_list.push(tem_obj); }); var restaurants = tem_list;
// 在样式里所有的下拉列表都隐藏了,这里判断如果数据不为空则通过指定的class名显示下拉列表, // 这时候的restaurants就是要elementUI规定的格式:[{value:"山西一零九医院"}, {value:"山西万荣技师学院"}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] var $cname = document.querySelector("." + this.cname); restaurants.length > 0 ? ($cname.style.display = "block") : ""; var results = queryString? restaurants.filter(this.createFilter(queryString)): restaurants; // 调用 callback 返回建议列表的数据 cb(results); }) .catch(error => {console.log(error);}); }, createFilter(queryString) { return state => { return ( state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ); }; } },

<style>

推荐阅读