Select: use tags to show option when collapse-tags is set (#8567)

* modify set collapse-tags just show text

* Update select.vue

packages/select/src/select.vue

@@ -9,12 +9,25 @@
       @click.stop="toggleMenu"
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
-      <span
-        class="el-select__multiple-text"
-        v-show="multipleText"
-        v-if="collapseTags">
-        {{ multipleText }}
-      </span>
+      <div v-if="collapseTags && selected.length">
+        <el-tag
+          :closable="!disabled"
+          size="small"
+          :hit="selected[0].hitState"
+          type="info"
+          @close="deleteTag($event, selected[0])"
+          disable-transitions>
+          <span class="el-select__tags-text">{{ selected[0].currentLabel }}</span>
+        </el-tag>
+        <el-tag
+          v-if="selected.length > 1"
+          :closable="false"
+          size="small"
+          type="info"
+          disable-transitions>
+          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
+        </el-tag>
+      </div>
       <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
         <el-tag
           v-for="item in selected"
@@ -191,14 +204,6 @@
 
       selectSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-      },
-
-      multipleText() {
-        const selected = this.selected;
-        if (!selected || !selected.length) return '';
-        const length = selected.length;
-        const countText = length > 1 ? `(+${ selected.length - 1 })` : '';
-        return `${ selected[0].currentLabel } ${ countText }`;
       }
     },
 

packages/theme-chalk/src/select.scss

@@ -89,14 +89,6 @@
     }
   }
 
-  @include e(multiple-text) {
-    margin-left: 15px;
-    color: $--input-color;
-    font-size: $--font-size-base;
-    display: inline;
-    @include utils-ellipsis;
-  }
-
   @include e(close) {
     cursor: pointer;
     position: absolute;