el-autocomplete模糊查询 

1 <el-autocomplete
2                 class="inline-input"
3                 clearable
4                 @clear="queryAll"
5                 v-model="queryAutomatic"
6                 :fetch-suggestions="querySearch"
7                 placeholder="请输入品规"
8                 @select="handleSelect"
9               ></el-autocomplete>
 1 data () {
 2     return {
 3       queryAutomatic: '',
 4       automaticForm: [],
 5     }
 6 },
 7 mounted () {
 8     this.getAllInfo()
 9   },
10   methods: {
11     getAllInfo() {
12       this.AutomaticArr.dataSeries = []
13       this.AutomaticArr.axisList = []
14       // 下边是获取数据的接口
15       getInventoryDetails().then(req => {
16         let matchObj = {
17           'date': 'value',
18           'value': 'name'
19         }
20         this.automaticForm = req.data.driveRoomKeyValueVosG.map((item) => ({
21           [matchObj.date]: item.date,
22           [matchObj.value]: item.value
23         }))
24         req.data.driveRoomKeyValueVosG.forEach(item => {
25           this.AutomaticArr.dataSeries.push(item.value)
26           this.AutomaticArr.axisList.push(item.date)
27         })
28       })
29     },
30     // 查询
31     querySearch(queryString, cb) {
32       var automaticForm = this.automaticForm;
33       var results = queryString ? automaticForm.filter(this.createFilter(queryString)) : automaticForm;
34       // 调用 callback 返回建议列表的数据
35       cb(results);
36     },
37     createFilter(queryString) {
38       return (item) => {
39         return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
40       };
41     },
42     handleSelect(item) {
43       this.AutomaticArr.dataSeries = []
44       this.AutomaticArr.axisList = []
45       this.AutomaticArr.dataSeries.push(item.name)
46       this.AutomaticArr.axisList.push(item.value)
47     },
48     queryAll() {  // 条件查询叉掉之后将所有的信息再显示出来
49       this.AutomaticArr.dataSeries = []
50       this.AutomaticArr.axisList = []
51       this.automaticForm.forEach(item => {
52         this.AutomaticArr.dataSeries.push(item.name)
53         this.AutomaticArr.axisList.push(item.value)
54       })
55     }
56   },
req.data.driveRoomKeyValueVosG获取的后端数据形式是：

 

要先将数组中的date和value属性换成value和name（具体是为什么我也不太清楚，只有这样才能出来），

querySearch、createFilter、handleSelect方法都是按照element官网的代码来的

 

posted @ 2022-05-25 17:59  //唉  阅读(464)  评论(0)    收藏  举报