1

demo/src/main.js

@@ -1,5 +1,5 @@
-// 引入 Admin Framework（框架内部已包含所有依赖和样式）
-import AdminFramework from '../../dist/admin-framework.js'
+// 开发环境直接引用源码以支持热更新
+import AdminFramework from '../../src/index.js'
 
 // 引入组件映射表
 import componentMap from './router/component-map.js'

src/components/treeGrid/component/subColmns.vue

@@ -15,8 +15,19 @@ export default {
   },
   methods: {
     colStyle(col) {
-      const width = col && col.width ? col.width : '150px'
-      return { width }
+      // 为不同类型的列设置合适的默认宽度
+      let defaultWidth = '150px'
+      if (col && col.type === 'operation') {
+        defaultWidth = '200px' // 操作列需要更多空间
+      } else if (col && col.key === 'name' || col.key === 'title') {
+        defaultWidth = '200px' // 名称列通常需要更多空间
+      }
+
+      const width = col && col.width ? col.width : defaultWidth
+      return {
+        width,
+        minWidth: col.minWidth || width
+      }
     }
   }
 }

src/components/treeGrid/component/subTreeGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <table cellspacing="0" width="100%" cellpadding="0" border="0">
+  <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; min-width: inherit;">
     <SubColmns :columns="columns"></SubColmns>
     <tbody class="endTbody" v-for="(row, index) in subData" :key="row.id">
 
@@ -8,10 +8,7 @@
           { 'td-expand': sonColIndex === 0 },
           { 'td-operations': col.type === 'operation' },
           col.className
-        ]" :style="{
-              width: col.width || 'auto',
-              minWidth: col.minWidth || (sonColIndex === 0 ? '200px' : '100px')
-            }">
+        ]" :style="getCellStyle(col, sonColIndex)">
           <RenderCol v-if="col.render" :col="col.render" :param="{ row, index, col }" />
           <template v-else>
             <div class="first-box" v-if="sonColIndex == 1">
@@ -23,7 +20,7 @@
               <div class="col-row" v-else>
                 <span class="indent-span" :style="{ width: `${row.indentWidth}px` }"></span>
                 <label>{{ row[col.key] }}</label>
-
+              
               </div>
 
             </div>
