diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 0c60939fc5..a724d93ec3 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -18,6 +18,7 @@
           :highlight-hover-row="false"
           :auto-resize="true"
           :row-class-name="getClassName"
+          :style="{ width: treeWidth }"
         >
           <tiny-grid-column field="componentName" tree-node>
             <template #default="data">
@@ -80,9 +81,17 @@ export default {
     const { PLUGIN_NAME } = useLayout()
 
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
+    const maxDepth = ref(1)
+    // 树宽度：最大深度 * 16 + 120，其中 16 为每层缩进的宽度(tiny-grid 默认的缩进宽度)，120 为树的最小宽度
+    const treeWidth = computed(() => `${Math.max(maxDepth.value * 16 + 120, 280)}px`)
 
     const filterSchema = (data) => {
-      const translateChild = (data) => {
+      maxDepth.value = 0
+      const translateChild = (data, depth = 0) => {
+        if (depth > maxDepth.value) {
+          maxDepth.value = depth
+        }
+
         data.forEach((item) => {
           item.show = pageState.nodesStatus[item.id] !== false
           item.showEye = !item.show
@@ -91,7 +100,7 @@ export default {
             delete item.children
           } else {
             if (item.children.length) {
-              translateChild(item.children)
+              translateChild(item.children, depth + 1)
             }
           }
         })
@@ -294,7 +303,8 @@ export default {
       toggleTree,
       getClassName,
       PLUGIN_NAME,
-      renderIconFn
+      renderIconFn,
+      treeWidth
     }
   }
 }