归档树样式修改

src/views/manager/archivetree.vue

@@ -18,7 +18,7 @@
           <el-tab-pane label="文书档案目录" name="second">
               
           </el-tab-pane>
-         <div>
+         <div style="font-size:14px">
                     <!-- <h2>归档目录树</h2> -->
                     <el-input
                       placeholder="输入关键字进行过滤"
@@ -43,7 +43,14 @@
                           @mouseleave="mouseLeave(data)"
                             
                         >
-                          <span style="text-overflow: ellipsis;width:101%;">{{ data.title }}</span>
+                          <!-- <span style="text-overflow: ellipsis;width:101%;">{{ data.title }}</span> -->
+                          <span v-if="data.title&&data.title.length<=30">{{data.title | ellipsis}}</span>
+                  
+                            <el-tooltip v-if="data.title&&data.title.length>30" :content="data.title" raw-content placement="top-start"  effect="light">
+                              <span v-if="data.title &&data.title.length <=30">{{ data.title }}</span>
+                              <span v-if="data.title && data.title.length > 30"> {{data.title | ellipsis}}</span>
+                            </el-tooltip>
+                    
                           <span
                             class="marleft10"
                             v-show="data.moreShow"
@@ -263,7 +270,13 @@
                   >
                    <div class="custom-tree-node" slot-scope="{ node, data }"   @mouseover="mouseOver(data)"
                     @mouseleave="mouseLeave(data)">
-                       <span>{{ node.label }}</span>
+                       <!-- <span>{{ node.label }}</span> -->
+                         <span v-if="node.label&&node.label.length<=25">{{node.label | ellipsis1}}</span>
+                  
+                          <el-tooltip v-if="node.label&&node.label.length>25" :content="node.label" raw-content placement="top-start"  effect="light">
+                            <span v-if="node.label &&node.label.length <=25">{{node.label}}</span>
+                            <span v-if="node.label && node.label.length > 25"> {{node.label | ellipsis1}}</span>
+                          </el-tooltip>
                        <span  class="marleft10"
                               v-show="data.moreShow">
                           <el-button
@@ -295,6 +308,17 @@
                     class="filter-tree"
                    
                   >
+                    <div class="custom-tree-node" slot-scope="{ node, data }"   @mouseover="mouseOver(data)"
+                      @mouseleave="mouseLeave(data)">
+                        <!-- <span>{{ node.label }}</span> -->
+                            <span v-if="node.label&&node.label.length<=25">{{node.label | ellipsis1}}</span>
+                    
+                              <el-tooltip v-if="node.label&&node.label.length>25" :content="node.label" raw-content placement="top-start"  effect="light">
+                                <span v-if="node.label &&node.label.length <=25">{{node.label}}</span>
+                                <span v-if="node.label && node.label.length > 25"> {{node.label | ellipsis1}}</span>
+                              </el-tooltip>
+                          
+                    </div>
                   </el-tree>
                  </el-scrollbar>
               </div>
@@ -1751,7 +1775,24 @@ export default {
   },
   mounted () {
     this.heights = this.$refs.container.$el.offsetHeight
-  }
+  },
+    filters:{
+    ellipsis(value) {
+      if (!value) return "";
+      if (value.length > 35) {
+        return value.slice(0, 35) + "...";
+      }
+      return value;
+    },
+    ellipsis1(value) {
+      if (!value) return "";
+      if (value.length > 25) {
+        return value.slice(0, 25) + "...";
+      }
+      return value;
+    },
+    
+  },
 }
 </script>