Commit 45103ca48042177758b7171e7e1c1916a02d122a
1 parent
485a9039
fixed #2066
Showing
2 changed files
with
133 additions
and
29 deletions
Show diff stats
examples/routers/select.vue
| @@ -84,41 +84,140 @@ | @@ -84,41 +84,140 @@ | ||
| 84 | <!--}--> | 84 | <!--}--> |
| 85 | <!--</script>--> | 85 | <!--</script>--> |
| 86 | 86 | ||
| 87 | +<!--<template>--> | ||
| 88 | + <!--<div style="width: 400px;margin: 50px;">--> | ||
| 89 | + <!--<div>data: {{ model13 }}</div>--> | ||
| 90 | + <!--<Row>--> | ||
| 91 | + <!--<Col span="12" style="padding-right:10px">--> | ||
| 92 | + <!--<Select--> | ||
| 93 | + <!--size="small"--> | ||
| 94 | + <!--placeholder="提示提示"--> | ||
| 95 | + <!--v-model="model13"--> | ||
| 96 | + <!--filterable--> | ||
| 97 | + <!--remote--> | ||
| 98 | + <!--transfer--> | ||
| 99 | + <!--:remote-method="remoteMethod1"--> | ||
| 100 | + <!--:loading="loading1">--> | ||
| 101 | + <!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>--> | ||
| 102 | + <!--</Select>--> | ||
| 103 | + <!--</Col>--> | ||
| 104 | + <!--<Col span="12">--> | ||
| 105 | + <!--<Select--> | ||
| 106 | + <!--v-model="model14"--> | ||
| 107 | + <!--multiple--> | ||
| 108 | + <!--filterable--> | ||
| 109 | + <!--remote--> | ||
| 110 | + <!--:remote-method="remoteMethod2"--> | ||
| 111 | + <!--:loading="loading2">--> | ||
| 112 | + <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> | ||
| 113 | + <!--</Select>--> | ||
| 114 | + <!--</Col>--> | ||
| 115 | + <!--</Row>--> | ||
| 116 | + <!--</div>--> | ||
| 117 | +<!--</template>--> | ||
| 118 | +<!--<script>--> | ||
| 119 | + <!--export default {--> | ||
| 120 | + <!--data () {--> | ||
| 121 | + <!--return {--> | ||
| 122 | + <!--model13: '',--> | ||
| 123 | + <!--loading1: false,--> | ||
| 124 | + <!--options1: [],--> | ||
| 125 | + <!--model14: [],--> | ||
| 126 | + <!--loading2: false,--> | ||
| 127 | + <!--options2: [],--> | ||
| 128 | + <!--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']--> | ||
| 129 | + <!--}--> | ||
| 130 | + <!--},--> | ||
| 131 | + <!--methods: {--> | ||
| 132 | + <!--remoteMethod1 (query) {--> | ||
| 133 | + <!--if (query !== '') {--> | ||
| 134 | + <!--this.loading1 = true;--> | ||
| 135 | + <!--setTimeout(() => {--> | ||
| 136 | + <!--this.loading1 = false;--> | ||
| 137 | + <!--const list = this.list.map(item => {--> | ||
| 138 | + <!--return {--> | ||
| 139 | + <!--value: item,--> | ||
| 140 | + <!--label: item--> | ||
| 141 | + <!--};--> | ||
| 142 | + <!--});--> | ||
| 143 | + <!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> | ||
| 144 | + <!--}, 200);--> | ||
| 145 | + <!--} else {--> | ||
| 146 | + <!--this.options1 = [];--> | ||
| 147 | + <!--}--> | ||
| 148 | + <!--},--> | ||
| 149 | + <!--remoteMethod2 (query) {--> | ||
| 150 | + <!--if (query !== '') {--> | ||
| 151 | + <!--this.loading2 = true;--> | ||
| 152 | + <!--setTimeout(() => {--> | ||
| 153 | + <!--this.loading2 = false;--> | ||
| 154 | + <!--const list = this.list.map(item => {--> | ||
| 155 | + <!--return {--> | ||
| 156 | + <!--value: item,--> | ||
| 157 | + <!--label: item--> | ||
| 158 | + <!--};--> | ||
| 159 | + <!--});--> | ||
| 160 | + <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> | ||
| 161 | + <!--}, 200);--> | ||
| 162 | + <!--} else {--> | ||
| 163 | + <!--this.options2 = [];--> | ||
| 164 | + <!--}--> | ||
| 165 | + <!--}--> | ||
| 166 | + <!--}--> | ||
| 167 | + <!--}--> | ||
| 168 | +<!--</script>--> | ||
| 169 | + | ||
| 87 | <template> | 170 | <template> |
| 88 | - <div style="width: 400px;margin: 50px;"> | ||
| 89 | - <div>data: {{ model13 }}</div> | ||
| 90 | - <Row> | ||
| 91 | - <Col span="12" style="padding-right:10px"> | ||
| 92 | - <Select | ||
| 93 | - size="small" | ||
| 94 | - placeholder="提示提示" | ||
| 95 | - v-model="model13" | ||
| 96 | - filterable | ||
| 97 | - remote | ||
| 98 | - transfer | ||
| 99 | - :remote-method="remoteMethod1" | ||
| 100 | - :loading="loading1"> | ||
| 101 | - <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> | ||
| 102 | - </Select> | ||
| 103 | - </Col> | ||
| 104 | - <Col span="12"> | ||
| 105 | - <Select | ||
| 106 | - v-model="model14" | ||
| 107 | - multiple | ||
| 108 | - filterable | ||
| 109 | - remote | ||
| 110 | - :remote-method="remoteMethod2" | ||
| 111 | - :loading="loading2"> | ||
| 112 | - <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> | ||
| 113 | - </Select> | ||
| 114 | - </Col> | ||
| 115 | - </Row> | 171 | + <div> |
| 172 | + {{ model10 }} | ||
| 173 | + <Select v-model="model10" multiple style="width:260px"> | ||
| 174 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
| 175 | + </Select> | ||
| 176 | + ---------- | ||
| 177 | + {{ model14 }} | ||
| 178 | + <Select | ||
| 179 | + v-model="model14" | ||
| 180 | + multiple | ||
| 181 | + filterable | ||
| 182 | + remote | ||
| 183 | + :remote-method="remoteMethod2" | ||
| 184 | + :loading="loading2"> | ||
| 185 | + <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> | ||
| 186 | + </Select> | ||
| 187 | + <Button @click="clear">clear</Button> | ||
| 116 | </div> | 188 | </div> |
| 117 | </template> | 189 | </template> |
| 118 | <script> | 190 | <script> |
| 119 | export default { | 191 | export default { |
| 120 | data () { | 192 | data () { |
| 121 | return { | 193 | return { |
| 194 | + cityList: [ | ||
| 195 | + { | ||
| 196 | + value: 'beijing', | ||
| 197 | + label: '北京市' | ||
| 198 | + }, | ||
| 199 | + { | ||
| 200 | + value: 'shanghai', | ||
| 201 | + label: '上海市' | ||
| 202 | + }, | ||
| 203 | + { | ||
| 204 | + value: 'shenzhen', | ||
| 205 | + label: '深圳市' | ||
| 206 | + }, | ||
| 207 | + { | ||
| 208 | + value: 'hangzhou', | ||
| 209 | + label: '杭州市' | ||
| 210 | + }, | ||
| 211 | + { | ||
| 212 | + value: 'nanjing', | ||
| 213 | + label: '南京市' | ||
| 214 | + }, | ||
| 215 | + { | ||
| 216 | + value: 'chongqing', | ||
| 217 | + label: '重庆市' | ||
| 218 | + } | ||
| 219 | + ], | ||
| 220 | + model10: [], | ||
| 122 | model13: '', | 221 | model13: '', |
| 123 | loading1: false, | 222 | loading1: false, |
| 124 | options1: [], | 223 | options1: [], |
| @@ -162,6 +261,9 @@ | @@ -162,6 +261,9 @@ | ||
| 162 | } else { | 261 | } else { |
| 163 | this.options2 = []; | 262 | this.options2 = []; |
| 164 | } | 263 | } |
| 264 | + }, | ||
| 265 | + clear () { | ||
| 266 | + this.model14 = []; | ||
| 165 | } | 267 | } |
| 166 | } | 268 | } |
| 167 | } | 269 | } |
src/components/select/select.vue
| @@ -369,6 +369,7 @@ | @@ -369,6 +369,7 @@ | ||
| 369 | 369 | ||
| 370 | const selectedArray = []; | 370 | const selectedArray = []; |
| 371 | const selectedObject = {}; | 371 | const selectedObject = {}; |
| 372 | + | ||
| 372 | selected.forEach(item => { | 373 | selected.forEach(item => { |
| 373 | if (!selectedObject[item.value]) { | 374 | if (!selectedObject[item.value]) { |
| 374 | selectedArray.push(item); | 375 | selectedArray.push(item); |
| @@ -376,7 +377,8 @@ | @@ -376,7 +377,8 @@ | ||
| 376 | } | 377 | } |
| 377 | }); | 378 | }); |
| 378 | 379 | ||
| 379 | - this.selectedMultiple = this.remote ? selectedArray : selected; | 380 | + // #2066 |
| 381 | + this.selectedMultiple = this.remote ? this.model.length ? selectedArray : [] : selected; | ||
| 380 | 382 | ||
| 381 | if (slot) { | 383 | if (slot) { |
| 382 | let selectedModel = []; | 384 | let selectedModel = []; |