tree宽度修改

src/components/tree/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all .3s; overflow: hidden;" >
+    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
         <Icon
             v-show="menuCollapse"
             @click="onMenuCollapse"
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
             size="18"
-            class="fold ml10 mt20  menu-collapse"
+            class="fold ml10 mt20 menu-collapse"
             style="cursor: pointer"
         />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
@@ -59,6 +59,13 @@ import { ref, watch } from 'vue'
 defineOptions({
     name: 'govern/tree'
 })
+interface Props {
+    width?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px'
+})
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
 const filterText = ref('')
@@ -89,7 +96,7 @@ defineExpose({ treeRef })
     box-sizing: border-box;
     padding: 10px;
     height: 100%;
-    width: 280px;
+    width: 100%;
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
     }

src/utils/tableStore.ts

@@ -74,7 +74,7 @@ export default class TableStore {
             )
         ).then((res: any) => {
             this.table.data = res.data.records || res.data
-            this.table.total = res.data.total || res.data.length||0
+            this.table.total = res.data.total || res.data.length || 0
             if (this.isWebPaging) {
                 this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
                 this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]

src/views/auth/role/index.vue

@@ -1,23 +1,22 @@
 <template>
     <div class="default-main" style="display: flex" :style="{ height: height }">
-        <div style="width: calc(100% - 280px)">
+        <div style="flex: 1; overflow: hidden">
             <div class="custom-table-header">
                 <div style="flex: 1; font-weight: 700">角色列表</div>
                 <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
             </div>
             <Table ref="tableRef" @currentChange="currentChange" />
         </div>
-        <div style="height: 100%; flex: 1">
+        <Tree
-            <Tree
+            v-if="menuListId"
-                v-if="menuListId"
+            ref="treeRef"
-                ref="treeRef"
+            show-checkbox
-                show-checkbox
+            width="350px"
-                :data="menuTree"
+            :data="menuTree"
-                :checkStrictly="checkStrictly"
+            :checkStrictly="checkStrictly"
-                @check-change="checkChange"
+            @check-change="checkChange"
-            ></Tree>
+        ></Tree>
-            <el-empty style="width: 100%; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
+        <el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
-        </div>
         <PopupForm ref="popupRef"></PopupForm>
     </div>
 </template>
@@ -61,11 +60,11 @@ const tableStore = new TableStore({
             render: 'tag',
             custom: {
                 0: 'danger',
-                1: 'success',
+                1: 'success'
             },
             replaceValue: {
                 0: '注销',
-                1: '正常',
+                1: '正常'
             }
         },
         {
@@ -150,7 +149,7 @@ const checkChange = (data: any) => {
     timeout.value = setTimeout(() => {
         updateRoleMenu({
             id: menuListId.value,
-            idList: treeRef.value.treeRef.getCheckedNodes(false, true).map(node => node.id)
+            idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
         })
     }, 1000)
 }

src/views/setting/dictionary/tree/index.vue

@@ -23,6 +23,7 @@ defineOptions({
 
 const popupFormRef = ref()
 const tableStore = new TableStore({
+    showPage:false,
     url: '/system-boot/dic/dicTree',
     method: 'GET',
     column: [