UI-下拉2级+tips

src/assets/styles/base.scss

@@ -2160,6 +2160,7 @@ div::-webkit-scrollbar {
     max-width: 90%;
   }
 
+
   .d-l-l-text {
     display: flex;
     align-items: center;

src/views/leader.vue

@@ -79,7 +79,10 @@
                     <template slot="title">
                       <div class="d-l-con sj-collapse" @click="getRecordList(item.id, item.personId)">
                         <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.name }}</h4>
+                           <el-tooltip class="item" effect="dark"  placement="left" style="width:10rem ;">
+							   <div slot="content" v-if="item.name.length > 20"><h4 class="collapse-title" style="width: 200px;">{{ item.name}}</h4></div>
+                                <h4 class="collapse-title" style="width: 100px;">{{ item.name | ellipsis20}}</h4>
+                           </el-tooltip>
                         </div>
                         <div class="d-l-l-count">({{ item.recordCount }}-{{ item.planCount }})</div>
                       </div>
@@ -466,7 +469,22 @@ export default {
         }]
       })
     }
-  }
+		
+		
+  },
+  //过滤器
+  
+  filters: {
+  
+  	//标题截取前20
+  	ellipsis20(value) {
+  		if (!value) return '';
+  		if (value.length > 20) {
+  			return value.slice(0, 20) + '...'
+  		}
+  		return value
+  	}
+  },
 
 }
 </script>