feat: 新增默认展开层级 prop(expand-deep)

Author: mathink12

src/json-tree/JsonTree.vue

@@ -3,7 +3,8 @@
     <JsonTreeNode ref="jsonTreeNode"
       :json-data="jsonData"
       :show-line="showLine"
-      :indent="indent">
+      :indent="indent"
+      :expand-deep="expandDeep">
       <template v-for="(_, slot) of $scopedSlots"
         v-slot:[slot]="scope">
         <slot :name="slot" v-bind="scope"></slot>
@@ -35,6 +36,11 @@ export default {
     indent: {
       type: [String, Number],
       default: '20px'
+    },
+    // 默认展开的层级
+    expandDeep: {
+      type: Number,
+      default: 2
     }
   },
   methods: {

src/json-tree/JsonTreeNode.vue

@@ -101,6 +101,7 @@
           :json-keys="[...jsonKeys, i]"
           :json-data="childData"
           :indent="indent"
+          :expand-deep="expandDeep"
           :deep="deep + 1"
           :show-line="showLine">
           <template v-for="(_, slot) of $scopedSlots"

src/json-tree/json-tree-node.js

@@ -12,6 +12,11 @@ export default {
       type: [String, Number],
       default: '20px'
     },
+    // 默认展开的层级
+    expandDeep: {
+      type: Number,
+      default: 2
+    },
     jsonKey: {
       type: [String, Number]
     },
@@ -30,8 +35,14 @@ export default {
     }
   },
   data () {
+    const { deep, expandDeep } = this
+    let localCollapse = !!this.collapse
+    if (deep < expandDeep) {
+      localCollapse = false
+    }
+
     return {
-      localCollapse: !!this.collapse
+      localCollapse
     }
   },
   computed: {