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

fixed #1286

Browse source
This commit is contained in:
梁灏 2017-07-14 13:58:34 +08:00
parent da17044c8d
commit 98bf25b3ce
4 changed files with 9555 additions and 13399 deletions
Download patch file Download diff file Expand all files Collapse all files

200
examples/routers/select.vue
View file

@ -1,166 +1,76 @@
<template>
<Row>
<i-col span="4">{{model}}</i-col>
<i-col span="8">
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
</i-select>
</i-col>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="option in options1" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="option in options2" :value="option.value" :key="new Date()">{{option.label}}</Option>
</Select>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
// model: 'Alabama',
model: ['Alabama', 'Hawaii'],
options: [
],
list: [],
loading: false,
states: ["Al", "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"]
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'],
}
},
mounted () {
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) {
console.log(13)
remoteMethod1 (query) {
if (query !== '') {
this.loading = true;
this.loading1 = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
}, 500);
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options = [];
this.options1 = [];
}
},
handleInput () {
// console.log(1)
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 = [];
}
}
},
mounted () {
this.list = this.states.map(item => {
return {
value: item,
label: 'L ' + item
};
});
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<Row style="width: 400px;">-->
<!--<i-col span="12" style="padding-right:10px">-->
<!--<Select v-model="model11" filterable>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--</Select>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Select v-model="model12" filterable multiple>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
<!--</Select>-->
<!--</i-col>-->
<!--</Row>-->
<!--<Button @click="handleSet">set</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--cityList: [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京市'-->
<!--},-->
<!--{-->
<!--value: 'shanghai',-->
<!--label: '上海市'-->
<!--},-->
<!--{-->
<!--value: 'shenzhen',-->
<!--label: '深圳市'-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州市'-->
<!--},-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京市'-->
<!--},-->
<!--{-->
<!--value: 'chongqing',-->
<!--label: '重庆市'-->
<!--}-->
<!--],-->
<!--model11: '',-->
<!--model12: []-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSet () {-->
<!--this.model11 = 'shanghai';-->
<!--// this.model12 = ['beijing'];-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->