Commit f7674b5b74af55565f493ddbe4410cc6ac11f265
1 parent
cc419499
#518
Showing
2 changed files
with
20 additions
and
50 deletions
Show diff stats
examples/routers/select.vue
| @@ -193,62 +193,31 @@ | @@ -193,62 +193,31 @@ | ||
| 193 | 193 | ||
| 194 | <template> | 194 | <template> |
| 195 | <div> | 195 | <div> |
| 196 | - <Row> | ||
| 197 | - <i-col span="12" style="padding-right:10px"> | ||
| 198 | - <Select v-model="model11" filterable> | ||
| 199 | - <Option-group label="123"> | ||
| 200 | - <i-option value="beijing">北京市</i-option> | ||
| 201 | - <i-option value="shanghai">上海市</i-option> | ||
| 202 | - </Option-group> | ||
| 203 | - <Option-group label="456"> | ||
| 204 | - <i-option value="shenzhen">深圳市</i-option> | ||
| 205 | - <i-option value="hangzhou">杭州市</i-option> | ||
| 206 | - </Option-group> | ||
| 207 | - <i-option value="nanjing">南京市</i-option> | ||
| 208 | - <i-option value="chongqing">重庆市</i-option> | ||
| 209 | - </Select> | ||
| 210 | - </i-col> | ||
| 211 | - <i-col span="12"> | ||
| 212 | - <Select v-model="model12" filterable multiple> | ||
| 213 | - <i-option v-for="item in cityList" :key="item" :value="item.value">{{ item.label }}</i-option> | ||
| 214 | - </Select> | ||
| 215 | - </i-col> | ||
| 216 | - </Row> | ||
| 217 | - <div @click="model11 = 'shanghai'">change</div> | 196 | + <i-select v-model="d" filterable style="width: 200px" multiple> |
| 197 | + <i-option v-for="e in uList" :value="e.id" :label="e.name"> | ||
| 198 | + <span>{{ e.name }}</span> | ||
| 199 | + <span style="float:right;color:#ccc">{{ e.id }}</span> | ||
| 200 | + </i-option> | ||
| 201 | + </i-select> | ||
| 202 | + <p>{{d}}</p> | ||
| 203 | + <i-button type="primary" v-on:click="clear">清空</i-button> | ||
| 218 | </div> | 204 | </div> |
| 219 | </template> | 205 | </template> |
| 220 | <script> | 206 | <script> |
| 221 | export default { | 207 | export default { |
| 222 | data () { | 208 | data () { |
| 223 | return { | 209 | return { |
| 224 | - cityList: [ | ||
| 225 | - { | ||
| 226 | - value: 'beijing', | ||
| 227 | - label: '北京市' | ||
| 228 | - }, | ||
| 229 | - { | ||
| 230 | - value: 'shanghai', | ||
| 231 | - label: '上海市' | ||
| 232 | - }, | ||
| 233 | - { | ||
| 234 | - value: 'shenzhen', | ||
| 235 | - label: '深圳市' | ||
| 236 | - }, | ||
| 237 | - { | ||
| 238 | - value: 'hangzhou', | ||
| 239 | - label: '杭州市' | ||
| 240 | - }, | ||
| 241 | - { | ||
| 242 | - value: 'nanjing', | ||
| 243 | - label: '南京市' | ||
| 244 | - }, | ||
| 245 | - { | ||
| 246 | - value: 'chongqing', | ||
| 247 | - label: '重庆市' | ||
| 248 | - } | ||
| 249 | - ], | ||
| 250 | - model11: '', | ||
| 251 | - model12: [] | 210 | + d: [], |
| 211 | + uList : [ | ||
| 212 | + {id:1,name:"中国"}, | ||
| 213 | + {id:2,name:"美国"}, | ||
| 214 | + {id:3,name:"韩国"} | ||
| 215 | + ] | ||
| 216 | + } | ||
| 217 | + }, | ||
| 218 | + methods: { | ||
| 219 | + clear(){ | ||
| 220 | + this.d = []; | ||
| 252 | } | 221 | } |
| 253 | } | 222 | } |
| 254 | } | 223 | } |
src/components/select/select.vue
| @@ -563,6 +563,7 @@ | @@ -563,6 +563,7 @@ | ||
| 563 | watch: { | 563 | watch: { |
| 564 | value (val) { | 564 | value (val) { |
| 565 | this.model = val; | 565 | this.model = val; |
| 566 | + if (val === '') this.query = ''; | ||
| 566 | }, | 567 | }, |
| 567 | model () { | 568 | model () { |
| 568 | this.$emit('input', this.model); | 569 | this.$emit('input', this.model); |