element ui 组件el-autocomplete的使用方法(输入建议,利用filter和include)

 我们首先要先将标签写出来,其次写入一些属性,这个直接去官网粘贴即可!

 

我们可以看到,这个代码,需要写一个函数,也就是querySearch,所以我们在methods里面写入这个方法,这个方法要传入两个值,一个query(这个随便写),还有一个cb,这个不是随便写的,接下来看代码实现吧

export default {
    data() {
        return {
            coffees:[{
                value:'1星巴克咖啡'
            },{
                value:'2瑞星咖啡'
            },{
                value:'3库迪咖啡'
            }]
        }
    },
    methods: {
        querySearch(query, cb) {
            let results =  query ? this.coffees.filter(v=>v.value.includes(query)) : this.coffees
            console.log(results);
            cb(results);
        }
    }
}

这里面有两个注意的点,第一个就是data里面的coffees是一个对象数组,不是一个单纯的数组,第二个就是一定要有cb返回!我们这里海涌到了filter和includes,顺便也说一下吧

filter就是过滤器,他可以过滤出我们想要的东西

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(num => num > 5);
console.log(filteredNumbers); // 输出 [6, 7, 8, 9, 10]

include就是包含,它可以判断数组中是否包含某个元素

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // 输出 true
console.log(fruits.includes('grape')); // 输出 false

这就是本期分享,谢谢大家观看

你可能感兴趣的:(ui,vue.js,javascript,elementui,前端)