expand ok

Author: lycHub

src/components/VirtualTree/index.tsx

@@ -21,6 +21,14 @@ export default defineComponent({
       type: Array as PropType<TreeNodeOptions[]>,
       default: () => []
     },
+    defaultExpandedKeys: {
+      type: Array as PropType<NodeKey[]>,
+      default: () => []
+    },
+    defaultCheckedKeys: {
+      type: Array as PropType<NodeKey[]>,
+      default: () => []
+    },
     showCheckbox: {
       type: Boolean,
       default: false
@@ -42,12 +50,11 @@ export default defineComponent({
   },
   emits: ['selectChange', 'checkChange', 'toggleExpand'],
   setup: function (props, {emit, slots, expose}) {
-
     const loading = shallowRef(false);
     const flatList = ref<Required<TreeNodeOptions>[]>([]);
     watch(() => props.source, newVal => {
-      flatList.value = flattenTree(newVal);
-      // console.log(selectedNodes.value);
+      flatList.value = flattenTree(newVal, props.defaultCheckedKeys, props.defaultExpandedKeys);
+      console.log('expandedKeys>>', expandedKeys.value.selected);
     }, {immediate: true});
     const selectChange = (node: Required<TreeNodeOptions>) => {
       const preSelectedNode = selectedNodes.value.selected[0];
@@ -82,6 +89,12 @@ export default defineComponent({
         item.children = item.children || [];
         item.hasChildren = item.hasChildren || false;
         item.parentKey = node.nodeKey || null;
+        if (props.defaultCheckedKeys.includes(item.nodeKey)) {
+          checkedNodes.value.select(item as Required<TreeNodeOptions>);
+        }
+        if (props.defaultExpandedKeys.includes(item.nodeKey)) {
+          expandedKeys.value.select(item.nodeKey);
+        }
         return item;
       });
       const targetIndex = flatList.value.findIndex(item => item.nodeKey === node.nodeKey);

src/components/VirtualTree/node.tsx

@@ -1,4 +1,4 @@
-import {computed, defineComponent, PropType, Slot} from "vue";
+import {computed, defineComponent, PropType, Slot, watch} from "vue";
 import {NodeKey, TreeNodeOptions} from "./types";
 import VirtualCheckbox from '../VirtualCheckbox';
 import RenderNode from './render';
@@ -40,10 +40,11 @@ export default defineComponent({
   },
   emits: ['selectChange', 'toggleExpand', 'checkChange'],
   setup(props, { emit, expose }) {
-    /*watch(() => props.selectedNodes, newVal => {
-      console.log('wat selection', newVal?.selected);
+    /*watch(() => props.checkedNodes, newVal => {
+      console.log('wat checkedNodes', newVal.selected);
     }, {
-      deep: true
+      deep: true,
+      immediate: true
     });*/
     const halfChecked = computed(() => {
       let result = false;

src/components/VirtualTree/uses.ts

@@ -7,7 +7,11 @@ const checkedNodes = ref(new SelectionModel<Required<TreeNodeOptions>>(true));
 const expandedKeys = ref(new SelectionModel<NodeKey>(true));
 const disabledKeys = ref(new SelectionModel<NodeKey>(true));
 
-function flattenTree(source: TreeNodeOptions[]): Required<TreeNodeOptions>[] {
+function flattenTree(
+  source: TreeNodeOptions[],
+  defaultCheckedKeys: NodeKey[],
+  defaultExpandedKeys: NodeKey[],
+): Required<TreeNodeOptions>[] {
   const result: Required<TreeNodeOptions>[] = [];
   function recursion (list: TreeNodeOptions[], level = 0, parent: Required<TreeNodeOptions> | null = null) {
     return list.map(item => {
@@ -20,7 +24,11 @@ function flattenTree(source: TreeNodeOptions[]): Required<TreeNodeOptions>[] {
         children: item.children || []
       };
       result.push(flatNode);
-      if (expandedKeys.value.isSelected(item.nodeKey) && item.children?.length) {
+      if (defaultCheckedKeys.includes(item.nodeKey)) {
+        checkedNodes.value.select(flatNode);
+      }
+      if (defaultExpandedKeys.includes(item.nodeKey) && item.children?.length) {
+        expandedKeys.value.select(item.nodeKey);
         flatNode.children = recursion(item.children, level + 1, flatNode);
       }
       return flatNode;

src/doc/BaseDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <a-button @click="selectedNode">获取选中节点</a-button>
-    <vir-tree ref="virTree" :source="list" />
+    <vir-tree ref="virTree" :source="list" :default-expanded-keys="defaultExpandedKeys" />
   </div>
 </template>
 
@@ -37,6 +37,7 @@
     setup() {
       const list = ref<TreeNodeOptions[]>([]);
       const virTree = ref<TreeInstance | null>(null);
+      const defaultExpandedKeys = ['0-0', '0-1', '0-1-0'];
       onMounted(() => {
         list.value = recursion();
       });
@@ -46,7 +47,8 @@
       return {
         list,
         virTree,
-        selectedNode
+        selectedNode,
+        defaultExpandedKeys
       }
     }
   });

src/doc/CheckboxDemo.vue

@@ -3,12 +3,12 @@
     <section>
       <h5>默认父子节点联动</h5>
       <a-button @click="halfNodes">获取半选节点</a-button>
-      <vir-tree ref="virTreeOne" show-checkbox :source="list" />
+      <vir-tree ref="virTreeOne" show-checkbox :source="list" :default-checked-keys="defaultCheckedKeys" />
     </section>
     <section>
       <h5>父子节点不联动</h5>
       <a-button @click="checkedNodes">获取勾选节点</a-button>
-      <vir-tree ref="virTreeTwo" show-checkbox check-strictly :source="list" />
+      <vir-tree ref="virTreeTwo" show-checkbox check-strictly :source="list" :default-checked-keys="defaultCheckedKeys" />
     </section>
   </div>
 </template>
@@ -46,6 +46,7 @@
       const list = ref<TreeNodeOptions[]>([]);
       const virTreeOne = ref<TreeInstance | null>(null);
       const virTreeTwo = ref<TreeInstance | null>(null);
+      const defaultCheckedKeys = ['0-0-0', '0-2'];
       onMounted(() => {
         list.value = recursion();
       });
@@ -60,7 +61,8 @@
         virTreeOne,
         virTreeTwo,
         halfNodes,
-        checkedNodes
+        checkedNodes,
+        defaultCheckedKeys
       }
     }
   });

src/doc/index.vue

@@ -38,6 +38,29 @@
     <section class="sec mid">
       <a-typography-title :level="3">代码演示</a-typography-title>
       <a-row :gutter="16" class="demo-boxes">
+        <a-col :span="12">
+          <demo-box
+            id="base-demo"
+            title="基本用法"
+            desc="展开、选中、禁用的基本功能aa"
+            code-type="base">
+            <base-demo />
+          </demo-box>
+          <demo-box
+            id="async-dada-demo"
+            title="异步加载数据"
+            desc="点击展开节点，动态加载数据。"
+            code-type="asyncData">
+            <async-data-demo />
+          </demo-box>
+          <demo-box
+            id="custom-icon-demo"
+            title="自定义图标"
+            desc="自定义展开、收起图标"
+            code-type="customIcon">
+            <custom-icon-demo />
+          </demo-box>
+        </a-col>
         <a-col :span="12">
           <demo-box
             id="checkbox-demo"
@@ -46,6 +69,20 @@
             code-type="checkbox">
             <checkbox-demo />
           </demo-box>
+          <demo-box
+            id="custom-node-demo"
+            title="自定义渲染节点"
+            desc="绑定render函数自定义节点，参数data为当前node数据。注意：如果改变了默认的高度(size), 需要传入size属性"
+            code-type="customNode">
+            <custom-node-demo />
+          </demo-box>
+          <demo-box
+            id="search-node-demo"
+            title="搜索树"
+            desc="虽然组件内部没有直接提供，但可以配合render自行实现"
+            code-type="searchNode">
+            <search-node-demo />
+          </demo-box>
         </a-col>
       </a-row>
     </section>