el-autocomplete匹配搜索使用_el-autocomplete 搜索

1.添加元素

<el-autocomplete
             v-model="text"
             :fetch-suggestions="fetchPoint"
             placeholder="输入内容"
     >
</el-autocomplete>
1
2
3
4
5
6

2.js代码

fetchPoint(name, callback) {
                this.$data.loading += 1;
                let list = [{}];
                api
                    .get('/api/website/publictransportation/map',{
                        params: assignIn({}, {name: name})
                    }).then((response) => {

                        let map = response.data;

                        for(let key in map) {
                            list.push({key: key, value:map[key]});
                        }

                        callback(list);
                    })
                    .finally(() => {
                        this.$data.loading -= 1;
                    });
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在输入框输入查询值时，会传递给name，后台根据name查询结果返回并回显给下拉列表。注意：list.push({key: key, value:map[key]});这里需要有一个value名（默认为value），有需要可以更改这个名称。