<!--<template>-->
    <!--<div>-->
        <!--{{model10}} - -->
        <!--{{model11}}-->
        <!--<Select -->
            <!--v-model="model10" -->
            <!--style="width:260px">-->
            <!--<Option -->
                <!--v-for="(item, index) in cityList" -->
                <!--:value="item.value" -->
                <!--:key="index">{{item.label}}</Option>-->
        <!--</Select>-->
        <!--<Select -->
            <!--v-model="model11" -->
            <!--style="width:260px">-->
            <!--<Option -->
                <!--v-for="(item, index) in cityList" -->
                <!--:value="item.value" -->
                <!--:key="index">{{item.label}}</Option>-->
        <!--</Select>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
    <!--data() {-->
        <!--return {-->
            <!--cityList: [],-->
            <!--model10: '',-->
            <!--model11: '',-->
            <!--model12: '',-->
        <!--};-->
    <!--},-->
    <!--mounted() {-->
        <!--setTimeout(() => {-->
            <!--this.cityList = [-->
                <!--{-->
                    <!--value: 'beijing',-->
                    <!--label: '北京市',-->
                <!--},-->
                <!--{-->
                    <!--value: 'shanghai',-->
                    <!--label: '上海市',-->
                <!--},-->
                <!--{-->
                    <!--value: 'shenzhen',-->
                    <!--label: '深圳市',-->
                <!--},-->
                <!--{-->
                    <!--value: 'hangzhou',-->
                    <!--label: '杭州市',-->
                <!--},-->
                <!--{-->
                    <!--value: 'nanjing',-->
                    <!--label: '南京市',-->
                <!--},-->
                <!--{-->
                    <!--value: 'chongqing',-->
                    <!--label: '重庆市',-->
                <!--},-->
            <!--];-->
        <!--}, 1000);-->
    <!--},-->
<!--};-->
<!--</script>-->

<!--<template>-->
    <!--<div>-->
        <!--<Select v-model="value">-->
            <!--<Option -->
                <!--v-for="item in list" -->
                <!--:value="item.value" -->
                <!--:label="item.label" -->
                <!--:key="item.value"></Option>-->
        <!--</Select>-->
        <!--<Button @click="setList">set list</Button>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
    <!--data() {-->
        <!--return {-->
            <!--value: '',-->
            <!--list: [],-->
        <!--};-->
    <!--},-->
    <!--methods: {-->
        <!--setList() {-->
            <!--const list = [];-->
            <!--for (let i = 0; i < 400; i++) {-->
                <!--list.push({-->
                    <!--value: `value${i}`,-->
                    <!--label: `label${i}`,-->
                <!--});-->
            <!--}-->
            <!--this.list = list;-->
        <!--},-->
    <!--},-->
<!--};-->
<!--</script>-->

<!--<template>-->
    <!--<div style="width: 400px;margin: 50px;">-->
        <!--<div>data: {{model13}}</div>-->
        <!--<Row>-->
            <!--<Col -->
                <!--span="12" -->
                <!--style="padding-right:10px">-->
            <!--<Select-->
                <!--v-model="model13"-->
                <!--:remote-method="remoteMethod1"-->
                <!--:loading="loading1"-->
                <!--size="small"-->
                <!--placeholder="提示提示"-->
                <!--filterable-->
                <!--remote-->
                <!--transfer>-->
                <!--<Option -->
                    <!--v-for="(option, index) in options1" -->
                    <!--:value="option.value" -->
                    <!--:key="index">{{option.label}}</Option>-->
            <!--</Select>-->
<!--</Col>-->
            <!--<Col span="12">-->
            <!--<Select-->
                <!--v-model="model14"-->
                <!--:remote-method="remoteMethod2"-->
                <!--:loading="loading2"-->
                <!--multiple-->
                <!--filterable-->
                <!--remote>-->
                <!--<Option -->
                    <!--v-for="(option, index) in options2" -->
                    <!--:value="option.value" -->
                    <!--:key="index">{{option.label}}</Option>-->
            <!--</Select>-->
<!--</Col>-->
        <!--</Row>-->
    <!--</div>-->
