fix select bugs

pull/2/head
Leopoldthecoder 2016-08-20 15:00:01 +08:00
parent 1e317a3c3b
commit 139a30745c
3 changed files with 36 additions and 17 deletions

View File

@ -2,6 +2,7 @@
export default { export default {
data() { data() {
return { return {
list: null,
options: [{ options: [{
value: '选项1', value: '选项1',
label: '黄金糕' label: '黄金糕'
@ -127,6 +128,10 @@
states: ["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"] states: ["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"]
}; };
}, },
mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; });
},
methods: { methods: {
remoteMethod(query) { remoteMethod(query) {
@ -134,8 +139,10 @@
this.loading = true; this.loading = true;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query.toLowerCase()) > -1).map(item => { return { value: item, label: item }; }); this.options5 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200); }, 200);
} else {
this.options5 = [];
} }
} }
} }
@ -716,8 +723,8 @@
## 服务端搜索 ## 服务端搜索
<el-select v-model="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading"> <el-select v-model="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading" placeholder="请输入关键词">
<el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
@ -727,10 +734,12 @@
multiple multiple
filterable filterable
remote remote
placeholder="请输入关键词"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
<el-option <el-option
v-for="item in options5" v-for="item in options5"
:key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>

View File

@ -81,7 +81,7 @@
if (toString.call(this.parent.selected) === '[object Object]') { if (toString.call(this.parent.selected) === '[object Object]') {
return this === this.parent.selected; return this === this.parent.selected;
} else if (toString.call(this.parent.selected) === '[object Array]') { } else if (toString.call(this.parent.selected) === '[object Array]') {
return this.parent.selected.indexOf(this) > -1; return this.parent.value.indexOf(this.value) > -1;
} }
}, },
@ -90,6 +90,12 @@
if (!this.queryPassed) { if (!this.queryPassed) {
this.parent.filteredOptionsCount--; this.parent.filteredOptionsCount--;
} }
},
resetIndex() {
this.$nextTick(() => {
this.index = this.parent.options.indexOf(this);
});
} }
}, },
@ -110,6 +116,11 @@
this.$on('queryChange', this.queryChange); this.$on('queryChange', this.queryChange);
this.$on('disableOptions', this.disableOptions); this.$on('disableOptions', this.disableOptions);
this.$on('resetIndex', this.resetIndex);
},
beforeDestroy() {
this.dispatch('select', 'onOptionDestroy', this);
} }
}; };
</script> </script>

View File

@ -53,7 +53,7 @@
ref="popper" ref="popper"
v-show="visible && nodataText !== false" v-show="visible && nodataText !== false"
:style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }"> :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
<ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0"> <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0 && !loading">
<slot></slot> <slot></slot>
</ul> </ul>
<p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p> <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
@ -185,12 +185,6 @@
}, },
watch: { watch: {
loading(val) {
if (val) {
this.options = [];
}
},
placeholder(val) { placeholder(val) {
this.currentPlaceholder = val; this.currentPlaceholder = val;
}, },
@ -272,9 +266,6 @@
this.selected = {}; this.selected = {};
} }
this.remoteMethod(val); this.remoteMethod(val);
if (val === '') {
this.options = [];
}
} else if (typeof this.filterMethod === 'function') { } else if (typeof this.filterMethod === 'function') {
this.filterMethod(val); this.filterMethod(val);
} else { } else {
@ -301,9 +292,6 @@
if (this.selected && this.selected.value) { if (this.selected && this.selected.value) {
this.selectedLabel = this.selected.label; this.selectedLabel = this.selected.label;
} }
if (this.remote) {
}
} }
} else { } else {
if (this.remote) { if (this.remote) {
@ -512,6 +500,16 @@
if (this.filterable) { if (this.filterable) {
this.query = this.selectedLabel; this.query = this.selectedLabel;
} }
},
onOptionDestroy(option) {
this.optionsCount--;
this.filteredOptionsCount--;
let index = this.options.indexOf(option);
if (index > -1) {
this.options.splice(index, 1);
}
this.broadcast('option', 'resetIndex');
} }
}, },
@ -528,6 +526,7 @@
this.$on('addOptionToValue', this.addOptionToValue); this.$on('addOptionToValue', this.addOptionToValue);
this.$on('handleOptionClick', this.handleOptionSelect); this.$on('handleOptionClick', this.handleOptionSelect);
this.$on('onOptionDestroy', this.onOptionDestroy);
} }
}; };
</script> </script>