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官網的程式碼來的