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 | 84 | <!--}--> |
85 | 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 | 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 | 188 | </div> |
117 | 189 | </template> |
118 | 190 | <script> |
119 | 191 | export default { |
120 | 192 | data () { |
121 | 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 | 221 | model13: '', |
123 | 222 | loading1: false, |
124 | 223 | options1: [], |
... | ... | @@ -162,6 +261,9 @@ |
162 | 261 | } else { |
163 | 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 | 369 | |
370 | 370 | const selectedArray = []; |
371 | 371 | const selectedObject = {}; |
372 | + | |
372 | 373 | selected.forEach(item => { |
373 | 374 | if (!selectedObject[item.value]) { |
374 | 375 | selectedArray.push(item); |
... | ... | @@ -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 | 383 | if (slot) { |
382 | 384 | let selectedModel = []; | ... | ... |