改变flatList类型

lycHub · lycHub · commit 649f4070a51b · 2021-06-07T11:08:31.000+08:00
diff --git a/src/components/VirtualTree/index.tsx b/src/components/VirtualTree/index.tsx
@@ -36,11 +36,11 @@ export default defineComponent({
   setup(props, { emit, slots, expose }) {
     const loading = shallowRef(false);
     const selectedKey = ref<string | number>('');
-    const flatList = ref<TreeNodeOptions[]>([]);
+    const flatList = ref<Required<TreeNodeOptions>[]>([]);
     watch(() => props.source, newVal => {
       flatList.value = flattenTree(newVal);
     }, { immediate: true });
-    const selectChange = (node: TreeNodeOptions) => {
+    const selectChange = (node: Required<TreeNodeOptions>) => {
       node.selected = !node.selected;
       if (selectedKey.value !== node.nodeKey) {
         const preSelectedIndex = flatList.value.findIndex(item => item.nodeKey === selectedKey.value);
@@ -54,7 +54,7 @@ export default defineComponent({
     }
 
 
-    const checkChange = ([checked, node]: [boolean, TreeNodeOptions]) => {
+    const checkChange = ([checked, node]: [boolean, Required<TreeNodeOptions>]) => {
       node.checked = checked;
       if (!props.checkStrictly) {
         updateDownwards(checked, node);
@@ -63,7 +63,7 @@ export default defineComponent({
       emit('checkChange', node);
     }
 
-    const expandNode = (node: TreeNodeOptions, children: TreeNodeOptions[] = []) => {
+    const expandNode = (node: Required<TreeNodeOptions>, children: TreeNodeOptions[] = []) => {
       const trueChildren = children.length ? children : cloneDeep(node.children)!;
       node.children = trueChildren.map(item => {
         item.loading = false;
@@ -78,18 +78,18 @@ export default defineComponent({
         return item;
       });
       const targetIndex = flatList.value.findIndex(item => item.nodeKey === node.nodeKey);
-      flatList.value.splice(targetIndex + 1, 0, ...node.children);
+      flatList.value.splice(targetIndex + 1, 0, ...(node.children as Required<TreeNodeOptions>[]));
     }
 
-    const collapseNode = (targetNode: TreeNodeOptions) => {
+    const collapseNode = (targetNode: Required<TreeNodeOptions>) => {
       const delKeys: nodeKey[] = [];
-      const recursion = (node: TreeNodeOptions) => {
+      const recursion = (node: Required<TreeNodeOptions>) => {
         if (node.children?.length) {
           node.children.forEach(item => {
             delKeys.push(item.nodeKey);
             if (item.expanded) {
               item.expanded = false;
-              recursion(item);
+              recursion(item as Required<TreeNodeOptions>);
             }
           });
         }
@@ -100,7 +100,7 @@ export default defineComponent({
       }
     }
 
-    const toggleExpand = (node: TreeNodeOptions) => {
+    const toggleExpand = (node: Required<TreeNodeOptions>) => {
       if (loading.value) return;
       // console.log('expand node');
       node.expanded = !node.expanded;
@@ -154,7 +154,7 @@ export default defineComponent({
               list: flatList.value,
               dataKey: 'nodeKey',
             }, {
-              default: (data: { item: TreeNodeOptions, index: number }) => h(VirTreeNode, {
+              default: (data: { item: Required<TreeNodeOptions>, index: number }) => h(VirTreeNode, {
                 ref: setRef.bind(null, data.index),
                 node: data.item,
                 showCheckbox: props.showCheckbox,
diff --git a/src/components/VirtualTree/node.tsx b/src/components/VirtualTree/node.tsx
@@ -7,7 +7,7 @@ export default defineComponent({
   name: 'VirTreeNode',
   props: {
     node: {
-      type: Object as PropType<TreeNodeOptions>,
+      type: Object as PropType<Required<TreeNodeOptions>>,
       required: true
     },
     iconSlot: Function as PropType<Slot>,
diff --git a/src/components/VirtualTree/types.ts b/src/components/VirtualTree/types.ts
@@ -16,7 +16,7 @@ interface TreeNodeOptions {
   hasChildren?: boolean;
   children?: TreeNodeOptions[];
   parentKey?: nodeKey | null;
-  [key: string]: any;
+  // [key: string]: any;
 }
 
 interface TreeInstance {
diff --git a/src/components/VirtualTree/uses.ts b/src/components/VirtualTree/uses.ts
@@ -1,26 +1,25 @@
 import { getCurrentInstance } from "vue";
 import {TreeNodeOptions} from "./types";
 
-function flattenTree(source: TreeNodeOptions[]): TreeNodeOptions[] {
-  const result: TreeNodeOptions[] = [];
-  function recursion (list: TreeNodeOptions[], level = 0, parent: TreeNodeOptions | null = null) {
+function flattenTree(source: TreeNodeOptions[]): Required<TreeNodeOptions>[] {
+  const result: Required<TreeNodeOptions>[] = [];
+  function recursion (list: TreeNodeOptions[], level = 0, parent: Required<TreeNodeOptions> | null = null) {
     return list.map(item => {
-      const flatNode = {
+      const flatNode: Required<TreeNodeOptions> = {
         ...item,
         level,
         loading: false,
         disabled: item.disabled || false,
-        expand: item.expanded || false,
+        expanded: item.expanded || false,
         selected: item.selected || false,
         checked: item.checked || parent?.checked || false,
         hasChildren: item.hasChildren || false,
-        parentKey: parent?.nodeKey || null
+        parentKey: parent?.nodeKey || null,
+        children: item.children || []
       };
       result.push(flatNode);
       if (item.expanded && item.children?.length) {
         flatNode.children = recursion(item.children, level + 1, flatNode);
-      } else {
-        flatNode.children = flatNode.children || [];
       }
       return flatNode;
     });
@@ -31,22 +30,22 @@ function flattenTree(source: TreeNodeOptions[]): TreeNodeOptions[] {
 }
 
 
-function updateDownwards(checked: boolean, node: TreeNodeOptions) {
-  const update = (children: TreeNodeOptions[]) => {
+function updateDownwards(checked: boolean, node: Required<TreeNodeOptions>) {
+  const update = (children: Required<TreeNodeOptions>[]) => {
     if (children.length) {
       children.forEach(child => {
         child.checked = checked;
         if (child.children?.length) {
-          update(child.children);
+          update(child.children as Required<TreeNodeOptions>[]);
         }
       });
     }
   }
-  update(node.children!);
+  update(node.children as Required<TreeNodeOptions>[]);
 }
 
-function updateUpwards(targetNode: TreeNodeOptions, flatList: TreeNodeOptions[]) {
-  const update = (node: TreeNodeOptions) => {
+function updateUpwards(targetNode: Required<TreeNodeOptions>, flatList: Required<TreeNodeOptions>[]) {
+  const update = (node: Required<TreeNodeOptions>) => {
     if (node.parentKey != null) { // 说明是子节点
       const parentNode = flatList.find(item => item.nodeKey == node.parentKey)!;
       // console.log('parentNode', parentNode);
@@ -60,12 +59,4 @@ function updateUpwards(targetNode: TreeNodeOptions, flatList: TreeNodeOptions[])
   update(targetNode);
 }
 
-
-function useExpose<T>(apis: T) {
-  const instance = getCurrentInstance();
-  if (instance) {
-    Object.assign(instance.proxy, apis);
-  }
-}
-
-export { flattenTree, updateUpwards, updateDownwards, useExpose };
+export { flattenTree, updateUpwards, updateDownwards };
diff --git a/src/doc/SearchNodeDemo.vue b/src/doc/SearchNodeDemo.vue
@@ -10,21 +10,26 @@
 <script lang="tsx">
   import {defineComponent, onMounted, ref} from 'vue';
   import {TreeNodeOptions} from "../components/VirtualTree/types";
+
+  interface TreeNodeOptionsWithParentPath extends TreeNodeOptions {
+    parentPath: Array<string | number>;
+  }
+
   const UNIQUE_WRAPPERS = ['##==-open_tag-==##', '##==-close_tag-==##'];
   let expandKeys: Array<string | number> = [];
-  function getParentPath (parent: TreeNodeOptions | null): Array<string | number> {
-    let result = [];
+  function getParentPath (parent: TreeNodeOptionsWithParentPath | null): Array<string | number> {
+    let result: Array<string | number> = [];
     if (parent) {
       const base = parent.parentPath || [];
       result = base.concat(parent.nodeKey);
     }
     return result;
   }
-  function recursion(path = '0', level = 3, parent: TreeNodeOptions | null = null): TreeNodeOptions[] {
+  function recursion(path = '0', level = 3, parent: TreeNodeOptionsWithParentPath | null = null): TreeNodeOptionsWithParentPath[] {
     const list = [];
     for (let i = 0; i < 10; i++) {
       const nodeKey = `${path}-${i}`;
-      const treeNode: TreeNodeOptions = {
+      const treeNode: TreeNodeOptionsWithParentPath = {
         nodeKey,
         name: nodeKey,
         children: [],
@@ -48,7 +53,7 @@
     name: 'SearchNodeDemo',
     setup(prop, {emit}) {
       const keywords = ref('');
-      const list = ref<TreeNodeOptions[]>([]);
+      const list = ref<TreeNodeOptionsWithParentPath[]>([]);
 
       onMounted(() => {
         list.value = recursion();
@@ -57,9 +62,9 @@
       const formatSearchValue = (value: string) => {
         return new RegExp(value.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$&'), 'i');
       }
-      const findMatchedNodes = (keywords: string): TreeNodeOptions[] => {
-        const result: TreeNodeOptions[] = [];
-        const recursion = (list: TreeNodeOptions[], parent: TreeNodeOptions | null = null) => {
+      const findMatchedNodes = (keywords: string): TreeNodeOptionsWithParentPath[] => {
+        const result: TreeNodeOptionsWithParentPath[] = [];
+        const recursion = (list: TreeNodeOptionsWithParentPath[], parent: TreeNodeOptionsWithParentPath | null = null) => {
           for (const item of list) {
             const matched = formatSearchValue(keywords).test(item.name);
             if (matched) {
@@ -69,7 +74,7 @@
               parent.expanded = matched;
             }
             if (item.children?.length) {
-              recursion(item.children, item);
+              recursion(item.children as TreeNodeOptionsWithParentPath[], item);
             }
           }
         }

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ interface TreeNodeOptions {`
`16`	`16`	`hasChildren?: boolean;`
`17`	`17`	`children?: TreeNodeOptions[];`
`18`	`18`	`parentKey?: nodeKey \| null;`
`19`		`- [key: string]: any;`
	`19`	`+ // [key: string]: any;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`interface TreeInstance {`