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

Select support remote search

Browse source
This commit is contained in:
梁灏 2017-05-05 14:20:46 +08:00
parent 28587238de
commit 01b54e3021
9 changed files with 167 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

94
examples/routers/select.vue
View file

@ -1,8 +1,9 @@
<template>
<div style="width: 200px;margin: 100px;">
<i-select v-model="model" filterable clearable style="width:200px">
<i-option :value="option.value" v-for="option in options" :key="option">{{option.label}}</i-option>
<i-select v-model="model" filterable remote :remote-method="remoteMethod" :loading="loading" clearable style="width:200px">
<i-option v-for="option in options" :value="option.value" :key="option">{{option.label}}</i-option>
</i-select>
<!--<Button @click="handleAdd">+</Button>-->
</div>
</template>
@ -10,26 +11,85 @@
export default {
data () {
return {
model: 1,
model: '',
options: [
]
],
list: [],
loading: false,
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.options = [{
label: '全部',
value: 0
},{
label: '苹果',
value: 1
},{
label: '香蕉',
value: 2
},{
label: '西瓜',
value: 3
}];
this.options = [
// {
// label: '全部',
// value: 0
// },{
// label: '苹果',
// value: 1
// },{
// label: '香蕉',
// value: 2
// },{
// label: '西瓜',
// value: 3
// }
];
},
methods: {
handleAdd () {
this.options = [
{
label: '全部',
value: 0
},{
label: '苹果',
value: 1
},{
label: '香蕉',
value: 2
},{
label: '西瓜',
value: 3
}
]
},
remoteMethod (query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
},
mounted () {
this.list = this.states.map(item => {
return { value: item, label: item };
});
}
}
</script>