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

fixed Select bug when options is null and keydown up or down

Browse source
This commit is contained in:
梁灏 2018-02-09 16:07:24 +08:00
parent f0c2af9d2d
commit 500694ba39
2 changed files with 61 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
examples/routers/select.vue
View file

@ -219,15 +219,25 @@
<template> <template>
<Row> <Row>
<Col span="12" style="padding-right:10px"> <Col span="12" style="padding-right:10px">
<Select v-model="model11" disabled filterable> <Select
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 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> </Select>
</Col> </Col>
<Col span="12"> <Col span="12">
<!--<Select v-model="model12" filterable multiple>--> <Select
<!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>--> v-model="model14"
<!--</Select>--> multiple
<Input v-model="model13" disabled="" /> filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col> </Col>
</Row> </Row>
</template> </template>
@ -235,37 +245,52 @@
export default { export default {
data () { data () {
return { return {
cityList: [ model13: '',
{ loading1: false,
value: 'New York', options1: [],
label: 'New York' model14: [],
}, loading2: false,
{ options2: [],
value: 'London', 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']
label: 'London' }
}, },
{ methods: {
value: 'Sydney', remoteMethod1 (query) {
label: 'Sydney' if (query !== '') {
}, this.loading1 = true;
{ setTimeout(() => {
value: 'Ottawa', this.loading1 = false;
label: 'Ottawa' const list = this.list.map(item => {
}, return {
{ value: item,
value: 'Paris', label: item
label: 'Paris' };
}, });
{ this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
value: 'Canberra', }, 200);
label: 'Canberra' } 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 = [];
} }
],
model11: 'New York',
model12: [],
model13: 'New York'
} }
} }
} }
</script> </script>

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

@ -556,6 +556,7 @@
}, },
resetScrollTop () { resetScrollTop () {
const index = this.focusIndex - 1; const index = this.focusIndex - 1;
if (!this.optionInstances.length) return;
let bottomOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom; let bottomOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
let topOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top; let topOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;