select.vue
3.23 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
<Row>
<i-col span="4">{{model}}</i-col>
<i-col span="8">
<i-select v-model="model" multiple filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
<i-option v-for="option in options" :value="option.value" :key="option">{{option.label}}</i-option>
</i-select>
</i-col>
</Row>
</template>
<script>
export default {
data () {
return {
model: [],
options: [
],
list: [],
loading: false,
states: ["Al", "Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted () {
this.options = [
// {
// label: '全部',
// value: 0
// },{
// label: '苹果',
// value: 1
// },{
// label: '香蕉',
// value: 2
// },{
// label: '西瓜',
// value: 3
// }
];
},
methods: {
handleAdd () {
this.options = [
{
label: '全部',
value: 0
},{
label: '苹果',
value: 1
},{
label: '香蕉',
value: 2
},{
label: '西瓜',
value: 3
}
]
},
remoteMethod (query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 500);
} else {
this.options = [];
}
}
},
mounted () {
this.list = this.states.map(item => {
return { value: item, label: item };
});
}
}
</script>