Browse Source

feat(tree): add defaultExpandLevel prop

新增defaultExpandLevel属性,指定默认要展开的层级数。-1为默认全部展开(等同于ATree的defaultExpandAll),大于0则展开到指定层级。注意:该属性仅在首次渲染时起作用

close: #672
无木 3 years ago
parent
commit
6edca1c19c

+ 11 - 0
src/components/Tree/src/Tree.vue

@@ -11,6 +11,7 @@
     toRaw,
     toRaw,
     watch,
     watch,
     CSSProperties,
     CSSProperties,
+    onMounted,
   } from 'vue';
   } from 'vue';
   import { Tree, Empty } from 'ant-design-vue';
   import { Tree, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import { TreeIcon } from './TreeIcon';
@@ -209,6 +210,16 @@
         treeDataRef.value = props.treeData as TreeItem[];
         treeDataRef.value = props.treeData as TreeItem[];
       });
       });
 
 
+      onMounted(() => {
+        if (props.defaultExpandLevel === '') return;
+        const level = parseInt(props.defaultExpandLevel);
+        if (level === -1) {
+          expandAll(true);
+        } else if (level > 0) {
+          state.expandedKeys = filterByLevel(level);
+        }
+      });
+
       watchEffect(() => {
       watchEffect(() => {
         state.expandedKeys = props.expandedKeys;
         state.expandedKeys = props.expandedKeys;
       });
       });

+ 4 - 0
src/components/Tree/src/props.ts

@@ -23,6 +23,10 @@ export const basicProps = {
   checkStrictly: propTypes.bool,
   checkStrictly: propTypes.bool,
   clickRowToExpand: propTypes.bool.def(true),
   clickRowToExpand: propTypes.bool.def(true),
   checkable: propTypes.bool.def(false),
   checkable: propTypes.bool.def(false),
+  defaultExpandLevel: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
 
 
   replaceFields: {
   replaceFields: {
     type: Object as PropType<ReplaceFields>,
     type: Object as PropType<ReplaceFields>,

+ 1 - 1
src/views/demo/tree/data.ts

@@ -10,7 +10,7 @@ export const treeData: TreeItem[] = [
         title: 'leaf',
         title: 'leaf',
         key: '0-0-1',
         key: '0-0-1',
         children: [
         children: [
-          { title: 'leaf', key: '0-0-0-0' },
+          { title: 'leaf', key: '0-0-0-0', children: [{ title: 'leaf', key: '0-0-0-0-1' }] },
           { title: 'leaf', key: '0-0-0-1' },
           { title: 'leaf', key: '0-0-0-1' },
         ],
         ],
       },
       },

+ 9 - 3
src/views/demo/tree/index.vue

@@ -1,18 +1,24 @@
 <template>
 <template>
   <PageWrapper title="Tree基础示例">
   <PageWrapper title="Tree基础示例">
     <div class="flex">
     <div class="flex">
-      <BasicTree :treeData="treeData" title="基础示例" class="w-1/3" />
+      <BasicTree
+        :treeData="treeData"
+        title="基础示例,默认展开第一层"
+        defaultExpandLevel="1"
+        class="w-1/3"
+      />
 
 
       <BasicTree
       <BasicTree
         :treeData="treeData"
         :treeData="treeData"
-        title="可勾选"
+        title="可勾选,默认全部展开"
         :checkable="true"
         :checkable="true"
         class="w-1/3 mx-4"
         class="w-1/3 mx-4"
+        defaultExpandLevel="-1"
         @check="handleCheck"
         @check="handleCheck"
       />
       />
 
 
       <BasicTree
       <BasicTree
-        title="默认展开/勾选示例"
+        title="指定默认展开/勾选示例"
         :treeData="treeData"
         :treeData="treeData"
         :checkable="true"
         :checkable="true"
         :expandedKeys="['0-0']"
         :expandedKeys="['0-0']"