全选样式优化

1

src/App.vue

@@ -380,4 +380,13 @@ input[type="number"] {
     top: 5px;
   }
 }
+  .el-select__tags {
+    overflow: hidden;
+    flex-wrap: nowrap;
+  }
+  .el-tag.el-tag--info.el-tag--small.el-tag--light{
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>

src/components/select-all/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap selcetAll">
     <el-tooltip
       v-if="isShow"
       class="item"
@@ -40,8 +40,11 @@ export default {
   },
   mounted() {
     const { selected } = this.$refs.select;
-    this.labelStr = selected.map((item) => item.label?item.label:item.value).join(",");
-    this.isShow = (this.$refs?.select?.disabled || false)&&this.labelStr.length>0;
+    this.labelStr = selected
+      .map((item) => (item.label ? item.label : item.value))
+      .join(",");
+    this.isShow =
+      (this.$refs?.select?.disabled || false) && this.labelStr.length > 0;
   },
   methods: {
     selectAll() {
@@ -59,7 +62,6 @@ export default {
   max-width: 300px;
   line-height: 180%;
 }
-
 </style>
 <style lang="less" scoped>
 .wrap {
@@ -80,7 +82,7 @@ export default {
   padding: 0 10px;
   border-left: none;
   border-radius: 0 4px 4px 0;
-
+  height: 40px;
 }
 .item {
   width: 100%;

src/views/HumanResources/form.vue

@@ -104,7 +104,8 @@
               <th class="description-label">声部</th>
               <td class="description-content">
                 <el-form-item prop="subjectIdList">
-                  <select-all
+                  <el-select
+                  size="mini"
                     v-model.trim="form.subjectIdList"
                     clearable
                     filterable
@@ -118,7 +119,7 @@
                       :label="item.name"
                     >
                     </el-option>
-                  </select-all>
+                  </el-select>
                 </el-form-item>
               </td>
             </tr>