Add select examples from the docs for rework of the select component
This commit is contained in:
Graham Fairweather
parent
899ad697b0
commit
59aac107d0
1 changed files with 618 additions and 245 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue