国内标准树形菜单调整

src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue

@@ -2,54 +2,58 @@
 <template>
   <div id="domesticStandardDatabase" :class="{ 'tree-close': sideClose }" class="demo-spin-article v-class">
     <div class="tree-content" :class="{ 'tree-closed': sideClose }">
-      <div class="tree">
+      <div style="width: 100%">
         <el-input
             placeholder="输入树状图体系"
             v-model="filterText">
-        </el-input>
-        <el-tree
-            ref="tree"
-            node-key="id"
-            class="tree-line"
-            icon-class="icon-tree"
-            :indent="0"
-            :props="props"
-            :data="treeList"
-            highlight-current
-            @node-click="treeClick"
-            :filter-node-method="filterNode"
-            default-expand-all
-            :expand-on-click-node="false">
-                <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)"
-                      @mouseleave="mouseleave(data)">
+          </el-input>
+        <div class="tree">
+          <el-card style="height: 100%;padding-right: 120px;">
+            <el-tree
+              ref="tree"
+              node-key="id"
+              class="tree-line"
+              icon-class="icon-tree"
+              :indent="0"
+              :props="props"
+              :data="treeList"
+              highlight-current
+              @node-click="treeClick"
+              :filter-node-method="filterNode"
+              default-expand-all
+              :expand-on-click-node="false">
+                  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)"
+                        @mouseleave="mouseleave(data)">
                         <span
-                            :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
-                            <span class="node-font" > {{ node.label }} </span>
+                          :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
+                        <span> {{ node.label}} </span>
                         <span>
                           <el-button
-                              type="text"
-                              size="mini"
-                              v-show="data.show"
-                              @click="() => append(data)">
+                            type="text"
+                            size="mini"
+                            v-show="data.show"
+                            @click="() => append(data)">
                             新增
                           </el-button>
                           <el-button
-                              type="text"
-                              size="mini"
-                              v-show="data.show"
-                              @click="() => update(data)">
+                            type="text"
+                            size="mini"
+                            v-show="data.show"
+                            @click="() => update(data)">
                             编辑
                           </el-button>
                           <el-button
-                              type="text"
-                              size="mini"
-                              v-show="data.showDel"
-                              @click="() => remove(node, data)">
+                            type="text"
+                            size="mini"
+                            v-show="data.showDel"
+                            @click="() => remove(node, data)">
                             删除
                           </el-button>
                         </span>
                       </span>
-        </el-tree>
+            </el-tree>
+          </el-card>
+        </div>
       </div>
       <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
         <!--切换折叠样式-->
@@ -4987,7 +4991,6 @@ export default {
   background: url('~@/assets/images/shangqi/img/tree.png');
   background-size: 100% 100%;
 }
-
 /deep/ .tree-line {
   .el-tree-node {
     position: relative;
@@ -5049,7 +5052,7 @@ export default {
 }
 </style>
 
-<style lang="less" >
+<style lang="less" scoped>
 @import '~@/assets/styles/mixins';
 @import '~@/assets/styles/style';
 
@@ -5065,15 +5068,15 @@ export default {
     position: relative;
 
     .tree {
+      /deep/.el-card__body {
+        padding: 0 !important;
+      }
+      .el-card {
+        min-width: min-content;
+      }
       width: calc(~'100% - 15px');
       position: absolute;
       left: 0;
-      .node-font{
-        display: inline-block;
-        width: 120px;
-        text-overflow:ellipsis;
-        overflow: hidden;
-      }
     }
 
     .tree-collapse {
@@ -5118,7 +5121,6 @@ export default {
     .tree {
       left: -200px !important;
     }
-
     .tree-right {
       width: calc(~'100% - 15px') !important;
     }