<!--</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) => ({-->
                        <!--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) => ({-->
                        <!--value: item,-->
                        <!--label: item,-->
                    <!--}));-->
                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                <!--}, 200);-->
            <!--} else {-->
                <!--this.options2 = [];-->
            <!--}-->
        <!--},-->
    <!--},-->
<!--};-->
<!--</script>-->

<!--<template>-->
    <!--<div style="width: 300px">-->
        <!--<Select-->
            <!--v-model="model14"-->
            <!--:remote-method="remoteMethod2"-->
            <!--:loading="loading2"-->
            <!--multiple-->
            <!--filterable-->
            <!--remote>-->
            <!--<Option -->
                <!--v-for="(option, index) in options2" -->
                <!--:value="option.value" -->
                <!--:key="index">{{option.label}}</Option>-->
        <!--</Select>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
    <!--data() {-->
        <!--return {-->
            <!--model13: '',-->
            <!--loading1: false,-->
            <!--options1: [],-->
            <!--model14: [],-->
            <!--loading2: false,-->
            <!--options2: [],-->
            <!--list: ['a', 'b', 'c'],-->
        <!--};-->
    <!--},-->
    <!--methods: {-->
        <!--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().indexOf(query.toLowerCase()) > -1);-->
                <!--}, 200);-->
            <!--} else {-->
                <!--this.options2 = [];-->
            <!--}-->
        <!--},-->
    <!--},-->
<!--};-->
<!--</script>-->


<!--<template>-->
    <!--<Row>-->
        <!--<Col -->
            <!--span="12" -->
            <!--style="padding-right:10px">-->
        <!--<Select-->
            <!--v-model="model13"-->
            <!--:remote-method="remoteMethod1"-->
            <!--:loading="loading1"-->
            <!--filterable-->
            <!--remote>-->
            <!--<Option -->
                <!--v-for="(option, index) in options1" -->
                <!--:value="option.value" -->
                <!--:key="index">{{option.label}}</Option>-->
        <!--</Select>-->
<!--</Col>-->
        <!--<Col span="12">-->
        <!--<Select-->
            <!--v-model="model14"-->
            <!--:remote-method="remoteMethod2"-->
            <!--:loading="loading2"-->
            <!--multiple-->
            <!--filterable-->
            <!--remote>-->
            <!--<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) => ({-->
                        <!--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) => ({-->
                        <!--value: item,-->
                        <!--label: item,-->
                    <!--}));-->
                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                <!--}, 200);-->
            <!--} else {-->
                <!--this.options2 = [];-->
            <!--}-->
        <!--},-->
    <!--},-->
<!--};-->
<!--</script>-->

