Merge pull request #81 from Leopoldthecoder/next

fix select bugs
pull/2/head
baiyaaaaa 2016-08-22 10:22:06 +08:00 committed by GitHub
commit 019b325a3a
3 changed files with 53 additions and 32 deletions

View File

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

View File

@ -4,7 +4,7 @@
@click.stop="selectOptionClick"
class="el-select-dropdown__item"
v-show="queryPassed"
:class="{ 'selected': itemSelected(), 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
:class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
<slot>
<span>{{ label }}</span>
</slot>
@ -13,7 +13,6 @@
<script type="text/babel">
import emitter from 'main/mixins/emitter';
const toString = Object.prototype.toString;
export default {
mixins: [emitter],
@ -39,7 +38,6 @@
data() {
return {
parent: null,
index: -1,
queryPassed: true,
hitState: false
@ -47,8 +45,24 @@
},
computed: {
parent() {
let result = this.$parent;
while (!result.isSelect) {
result = result.$parent;
}
return result;
},
itemSelected() {
if (Object.prototype.toString.call(this.parent.selected) === '[object Object]') {
return this === this.parent.selected;
} else if (Array.isArray(this.parent.selected)) {
return this.parent.value.indexOf(this.value) > -1;
}
},
currentSelected() {
return this.selected || (this.$parent.multiple ? this.$parent.value.indexOf(this.value) > -1 : this.$parent.value === this.value);
return this.selected || (this.parent.multiple ? this.parent.value.indexOf(this.value) > -1 : this.parent.value === this.value);
}
},
@ -77,27 +91,21 @@
}
},
itemSelected() {
if (toString.call(this.parent.selected) === '[object Object]') {
return this === this.parent.selected;
} else if (toString.call(this.parent.selected) === '[object Array]') {
return this.parent.selected.indexOf(this) > -1;
}
},
queryChange(query) {
this.queryPassed = new RegExp(query, 'i').test(this.label);
if (!this.queryPassed) {
this.parent.filteredOptionsCount--;
}
},
resetIndex() {
this.$nextTick(() => {
this.index = this.parent.options.indexOf(this);
});
}
},
created() {
this.parent = this.$parent;
while (!this.parent.isSelect) {
this.parent = this.parent.$parent;
}
this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.parent.options.push(this);
this.parent.optionsCount++;
@ -110,6 +118,11 @@
this.$on('queryChange', this.queryChange);
this.$on('disableOptions', this.disableOptions);
this.$on('resetIndex', this.resetIndex);
},
beforeDestroy() {
this.dispatch('select', 'onOptionDestroy', this);
}
};
</script>

View File

@ -53,7 +53,7 @@
ref="popper"
v-show="visible && nodataText !== false"
: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>
</ul>
<p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
@ -185,12 +185,6 @@
},
watch: {
loading(val) {
if (val) {
this.options = [];
}
},
placeholder(val) {
this.currentPlaceholder = val;
},
@ -272,9 +266,6 @@
this.selected = {};
}
this.remoteMethod(val);
if (val === '') {
this.options = [];
}
} else if (typeof this.filterMethod === 'function') {
this.filterMethod(val);
} else {
@ -301,9 +292,6 @@
if (this.selected && this.selected.value) {
this.selectedLabel = this.selected.label;
}
if (this.remote) {
}
}
} else {
if (this.remote) {
@ -512,6 +500,16 @@
if (this.filterable) {
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('handleOptionClick', this.handleOptionSelect);
this.$on('onOptionDestroy', this.onOptionDestroy);
}
};
</script>