fixed #2451
This commit is contained in:
梁灏
parent
ce176e2190
commit
5ddf1bcf4f
2 changed files with 468 additions and 361 deletions
|
|
@ -293,377 +293,447 @@
|
||||||
<!--}-->
|
<!--}-->
|
||||||
<!--</script>-->
|
<!--</script>-->
|
||||||
|
|
||||||
|
<!--<template>-->
|
||||||
|
<!--<div id="app">-->
|
||||||
|
<!--<input><br>-->
|
||||||
|
<!--<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"-->
|
||||||
|
<!--filterable-->
|
||||||
|
<!--remote-->
|
||||||
|
<!--clearable-->
|
||||||
|
<!--:remote-method="remoteMethod1"-->
|
||||||
|
<!--:loading="loading1"-->
|
||||||
|
<!-->-->
|
||||||
|
<!--<i-option-->
|
||||||
|
<!--v-for="(option, index) in options1"-->
|
||||||
|
<!--:value="option.value"-->
|
||||||
|
<!--:key="index"-->
|
||||||
|
<!-->{{option.label}}</i-option>-->
|
||||||
|
<!--</i-select>-->
|
||||||
|
<!--</i-col>-->
|
||||||
|
<!--<i-col span="12">-->
|
||||||
|
<!--<i-select-->
|
||||||
|
<!--v-model="model14"-->
|
||||||
|
<!--multiple-->
|
||||||
|
<!--filterable-->
|
||||||
|
<!--remote-->
|
||||||
|
<!--clearable-->
|
||||||
|
<!--:remote-method="remoteMethod2"-->
|
||||||
|
<!--:loading="loading2">-->
|
||||||
|
<!--<i-option-->
|
||||||
|
<!--v-for="(option, index) in options2"-->
|
||||||
|
<!--:value="option.value"-->
|
||||||
|
<!--:key="index"-->
|
||||||
|
<!-->{{option.label}}</i-option>-->
|
||||||
|
<!--</i-select>-->
|
||||||
|
<!--</i-col>-->
|
||||||
|
<!--</row>-->
|
||||||
|
<!--</div>-->
|
||||||
|
<!--</template>-->
|
||||||
|
|
||||||
|
<!--<script>-->
|
||||||
|
<!--export default {-->
|
||||||
|
<!--data(){-->
|
||||||
|
<!--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: '',-->
|
||||||
|
<!--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 => ({-->
|
||||||
|
<!--value: item,-->
|
||||||
|
<!--label: item,-->
|
||||||
|
<!--}));-->
|
||||||
|
|
||||||
|
<!--this.options1 = list-->
|
||||||
|
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
||||||
|
<!--}, 1500);-->
|
||||||
|
<!--} else {-->
|
||||||
|
<!--this.options1 = [];-->
|
||||||
|
<!--}-->
|
||||||
|
<!--},-->
|
||||||
|
<!--remoteMethod2(query){-->
|
||||||
|
<!--if (query !== '') {-->
|
||||||
|
<!--this.loading2 = true;-->
|
||||||
|
|
||||||
|
<!--setTimeout(() => {-->
|
||||||
|
<!--this.loading2 = false;-->
|
||||||
|
|
||||||
|
<!--const list = this.list.map(item => ({-->
|
||||||
|
<!--value: item,-->
|
||||||
|
<!--label: item,-->
|
||||||
|
<!--}));-->
|
||||||
|
|
||||||
|
<!--this.options2 = list-->
|
||||||
|
<!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
||||||
|
<!--}, 200);-->
|
||||||
|
<!--} else {-->
|
||||||
|
<!--this.options2 = [];-->
|
||||||
|
<!--}-->
|
||||||
|
<!--},-->
|
||||||
|
<!--},-->
|
||||||
|
<!--};-->
|
||||||
|
<!--</script>-->
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div>
|
||||||
<input><br>
|
<Select v-model="model1" size="small" style="width:200px;">
|
||||||
<i-select
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
v-model="model1"
|
</Select>
|
||||||
style="width:200px"
|
<Select v-model="model10" size="small" multiple style="width:260px">
|
||||||
>
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
<i-option
|
</Select>
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
<br><br>
|
||||||
:key="item.value"
|
|
||||||
>{{item.label}}</i-option>
|
<Select v-model="model1" size="large" style="width:200px">
|
||||||
</i-select>
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
<br>
|
</Select>
|
||||||
<i-select
|
<Select v-model="model10" size="large" multiple style="width:260px">
|
||||||
v-model="model2"
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
size="small"
|
</Select>
|
||||||
style="width:100px"
|
|
||||||
>
|
<br><br>
|
||||||
<i-option
|
|
||||||
v-for="item in cityList"
|
<Select v-model="model1" style="width:200px">
|
||||||
:value="item.value"
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
:key="item.value"
|
</Select>
|
||||||
>{{item.label}}</i-option>
|
<Select v-model="model11" multiple style="width:260px">
|
||||||
</i-select>
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
<i-select
|
</Select>
|
||||||
v-model="model3"
|
<Select v-model="model10" multiple style="width:260px">
|
||||||
style="width:100px"
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
>
|
</Select>
|
||||||
<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"
|
|
||||||
filterable
|
|
||||||
remote
|
|
||||||
clearable
|
|
||||||
:remote-method="remoteMethod1"
|
|
||||||
:loading="loading1"
|
|
||||||
>
|
|
||||||
<i-option
|
|
||||||
v-for="(option, index) in options1"
|
|
||||||
:value="option.value"
|
|
||||||
:key="index"
|
|
||||||
>{{option.label}}</i-option>
|
|
||||||
</i-select>
|
|
||||||
</i-col>
|
|
||||||
<i-col span="12">
|
|
||||||
<i-select
|
|
||||||
v-model="model14"
|
|
||||||
multiple
|
|
||||||
filterable
|
|
||||||
remote
|
|
||||||
clearable
|
|
||||||
:remote-method="remoteMethod2"
|
|
||||||
:loading="loading2">
|
|
||||||
<i-option
|
|
||||||
v-for="(option, index) in options2"
|
|
||||||
:value="option.value"
|
|
||||||
:key="index"
|
|
||||||
>{{option.label}}</i-option>
|
|
||||||
</i-select>
|
|
||||||
</i-col>
|
|
||||||
</row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data () {
|
||||||
return {
|
return {
|
||||||
cityList: [
|
cityList: [
|
||||||
{
|
{
|
||||||
value: 'New York',
|
value: 'New York',
|
||||||
label: 'New York',
|
label: 'New York'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'London',
|
value: '中国',
|
||||||
label: 'London',
|
label: '中国'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Sydney',
|
value: 'Sydney',
|
||||||
label: 'Sydney',
|
label: 'Sydney'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Ottawa',
|
value: 'Ottawa',
|
||||||
label: 'Ottawa',
|
label: 'Ottawa'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Paris',
|
value: 'Paris',
|
||||||
label: 'Paris',
|
label: 'Paris'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Canberra',
|
value: 'Canberra',
|
||||||
label: '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: '',
|
model1: '',
|
||||||
model2: '',
|
|
||||||
model3: '',
|
|
||||||
model4: '',
|
|
||||||
model5: '',
|
|
||||||
model6: '',
|
|
||||||
model7: '',
|
|
||||||
model8: '',
|
|
||||||
model9: '',
|
|
||||||
model10: [],
|
model10: [],
|
||||||
model11: '',
|
model11: []
|
||||||
model12: [],
|
}
|
||||||
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 => ({
|
|
||||||
value: item,
|
|
||||||
label: item,
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.options1 = list
|
|
||||||
.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
|
|
||||||
}, 1500);
|
|
||||||
} else {
|
|
||||||
this.options1 = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
remoteMethod2(query){
|
|
||||||
if (query !== '') {
|
|
||||||
this.loading2 = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading2 = false;
|
|
||||||
|
|
||||||
const list = this.list.map(item => ({
|
|
||||||
value: item,
|
|
||||||
label: item,
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.options2 = list
|
|
||||||
.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
|
|
||||||
}, 200);
|
|
||||||
} else {
|
|
||||||
this.options2 = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-multiple &-selection{
|
||||||
|
padding: 0 24px 0 4px;
|
||||||
|
//min-height: @input-height-base;
|
||||||
|
|
||||||
|
.@{select-prefix-cls}-placeholder{
|
||||||
|
display: block;
|
||||||
|
height: @input-height-base - 2px;
|
||||||
|
line-height: @input-height-base - 2px;
|
||||||
|
color: @input-placeholder-color;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-large&-single &-selection{
|
&-large&-single &-selection{
|
||||||
height: @input-height-large;
|
height: @input-height-large;
|
||||||
|
|
||||||
|
|
@ -106,6 +124,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-large&-multiple &-selection{
|
||||||
|
min-height: @input-height-large;
|
||||||
|
|
||||||
|
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||||
|
min-height: @input-height-large - 2px;
|
||||||
|
line-height: @input-height-large - 2px;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-small&-single &-selection{
|
&-small&-single &-selection{
|
||||||
height: @input-height-small;
|
height: @input-height-small;
|
||||||
border-radius: @btn-border-radius-small;
|
border-radius: @btn-border-radius-small;
|
||||||
|
|
@ -116,21 +144,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-multiple &-selection{
|
&-small&-multiple &-selection{
|
||||||
padding: 0 24px 0 4px;
|
min-height: @input-height-small;
|
||||||
min-height: @input-height-base;
|
border-radius: @btn-border-radius-small;
|
||||||
|
|
||||||
.@{select-prefix-cls}-placeholder{
|
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||||
display: block;
|
height: auto;
|
||||||
height: @input-height-base - 2px;
|
min-height: @input-height-small - 2px;
|
||||||
line-height: @input-height-base - 2px;
|
line-height: @input-height-small - 2px;
|
||||||
color: @input-placeholder-color;
|
|
||||||
font-size: @font-size-small;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-left: 4px;
|
|
||||||
padding-right: 22px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -189,6 +210,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-multiple .@{css-prefix}tag{
|
&-multiple .@{css-prefix}tag{
|
||||||
|
height: 24px;
|
||||||
|
line-height: 22px;
|
||||||
|
margin: 3px 4px 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-large&-multiple .@{css-prefix}tag{
|
||||||
|
height: 28px;
|
||||||
|
line-height: 26px;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small&-multiple .@{css-prefix}tag{
|
||||||
|
height: 17px;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
padding: 0 6px;
|
||||||
margin: 3px 4px 2px 0;
|
margin: 3px 4px 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue