归档树显示子级节点数量

src/components/tree/hc-tree.vue

@@ -1,7 +1,7 @@
 <template>
 
           <el-radio-group v-model="radioKeys" @change="treeRadioChange">
-            <ElTree class="hc-tree-node tree-line" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="id"
+            <ElTree class="hc-tree-node tree-line  el-radio-group" :class="ui" ref="ElTreeRef" :props="ElTreeProps" :load="ElTreeLoadNode" lazy highlight-current accordion node-key="id"
                     :default-expanded-keys="defaultExpandedCids" @node-click="ElTreeClick" @node-contextmenu="ElTreeLabelContextMenu2" :indent="0" >
                 <template #default="{ node, data }">
                     <div class="data-custom-tree-node" :id="`${idPrefix}${data['id']}`">
@@ -13,27 +13,22 @@
                                     <HcIcon name="apps" ui="text-2xl"/>
                                 </div>
                             </div>
-                           
                         </div>
                         <div class="label" v-else>
                             <el-radio class="size-xl" :label="data['id']" @click.stop="clickRadio(data)" v-if="isRadio && showRadioFun(data)">{{ node.label }}</el-radio>
                             <span v-else>{{ node.label }}</span>
-                            <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
-                                <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu2($event,data,node)">
-                                    <HcIcon name="apps" ui="text-2xl"/>
-                                </div>
-                            </div>
-                            
-                        
-
-                            <!--没有传入菜单使用默认的-->
-                            <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length < 1&&isShowMenu">
+                        </div>
+                        <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
                                 <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu2($event,data,node)">
                                     <HcIcon name="apps" ui="text-2xl"/>
                                 </div>
+                         </div>
+                         <div class="text-blue submit-counts" v-if="false">【{{ data.submitCounts ?? 0 }}】</div>
+                        <!--没有传入菜单使用默认的-->
+                        <div class="menu-icon1" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length < 1&&isShowMenu">
+                            <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu2($event,data,node)">
+                                <HcIcon name="apps" ui="text-2xl"/>
                             </div>
-                       
-                        
                         </div>
                
                     </div>
@@ -452,51 +447,36 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+
+
 @import "../../styles/app/tree.scss";
-.el-radio-group {
-    width: auto;
 
-}
 .data-custom-tree-node {
-    .label{
-        line-height: 30px;
-    }
-    .menu-icon {
-        position: absolute;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        opacity: 0;
-        right: 0;
-        background: rgba(255, 255, 255, 0.25);
-        border-radius: 2px;
-        .cu-tree-node-popover-menu-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-    &:hover {
-        .menu-icon {
-            opacity: 1;
-            pointer-events: all;
-            cursor: context-menu;
-        }
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .label {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
-    .menu-icon.show {
-        opacity: 1;
-        pointer-events: all;
-        cursor: context-menu;
+    .submit-counts {
+        position: unset;
+        font-size: 14px;
     }
-        .menu-icon1 {
-        // position: absolute;
-        vertical-align: bottom;
-        display:inline-block;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        opacity: 0;
-        // right: 0;
-        background: rgba(255, 255, 255, 0.25);
+    .menu-icon1 {
+        background: hsla(0,0%,100%,.25);
         border-radius: 2px;
+        display: inline-block;
+        pointer-events: none;
+        position: relative;
+        right: -45px;
+        transition: width .2s;
+        vertical-align: bottom;
+        width: 0;
+
         .cu-tree-node-popover-menu-icon {
             display: flex;
             align-items: center;
@@ -505,15 +485,30 @@ defineExpose({
     }
     &:hover {
         .menu-icon1 {
-            opacity: 1;
-            pointer-events: all;
             cursor: context-menu;
+            pointer-events: all;
+            right: 0;
+            width: 24px;
         }
     }
     .menu-icon1.show {
-        opacity: 1;
-        pointer-events: all;
         cursor: context-menu;
+        pointer-events: all;
+        right: 0;
+        width: 24px;
     }
 }
 </style>
+<style lang="scss">
+
+.el-tree.hc-tree-node .el-tree-node {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .el-tree-node_content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>