归档树配置显示修改

src/views/manager/projectinfo/archivetreeRule.vue

@@ -24,8 +24,8 @@
                       v-model="filterText"
                     >
                     </el-input>
-                  <div class="scrollClass" style="height:721px">
-                    <el-scrollbar style="height:100%">
+                  <div class="treeBox" >
+                   
                       <el-tree
                         style="box-sizing: border-box;"
                         v-show="!filterText"
@@ -41,10 +41,18 @@
                           @mouseleave="mouseLeave(data)"
 
                         >
-                          <span style="text-overflow: ellipsis;width:101%;">{{ data.title }}</span>
+                           <div v-if="data.title&&data.title.length<=30">{{data.title | ellipsis}}</div>
+                  
+                            <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"
+                            style="z-index:1000;positon:absolute"
                           >
                             <i
                               @click.stop='addtree(data,node)'
@@ -133,7 +141,7 @@
                         </span>
                       </span>
                       </el-tree>
-                    </el-scrollbar>
+                  
                   </div>
 
             </div>
@@ -228,7 +236,7 @@
 
           </div>
         </div> -->
-         <div class="peizhi" :style="{'height':heights-210+'px','overflow': 'hidden'}" v-loading="rightTreeLoading">
+         <div class="peizhi" :style="{'height':heights-150+'px','overflow': 'hidden'}" v-loading="rightTreeLoading">
             <el-tabs v-model="activetabName" @tab-click="handletabClick">
                 <el-tab-pane label="立卷规则" name="second">
                    <el-row style="margin-bottom:15px">
@@ -240,7 +248,7 @@
                 <el-tab-pane label="工程文件入口配置" name="first"></el-tab-pane>
           </el-tabs>
 
-          <div class="scrollClass"  v-if="activetabName==='second'" style="height:721px">
+          <div class="scrollClass"  v-if="activetabName==='second'" style="height:721px;">
                  <el-scrollbar style="height:100%">
                     <el-tree
                     :props="Rightprops"
@@ -253,7 +261,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
@@ -264,6 +278,7 @@
                           </el-button>
                           <el-link @click.stop="removeArchive(data)" type="danger" :underline="false" class="marleft10"><i class="el-icon-delete"></i></el-link>
                         </span>
+                         
                    </div>
                   </el-tree>
                  </el-scrollbar>
@@ -285,7 +300,19 @@
                     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>
 
@@ -1745,7 +1772,25 @@ 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>
 
@@ -1781,4 +1826,18 @@ export default {
   overflow: hidden;
   line-height: 20px;
 }
+.treeBox{
+ 
+  overflow-y: auto;
+  width: 100%;
+  height: 650px;
+ font-size: 14px;
+
+}
+.treebox .el-tree{
+        display: inline-block;
+        min-width: 100%;
+        font-size: s;
+        
+  }
 </style>