select.vue
3.09 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
<template>
<Row>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="option in options1" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="option in options2" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
model13: '',
loading1: false,
options1: [],
model14: [],
loading2: false,
options2: [],
list: ['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'],
}
},
methods: {
remoteMethod1 (query) {
if (query !== '') {
this.loading1 = true;
setTimeout(() => {
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options1 = [];
}
},
remoteMethod2 (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options2 = [];
}
}
}
}
</script>