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

Merge pull request #3048 from Xotic750/add_select_examples

Browse source 
Add select examples from the docs for rework of the select component
This commit is contained in:
Aresn 2018-02-26 17:10:44 +08:00 • committed by GitHub
commit 1b639c0a19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 618 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

439
examples/routers/select.vue
View file

@ -216,58 +216,431 @@
<!--</script>--> <!--</script>-->
<!--<template>-->
<!--<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>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--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: {-->
<!--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 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Row> <div id="app">
<Col span="12" style="padding-right:10px"> <input><br>
<Select <i-select
v-model="model1"
style="width:200px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<i-select
v-model="model2"
size="small"
style="width:100px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<i-select
v-model="model3"
style="width:100px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<i-select
v-model="model4"
size="large"
style="width:100px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<i-select
v-model="model5"
disabled
style="width:200px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<i-select
v-model="model6"
style="width:200px"
>
<i-option value="beijing">New York</i-option>
<i-option value="shanghai" disabled>London</i-option>
<i-option value="shenzhen">Sydney</i-option>
</i-select>
<br>
<i-select
v-model="model8"
clearable
style="width:200px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<i-select
v-model="model7"
style="width:200px"
>
<option-group label="Hot Cities">
<i-option
v-for="item in cityList1"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</option-group>
<option-group label="Other Cities">
<i-option
v-for="item in cityList2"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</option-group>
</i-select>
<br>
<i-select
v-model="model9"
style="width:200px"
>
<i-option value="New York" label="New York">
<span>New York</span>
<span style="float:right;color:#ccc">America</span>
</i-option>
<i-option value="London" label="London">
<span>London</span>
<span style="float:right;color:#ccc">U.K.</span>
</i-option>
<i-option value="Sydney" label="Sydney">
<span>Sydney</span>
<span style="float:right;color:#ccc">Australian</span>
</i-option>
</i-select>
<br>
<div>here</div>
<i-select
v-model="model10"
multiple
style="width:260px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<row>
<i-col
span="12"
style="padding-right:10px"
>
<i-select
v-model="model11"
filterable
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select
v-model="model12"
filterable
multiple
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
</i-col>
</row>
<br>
<row>
<i-col
span="12"
style="padding-right:10px"
>
<i-select
v-model="model13" v-model="model13"
filterable filterable
remote remote
clearable
:remote-method="remoteMethod1" :remote-method="remoteMethod1"
:loading="loading1"> :loading="loading1"
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> >
</Select> <i-option
</Col> v-for="(option, index) in options1"
<Col span="12"> :value="option.value"
<Select :key="index"
>{{option.label}}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select
v-model="model14" v-model="model14"
multiple multiple
filterable filterable
remote remote
clearable
:remote-method="remoteMethod2" :remote-method="remoteMethod2"
:loading="loading2"> :loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> <i-option
</Select> v-for="(option, index) in options2"
</Col> :value="option.value"
</Row> :key="index"
>{{option.label}}</i-option>
</i-select>
</i-col>
</row>
</div>
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return { return {
cityList: [
{
value: 'New York',
label: 'New York',
},
{
value: 'London',
label: 'London',
},
{
value: 'Sydney',
label: 'Sydney',
},
{
value: 'Ottawa',
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra',
},
],
cityList1: [
{
value: 'New York',
label: 'New York',
},
{
value: 'London',
label: 'London',
},
{
value: 'Sydney',
label: 'Sydney',
},
],
cityList2: [
{
value: 'Ottawa',
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra',
},
],
model1: '',
model2: '',
model3: '',
model4: '',
model5: '',
model6: '',
model7: '',
model8: '',
model9: '',
model10: [],
model11: '',
model12: [],
model13: '', model13: '',
loading1: false, loading1: false,
options1: [], options1: [],
model14: [], model14: [],
loading2: false, loading2: false,
options2: [], 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'] 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: { methods: {
remoteMethod1(query){ remoteMethod1(query){
if (query !== '') { if (query !== '') {
this.loading1 = true; this.loading1 = true;
setTimeout(() => { setTimeout(() => {
this.loading1 = false; this.loading1 = false;
const list = this.list.map(item => {
return { const list = this.list.map(item => ({
value: item, value: item,
label: item label: item,
}; }));
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); this.options1 = list
}, 200); .filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
}, 1500);
} else { } else {
this.options1 = []; this.options1 = [];
} }
@ -275,22 +648,22 @@
remoteMethod2(query){ remoteMethod2(query){
if (query !== '') { if (query !== '') {
this.loading2 = true; this.loading2 = true;
setTimeout(() => { setTimeout(() => {
this.loading2 = false; this.loading2 = false;
const list = this.list.map(item => {
return { const list = this.list.map(item => ({
value: item, value: item,
label: item label: item,
}; }));
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); this.options2 = list
.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
}, 200); }, 200);
} else { } else {
this.options2 = []; this.options2 = [];
} }
} },
} },
} };
</script> </script>