fix: 多选tag样式有问题

hug-sun · Sep 8, 2020 · c9c061e · c9c061e
1 parent 542722a
commit c9c061e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
@@ -183,6 +183,66 @@
 ```
 :::
 
+### 基础多选
+
+适用性较广的基础多选，用 Tag 展示已选项
+
+:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
+```html
+<template>
+  <el-select v-model="value1" multiple placeholder="请选择">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+
+  <el-select
+    v-model="value2"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="请选择">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value1: [],
+        value2: []
+      }
+    }
+  }
+</script>
+```
+:::
+
 
 ### 分组
 

diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
@@ -14,7 +14,7 @@
 
   .el-select__tags
     >span {
-      display: contents;
+      display: block;
     }
 
   &:hover {