Commit ea3648b3c2d201bbecd056cf5edf70945550eb36
1 parent
1a97aa89
update Select
Showing
2 changed files
with
62 additions
and
40 deletions
Show diff stats
examples/routers/select.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div> | ||
| 3 | - <Select v-model="model1" style="width:200px"> | ||
| 4 | - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | 2 | + <Row> |
| 3 | + <Col span="12" style="padding-right:10px"> | ||
| 4 | + <Select | ||
| 5 | + v-model="model13" | ||
| 6 | + filterable | ||
| 7 | + remote | ||
| 8 | + :remote-method="remoteMethod1" | ||
| 9 | + :loading="loading1"> | ||
| 10 | + <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> | ||
| 5 | </Select> | 11 | </Select> |
| 6 | - | ||
| 7 | - <Select v-model="model2" multiple style="width:200px"> | ||
| 8 | - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | 12 | + </Col> |
| 13 | + <Col span="12"> | ||
| 14 | + <Select | ||
| 15 | + v-model="model14" | ||
| 16 | + multiple | ||
| 17 | + filterable | ||
| 18 | + remote | ||
| 19 | + :remote-method="remoteMethod2" | ||
| 20 | + :loading="loading2"> | ||
| 21 | + <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> | ||
| 9 | </Select> | 22 | </Select> |
| 10 | - | ||
| 11 | - <Button type="primary" @click="changeData">changeData</Button> | ||
| 12 | - </div> | 23 | + </Col> |
| 24 | + </Row> | ||
| 13 | </template> | 25 | </template> |
| 14 | <script> | 26 | <script> |
| 15 | export default { | 27 | export default { |
| 16 | data () { | 28 | data () { |
| 17 | return { | 29 | return { |
| 18 | - cityList: [ | ||
| 19 | - { | ||
| 20 | - value: 'New York', | ||
| 21 | - label: 'New York' | ||
| 22 | - }, | ||
| 23 | - { | ||
| 24 | - value: 'London', | ||
| 25 | - label: 'London' | ||
| 26 | - }, | ||
| 27 | - { | ||
| 28 | - value: 'Sydney', | ||
| 29 | - label: 'Sydney' | ||
| 30 | - }, | ||
| 31 | - { | ||
| 32 | - value: 'Ottawa', | ||
| 33 | - label: 'Ottawa' | ||
| 34 | - }, | ||
| 35 | - { | ||
| 36 | - value: 'Paris', | ||
| 37 | - label: 'Paris' | ||
| 38 | - }, | ||
| 39 | - { | ||
| 40 | - value: 'Canberra', | ||
| 41 | - label: 'Canberra' | ||
| 42 | - } | ||
| 43 | - ], | ||
| 44 | - model1: '', | ||
| 45 | - model2: [] | 30 | + model13: '', |
| 31 | + loading1: false, | ||
| 32 | + options1: [], | ||
| 33 | + model14: [], | ||
| 34 | + loading2: false, | ||
| 35 | + options2: [], | ||
| 36 | + 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'] | ||
| 46 | } | 37 | } |
| 47 | }, | 38 | }, |
| 48 | methods: { | 39 | methods: { |
| 49 | - changeData() { | ||
| 50 | - this.model2.push('Canberra') | 40 | + remoteMethod1 (query) { |
| 41 | + if (query !== '') { | ||
| 42 | + this.loading1 = true; | ||
| 43 | + setTimeout(() => { | ||
| 44 | + this.loading1 = false; | ||
| 45 | + const list = this.list.map(item => { | ||
| 46 | + return { | ||
| 47 | + value: item, | ||
| 48 | + label: item | ||
| 49 | + }; | ||
| 50 | + }); | ||
| 51 | + this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); | ||
| 52 | + }, 200); | ||
| 53 | + } else { | ||
| 54 | + this.options1 = []; | ||
| 55 | + } | ||
| 56 | + }, | ||
| 57 | + remoteMethod2 (query) { | ||
| 58 | + if (query !== '') { | ||
| 59 | + this.loading2 = true; | ||
| 60 | + setTimeout(() => { | ||
| 61 | + this.loading2 = false; | ||
| 62 | + const list = this.list.map(item => { | ||
| 63 | + return { | ||
| 64 | + value: item, | ||
| 65 | + label: item | ||
| 66 | + }; | ||
| 67 | + }); | ||
| 68 | + this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); | ||
| 69 | + }, 200); | ||
| 70 | + } else { | ||
| 71 | + this.options2 = []; | ||
| 72 | + } | ||
| 51 | } | 73 | } |
| 52 | } | 74 | } |
| 53 | } | 75 | } |
src/components/select/select.vue
| @@ -761,7 +761,7 @@ | @@ -761,7 +761,7 @@ | ||
| 761 | }, | 761 | }, |
| 762 | slotOptions(options, old){ | 762 | slotOptions(options, old){ |
| 763 | // #4626，当 Options 的 label 更新时，v-model 的值未更新 | 763 | // #4626，当 Options 的 label 更新时，v-model 的值未更新 |
| 764 | - if (options && options.length && this.values.length) { | 764 | + if (options && options.length && this.values.length && !this.multiple) { |
| 765 | this.values = this.values.map(value => { | 765 | this.values = this.values.map(value => { |
| 766 | const option = options.find(option => { | 766 | const option = options.find(option => { |
| 767 | if (!option.componentOptions) return false; | 767 | if (!option.componentOptions) return false; |