drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #1865

Browse source
This commit is contained in:
梁灏 2017-09-14 15:49:37 +08:00
parent 8c4cc38379
commit e1b86bcf73
3 changed files with 102 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
examples/routers/select.vue
View file

@ -53,33 +53,113 @@
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Select v-model="value">-->
<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
<!--</Select>-->
<!--<Button @click="setList">set list</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value: '',-->
<!--list: []-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--setList () {-->
<!--let list = [];-->
<!--for (let i = 0; i < 400; i++) {-->
<!--list.push({-->
<!--value: 'value' + i,-->
<!--label: 'label' + i-->
<!--});-->
<!--}-->
<!--this.list = list;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<div>
<Select v-model="value">
<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>
</Select>
<Button @click="setList">set list</Button>
<div style="width: 400px;margin: 50px;">
<div>data: {{ model13 }}</div>
<Row>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col>
</Row>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
list: []
model13: '',
loading1: false,
options1: [],
model14: [],
loading2: false,
options2: [],
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']
}
},
methods: {
setList () {
let list = [];
for (let i = 0; i < 400; i++) {
list.push({
value: 'value' + i,
label: 'label' + i
});
remoteMethod1 (query) {
if (query !== '') {
this.loading1 = true;
setTimeout(() => {
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options1 = [];
}
},
remoteMethod2 (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options2 = [];
}
this.list = list;
}
}
}
</script>
</script>

6
src/components/select/option.vue
View file

@ -63,10 +63,14 @@
queryChange (val) {
const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
},
// 在使用函数防抖后，设置 key 后，不更新组件了，导致SearchLabel 不更新 #1865
updateSearchLabel () {
this.searchLabel = this.$el.innerHTML;
}
},
mounted () {
this.searchLabel = this.$el.innerHTML;
this.updateSearchLabel();
this.dispatch('iSelect', 'append');
this.$on('on-select-close', () => {
this.isFocus = false;

1
src/components/select/select.vue
View file

@ -627,6 +627,7 @@
this.$nextTick(() => this.broadcastQuery(''));
} else {
this.findChild((child) => {
child.updateSearchLabel(); // #1865
child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
});
}