1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <template>
| <div>
| <el-autocomplete
| class="inline-input"
| v-model="inputValue"
| :fetch-suggestions="querySearch"
| placeholder="地点/摄像机名称"
| value-key="name"
| @select="handleSelect">
|
| </el-autocomplete>
| </div>
| </template>
| <script>
| import {
| Input, Autocomplete
| } from 'element-ui'
| export default {
| props: {
| selectList: {
| type: Array,
| default: function() {
| return []
| }
| }
| },
| components: {
| elInput: Input,
| elAutocomplete: Autocomplete
| },
| data() {
| return {
| inputValue: '',
| /** 定义一个数组用于存储所有的数据 */
| restaurants: []
| }
| },
| methods: {
| /** 鼠标在input框上的时候出发的查询所有事件 */
| querySearch(queryString, cb) {
| var restaurants = this.restaurants
| var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
| // 调用 callback 返回建议列表的数据
| cb(results)
| },
| createFilter(queryString) {
| return (restaurant) => {
| return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
| }
| },
| handleSelect(item) {
| console.log(item)
| this.$emit('selectDevice', item)
| },
| /** loadAll */
| loadAll() {
| return []
| },
| /** 给父组件返回Input值 */
| backInput() {
| return this.inputValue
| }
| },
| mounted() {
| // this.restaurants = this.loadAll()
| console.log(this.selectList, 'autoInput this.selectList')
| this.restaurants = this.selectList
| }
| }
| </script>
| <style>
| </style>
|
|
