fix #4938

examples/routers/select.vue

@@ -1,75 +1,47 @@
 <template>
-    <Row>
+    <div style="margin: 200px;">
-        <Col span="12" style="padding-right:10px">
+        <Select size="small" v-model="model10" multiple style="width:260px">
-        <Select
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                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>
+        <Select v-model="model10" multiple style="width:260px">
-        <Col span="12">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        <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>
+        <Select size="large" v-model="model10" multiple style="width:260px">
-    </Row>
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                model13: '',
+                cityList: [
-                loading1: false,
+                    {
-                options1: [],
+                        value: 'New York',
-                model14: [],
+                        label: 'New York'
-                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) {
+                        value: 'London',
-                if (query !== '') {
+                        label: 'LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon'
-                    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 !== '') {
+                        value: 'Sydney',
-                    this.loading2 = true;
+                        label: 'Sydney'
-                    setTimeout(() => {
+                    },
-                        this.loading2 = false;
+                    {
-                        const list = this.list.map(item => {
+                        value: 'Ottawa',
-                            return {
+                        label: 'Ottawa'
-                                value: item,
+                    },
-                                label: item
+                    {
-                            };
+                        value: 'Paris',
-                        });
+                        label: 'Paris'
-                        this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+                    },
-                    }, 200);
+                    {
-                } else {
+                        value: 'Canberra',
-                    this.options2 = [];
+                        label: 'Canberra'
                     }
+                ],
+                model10: ['New York', 'London']
             }
         }
     }

src/styles/components/select.less

@@ -205,9 +205,21 @@
         height: 24px;
         line-height: 22px;
         margin: 3px 4px 3px 0;
-        //i{
+        max-width: 99%;
-        //    top: 2px;
+        position: relative;
-        //}
+        span{
+            display: block;
+            margin-right: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        i{
+            display: block;
+            position: absolute;
+            right: 4px;
+            top: 4px;
+        }
     }
 
     &-large&-multiple .@{css-prefix}tag{
@@ -215,7 +227,7 @@
         line-height: 26px;
         font-size: @font-size-base;
         i{
-            top: 1px;
+            top: 6px;
         }
     }
 
@@ -225,8 +237,12 @@
         font-size: @font-size-small;
         padding: 0 6px;
         margin: 3px 4px 2px 0;
+        span{
+            margin-right: 14px;
+        }
         i{
             top: 1px;
+            right: 2px;
         }
     }