Commit 89828b5b9c866d34c7d7a58c0243a26ea1ff3f50
1 parent
364aac02
update Select
Showing
2 changed files
with
79 additions
and
44 deletions
Show diff stats
examples/routers/select.vue
| 1 | +<!--<template>--> | ||
| 2 | + <!--<div>--> | ||
| 3 | + <!--{{ model10 }} - --> | ||
| 4 | + <!--{{ model11 }}--> | ||
| 5 | + <!--<Select v-model="model10" style="width:260px">--> | ||
| 6 | + <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> | ||
| 7 | + <!--</Select>--> | ||
| 8 | + <!--<Select v-model="model11" style="width:260px">--> | ||
| 9 | + <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> | ||
| 10 | + <!--</Select>--> | ||
| 11 | + <!--</div>--> | ||
| 12 | +<!--</template>--> | ||
| 13 | +<!--<script>--> | ||
| 14 | + <!--export default {--> | ||
| 15 | + <!--data () {--> | ||
| 16 | + <!--return {--> | ||
| 17 | + <!--cityList: [],--> | ||
| 18 | + <!--model10: '',--> | ||
| 19 | + <!--model11: '',--> | ||
| 20 | + <!--model12: ''--> | ||
| 21 | + <!--}--> | ||
| 22 | + <!--},--> | ||
| 23 | + <!--mounted () {--> | ||
| 24 | + <!--setTimeout(() => {--> | ||
| 25 | + <!--this.cityList = [--> | ||
| 26 | + <!--{--> | ||
| 27 | + <!--value: 'beijing',--> | ||
| 28 | + <!--label: '北京市'--> | ||
| 29 | + <!--},--> | ||
| 30 | + <!--{--> | ||
| 31 | + <!--value: 'shanghai',--> | ||
| 32 | + <!--label: '上海市'--> | ||
| 33 | + <!--},--> | ||
| 34 | + <!--{--> | ||
| 35 | + <!--value: 'shenzhen',--> | ||
| 36 | + <!--label: '深圳市'--> | ||
| 37 | + <!--},--> | ||
| 38 | + <!--{--> | ||
| 39 | + <!--value: 'hangzhou',--> | ||
| 40 | + <!--label: '杭州市'--> | ||
| 41 | + <!--},--> | ||
| 42 | + <!--{--> | ||
| 43 | + <!--value: 'nanjing',--> | ||
| 44 | + <!--label: '南京市'--> | ||
| 45 | + <!--},--> | ||
| 46 | + <!--{--> | ||
| 47 | + <!--value: 'chongqing',--> | ||
| 48 | + <!--label: '重庆市'--> | ||
| 49 | + <!--}--> | ||
| 50 | + <!--];--> | ||
| 51 | + <!--}, 1000);--> | ||
| 52 | + <!--}--> | ||
| 53 | + <!--}--> | ||
| 54 | +<!--</script>--> | ||
| 55 | + | ||
| 1 | <template> | 56 | <template> |
| 2 | <div> | 57 | <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> | ||
| 5 | - </Select> | ||
| 6 | - <Select v-model="model2" style="width:200px"> | ||
| 7 | - <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | 58 | + <Select v-model="value"> |
| 59 | + <Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option> | ||
| 8 | </Select> | 60 | </Select> |
| 61 | + <Button @click="setList">set list</Button> | ||
| 9 | </div> | 62 | </div> |
| 10 | </template> | 63 | </template> |
| 11 | <script> | 64 | <script> |
| 12 | export default { | 65 | export default { |
| 13 | data () { | 66 | data () { |
| 14 | return { | 67 | return { |
| 15 | - cityList: [ | ||
| 16 | - { | ||
| 17 | - value: 'beijing', | ||
| 18 | - label: '北京市' | ||
| 19 | - }, | ||
| 20 | - { | ||
| 21 | - value: 'shanghai', | ||
| 22 | - label: '上海市' | ||
| 23 | - }, | ||
| 24 | - { | ||
| 25 | - value: 'shenzhen', | ||
| 26 | - label: '深圳市' | ||
| 27 | - }, | ||
| 28 | - { | ||
| 29 | - value: 'hangzhou', | ||
| 30 | - label: '杭州市' | ||
| 31 | - }, | ||
| 32 | - { | ||
| 33 | - value: 'nanjing', | ||
| 34 | - label: '南京市' | ||
| 35 | - }, | ||
| 36 | - { | ||
| 37 | - value: 'chongqing', | ||
| 38 | - label: '重庆市' | ||
| 39 | - } | ||
| 40 | - ], | ||
| 41 | - model1: 'beijing', | ||
| 42 | - model2: 'shanghai' | 68 | + value: '', |
| 69 | + list: [] | ||
| 70 | + } | ||
| 71 | + }, | ||
| 72 | + methods: { | ||
| 73 | + setList () { | ||
| 74 | + let list = []; | ||
| 75 | + for (let i = 0; i < 400; i++) { | ||
| 76 | + list.push({ | ||
| 77 | + value: 'value' + i, | ||
| 78 | + label: 'label' + i | ||
| 79 | + }); | ||
| 80 | + } | ||
| 81 | + this.list = list; | ||
| 43 | } | 82 | } |
| 44 | } | 83 | } |
| 45 | } | 84 | } |
| 46 | -</script> | 85 | -</script> |
| 86 | +</script> | ||
| 47 | \ No newline at end of file | 87 | \ No newline at end of file |
src/components/select/select.vue
| @@ -285,7 +285,7 @@ | @@ -285,7 +285,7 @@ | ||
| 285 | }); | 285 | }); |
| 286 | } | 286 | } |
| 287 | }, | 287 | }, |
| 288 | - updateOptions (init, slot = false) { | 288 | + updateOptions (slot = false) { |
| 289 | let options = []; | 289 | let options = []; |
| 290 | let index = 1; | 290 | let index = 1; |
| 291 | 291 | ||
| @@ -296,18 +296,14 @@ | @@ -296,18 +296,14 @@ | ||
| 296 | }); | 296 | }); |
| 297 | child.index = index++; | 297 | child.index = index++; |
| 298 | 298 | ||
| 299 | - if (init) { | ||
| 300 | - this.optionInstances.push(child); | ||
| 301 | - } | 299 | + this.optionInstances.push(child); |
| 302 | }); | 300 | }); |
| 303 | 301 | ||
| 304 | this.options = options; | 302 | this.options = options; |
| 305 | 303 | ||
| 306 | - if (init) { | ||
| 307 | - if (!this.remote) { | ||
| 308 | - this.updateSingleSelected(true, slot); | ||
| 309 | - this.updateMultipleSelected(true, slot); | ||
| 310 | - } | 304 | + if (!this.remote) { |
| 305 | + this.updateSingleSelected(true, slot); | ||
| 306 | + this.updateMultipleSelected(true, slot); | ||
| 311 | } | 307 | } |
| 312 | }, | 308 | }, |
| 313 | updateSingleSelected (init = false, slot = false) { | 309 | updateSingleSelected (init = false, slot = false) { |
| @@ -635,7 +631,7 @@ | @@ -635,7 +631,7 @@ | ||
| 635 | }); | 631 | }); |
| 636 | } | 632 | } |
| 637 | this.slotChange(); | 633 | this.slotChange(); |
| 638 | - this.updateOptions(true, true); | 634 | + this.updateOptions(true); |
| 639 | }); | 635 | }); |
| 640 | }, | 636 | }, |
| 641 | // 处理 remote 初始值 | 637 | // 处理 remote 初始值 |