<!--<template>-->
    <!--<div id="app">-->
        <!--<input><br>-->
        <!--<i-select-->
            <!--v-model="model1"-->
            <!--style="width:200px"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<br>-->
        <!--<i-select-->
            <!--v-model="model2"-->
            <!--size="small"-->
            <!--style="width:100px"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<i-select-->
            <!--v-model="model3"-->
            <!--style="width:100px"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<i-select-->
            <!--v-model="model4"-->
            <!--size="large"-->
            <!--style="width:100px"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<br>-->
        <!--<i-select-->
            <!--v-model="model5"-->
            <!--disabled-->
            <!--style="width:200px"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<i-select-->
            <!--v-model="model6"-->
            <!--style="width:200px"-->
        <!--&gt;-->
            <!--<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"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<br>-->
        <!--<i-select-->
            <!--v-model="model7"-->
            <!--style="width:200px"-->
        <!--&gt;-->
            <!--<option-group label="Hot Cities">-->
                <!--<i-option-->
                    <!--v-for="item in cityList1"-->
                    <!--:value="item.value"-->
                    <!--:key="item.value"-->
                <!--&gt;{{item.label}}</i-option>-->
            <!--</option-group>-->
            <!--<option-group label="Other Cities">-->
                <!--<i-option-->
                    <!--v-for="item in cityList2"-->
                    <!--:value="item.value"-->
                    <!--:key="item.value"-->
                <!--&gt;{{item.label}}</i-option>-->
            <!--</option-group>-->
        <!--</i-select>-->
        <!--<br>-->
        <!--<i-select-->
            <!--v-model="model9"-->
            <!--style="width:200px"-->
        <!--&gt;-->
            <!--<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"-->
        <!--&gt;-->
            <!--<i-option-->
                <!--v-for="item in cityList"-->
                <!--:value="item.value"-->
                <!--:key="item.value"-->
            <!--&gt;{{item.label}}</i-option>-->
        <!--</i-select>-->
        <!--<br>-->
        <!--<row>-->
            <!--<i-col-->
                <!--span="12"-->
                <!--style="padding-right:10px"-->
            <!--&gt;-->
                <!--<i-select-->
                    <!--v-model="model11"-->
                    <!--filterable-->
                <!--&gt;-->
                    <!--<i-option-->
                        <!--v-for="item in cityList"-->
                        <!--:value="item.value"-->
                        <!--:key="item.value"-->
                    <!--&gt;{{item.label}}</i-option>-->
                <!--</i-select>-->
            <!--</i-col>-->
            <!--<i-col span="12">-->
                <!--<i-select-->
                    <!--v-model="model12"-->
                    <!--filterable-->
                    <!--multiple-->
                <!--&gt;-->
                    <!--<i-option-->
                        <!--v-for="item in cityList"-->
                        <!--:value="item.value"-->
                        <!--:key="item.value"-->
                    <!--&gt;{{item.label}}</i-option>-->
                <!--</i-select>-->
            <!--</i-col>-->
        <!--</row>-->
        <!--<br>-->
        <!--<row>-->
            <!--<i-col-->
                <!--span="12"-->
                <!--style="padding-right:10px"-->
            <!--&gt;-->
                <!--<i-select-->
                    <!--v-model="model13"-->
                    <!--:remote-method="remoteMethod1"-->
                    <!--:loading="loading1"-->
                    <!--filterable-->
                    <!--remote-->
                    <!--clearable-->
                <!--&gt;-->
                    <!--<i-option-->
                        <!--v-for="(option, index) in options1"-->
                        <!--:value="option.value"-->
                        <!--:key="index"-->
                    <!--&gt;{{option.label}}</i-option>-->
                <!--</i-select>-->
            <!--</i-col>-->
            <!--<i-col span="12">-->
                <!--<i-select-->
                    <!--v-model="model14"-->
                    <!--:remote-method="remoteMethod2"-->
                    <!--:loading="loading2"-->
                    <!--multiple-->
                    <!--filterable-->
                    <!--remote-->
                    <!--clearable>-->
                    <!--<i-option-->
                        <!--v-for="(option, index) in options2"-->
                        <!--:value="option.value"-->
                        <!--:key="index"-->
                    <!--&gt;{{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>
    <div>
        <Select
            v-model="model1"
            size="small"
            style="width:200px;" >
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
        <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>
        </Select>

        <br><br>

        <Select
            v-model="model1"
            size="large"
            style="width:200px"
            clearable
            @on-clear="onClear">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
        <Select
            v-model="model10"
            size="large"
            multiple
            style="width:260px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>

        <br><br>

        <Select
            v-model="model1"
            style="width:200px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
        <Select
            v-model="model11"
            multiple
            style="width:260px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
        <Select
            v-model="model10"
            multiple
            style="width:260px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>

        <br><br>

        <br><br>

        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <Select
            v-model="model10"
            multiple
            style="width:260px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
        <br><br>

        <br><br>

        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <br><br>
        <Select
            v-model="model10"
            multiple
            style="width:260px">
            <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value">{{item.label}}</Option>
        </Select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cityList: [
                {
                    value: 'New York',
                    label: 'New York',
                },
                {
                    value: '中国',
                    label: '中国',
                },
                {
                    value: 'Sydney',
                    label: 'Sydney',
                },
                {
                    value: 'Ottawa',
                    label: 'Ottawa',
                },
                {
                    value: 'Paris',
                    label: 'Paris',
                },
                {
                    value: 'Canberra',
                    label: 'Canberra',
                },
            ],
            model1: '',
            model10: [],
            model11: [],
        };
    },
    methods: {
        onClear() {
            console.log('onClear');
        },
    },
};
</script>