@@ -73,6 +70,30 @@ export default {
   },
 
   methods: {
+    // 获取单元格样式
+    getCellStyle(col, colIndex) {
+      // 为不同类型的列设置合适的默认宽度
+      let defaultWidth = '150px'
+      let defaultMinWidth = '100px'
+
+      if (col.type === 'operation') {
+        defaultWidth = '200px'
+        defaultMinWidth = '180px'
+      } else if (col.key === 'name' || col.key === 'title' || colIndex === 1) {
+        defaultWidth = '200px'
+        defaultMinWidth = '180px'
+      } else if (colIndex === 0) {
+        defaultWidth = '200px'
+        defaultMinWidth = '150px'
+      }
+
+      return {
+        width: col.width || defaultWidth,
+        minWidth: col.minWidth || defaultMinWidth,
+        maxWidth: col.maxWidth || 'none'
+      }
+    },
+
     // 本地存储 key，用于持久化展开状态
     _expandStoreKey() {
       return 'treegrid_expand_map_v1'
@@ -204,14 +225,10 @@ table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
+  /* 继承父容器的最小宽度设置 */
 }
 
-/* 确保表格可以在容器内滚动 */
-.endTbody {
-  max-height: calc(100vh - 200px);
-  /* 预留头部和其他元素的空间 */
-  overflow-y: auto;
-}
+/* endTbody 样式现在由父容器控制滚动 */
 
 .link {
   color: #2d8cf0;
@@ -293,35 +310,48 @@ table {
     line-height: 1.5;
     text-align: left;
     border-bottom: 1px solid #e8eaec;
+    box-sizing: border-box;
 
-    /* 基础文本溢出处理 */
-    &:not(.td-operations) {
+    /* 改进的文本溢出处理 */
+    &:not(.td-operations):not(.td-expand) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      max-width: 0; /* 配合 table-layout 实现更好的省略号效果 */
+    }
+
+    /* 确保内容不会溢出单元格 */
+    > label, > div {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
-  /* 展开列样式 */
+  /* 展开列样式优化 */
   .td-expand {
     width: auto;
     min-width: 200px;
-    /* 给展开图标和文本预留足够空间 */
+    max-width: 300px;
+
+    .first-box {
+      width: 100%;
+      overflow: hidden;
+    }
   }
 
-  /* 操作列样式 */
+  /* 操作列样式优化 */
   .td-operations {
     text-align: right;
     white-space: nowrap;
     width: auto;
     min-width: 180px;
-    /* 增加按钮空间 */
+    max-width: 250px;
     padding-right: 16px;
     overflow: visible !important;
-    /* 强制确保内容可见 */
     position: relative;
     z-index: 1;
-    /* 确保按钮在最上层 */
   }
 
   /* 确保操作列中的按钮组样式 */
@@ -329,6 +359,7 @@ table {
     display: inline-flex;
     visibility: visible;
     opacity: 1;
+    flex-wrap: nowrap;
   }
 
   /* 确保单个按钮样式 */
@@ -337,6 +368,7 @@ table {
     visibility: visible;
     opacity: 1;
     margin: 0 2px;
+    flex-shrink: 0;
   }
 }
 </style>

src/components/treeGrid/index.vue

@@ -1,17 +1,21 @@
 <template>
-  <div class="ivu-table-wrapper">
-    <div class="ivu-table ivu-table-border">
-      <table cellspacing="0" width="100%" cellpadding="0" border="0">
-        <SubColmns :columns="columns"></SubColmns>
-        <subTheads :columns="columns"></subTheads>
+  <div class="tree-grid-container">
+    <div class="ivu-table-wrapper">
+      <div class="ivu-table ivu-table-border">
+        <div class="table-scroll-container">
+          <table cellspacing="0" cellpadding="0" border="0" :style="{ minWidth: tableMinWidth }">
+            <SubColmns :columns="columns"></SubColmns>
+            <subTheads :columns="columns"></subTheads>
 
-        <tr class="ivu-table-tbody">
-          <td style="width: 100%;" :colspan="columns.length" class="non-right">
-            <SubTreeGrid :columns="columns" :data="data" :grade="1" v-bind="$attrs" />
-          </td>
-        </tr>
+            <tr class="ivu-table-tbody">
+              <td :colspan="columns.length" class="non-right">
+                <SubTreeGrid :columns="columns" :data="data" :grade="1" v-bind="$attrs" />
+              </td>
+            </tr>
 
-      </table>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -31,18 +35,54 @@ export default {
     SubColmns,
     subTheads
   },
+  computed: {
+    // 计算表格的最小宽度，确保所有列都能正常显示
+    tableMinWidth() {
+      if (!this.columns || !this.columns.length) return '100%'
 
+      const totalWidth = this.columns.reduce((sum, col) => {
+        const width = col.width || (col.type === 'operation' ? 200 : 150)
+        const numWidth = typeof width === 'string' ? parseInt(width) || 0 : width
+        return sum + numWidth
+      }, 0)
+
+      // 如果计算出的总宽度小于容器宽度，则使用100%
+      return Math.max(totalWidth, 800) + 'px'
+    }
+  },
   methods: {},
   mounted() {}
 }
 </script>
 <style lang="less" scoped>
+.tree-grid-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.ivu-table-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
 .ivu-table {
-  /* 限制最大宽度，超出显示横向滚动 */
-  overflow: auto !important;
-  max-width: 100%;
+  width: 100%;
+  border: 1px solid #dcdee2;
   box-sizing: border-box;
 
+  .table-scroll-container {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: visible;
+    /* 横向滚动条始终可见，不需要滚动到底 */
+  }
+
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    min-width: 800px; /* 设置最小表格宽度 */
+  }
+
   .ivu-table-tbody {
     width: 100%;
   }
@@ -51,4 +91,23 @@ export default {
     border: none !important;
   }
 }
+
+/* 确保滚动条样式美观 */
+.table-scroll-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-scroll-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.table-scroll-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.table-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 </style>

src/views/system/sys_menu.vue

@@ -254,6 +254,7 @@ export default {
       this.gridOption.menuData = this.mapTree(menuTree)
 
       this.$store.dispatch('setAuthorityMenus')
+      
     },
     async initCol() {
       let res = await menuServer.modelAll()