终端管理-数据方案页面

src/components/tree/index.vue

@@ -1,49 +1,50 @@
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
         <Icon
-            v-show="menuCollapse"
-            @click="onMenuCollapse"
+            v-show='menuCollapse'
+            @click='onMenuCollapse'
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
-            size="18"
-            class="fold ml10 mt20 menu-collapse"
-            style="cursor: pointer"
+            size='18'
+            class='fold ml10 mt20 menu-collapse'
+            style='cursor: pointer'
         />
-        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
-            <div style="display: flex; align-items: center" class="mb10">
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+        <div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
+            <div style='display: flex; align-items: center' class='mb10'>
+                <el-input v-model='filterText' placeholder='请输入内容' clearable>
                     <template #prefix>
-                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
                     </template>
                 </el-input>
                 <Icon
-                    @click="onMenuCollapse"
+                    @click='onMenuCollapse'
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                     :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
+                    size='18'
+                    class='fold ml10 menu-collapse'
+                    style='cursor: pointer'
+                    v-if='props.canExpand'
                 />
             </div>
             <el-tree
-                style="flex: 1; overflow: auto"
-                ref="treeRef"
-                :props="defaultProps"
-                v-bind="$attrs"
+                style='flex: 1; overflow: auto'
+                ref='treeRef'
+                :props='defaultProps'
                 highlight-current
-                default-expand-all
-                :filter-node-method="filterNode"
-                node-key="id"
+               
+                :filter-node-method='filterNode'
+                node-key='id'
+                v-bind='$attrs'
             >
-                <template #default="{ node, data }">
-                    <span class="custom-tree-node">
+                <template #default='{ node, data }'>
+                    <span class='custom-tree-node'>
                         <Icon
-                            :name="data.icon"
-                            style="font-size: 16px"
-                            :style="{ color: data.color }"
-                            v-if="data.icon"
+                            :name='data.icon'
+                            style='font-size: 16px'
+                            :style='{ color: data.color }'
+                            v-if='data.icon'
                         />
-                        <span style="margin-left: 4px">{{ node.label }}</span>
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
                     </span>
                 </template>
             </el-tree>
@@ -51,7 +52,7 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script lang='ts' setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
@@ -59,12 +60,15 @@ import { ref, watch } from 'vue'
 defineOptions({
     name: 'govern/tree'
 })
+
 interface Props {
     width?: string
+    canExpand?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    width: '280px'
+    width: '280px',
+    canExpand: true
 })
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
@@ -88,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cn-tree {
     flex-shrink: 0;
     display: flex;
@@ -97,18 +101,22 @@ defineExpose({ treeRef })
     padding: 10px;
     height: 100%;
     width: 100%;
+
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
     }
+
     :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
         background-color: var(--el-color-primary-light-7);
     }
+
     .menu-collapse {
         color: var(--el-color-primary);
     }
 }
+
 .custom-tree-node {
-    display: flex;
-    align-items: center;
+    // display: flex;
+    // align-items: center;
 }
 </style>