ci

Author: yichao.li.ext

package.json

@@ -3,7 +3,7 @@
   "version": "4.0.5",
   "description": "Tree component for large amount of data, base on Vue3",
   "scripts": {
-    "serve": "vue-cli-service serve --port 4200",
+    "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:lib": "vue-cli-service build --dest lib --target lib ./src/components/index.ts && npm run build:types",
     "build:types": "tsc --project src/components/tsconfig.json"

src/components/VirtualTree/index.tsx

@@ -58,6 +58,7 @@ export default defineComponent({
 
     watch(() => props.source, newVal => {
       flatList.value = service.flattenTree(newVal, props.defaultSelectedKey, props.defaultCheckedKeys, props.defaultExpandedKeys, props.defaultDisabledKeys);
+      // console.log('checkedNodes :>> ', service.checkedNodes.value.selected);
     }, {immediate: true});
 
     watch(() => props.defaultExpandedKeys, newVal => {
@@ -192,6 +193,7 @@ export default defineComponent({
         return service.selectedNodes.value.selected[0];
       },
       getCheckedNodes: (): TreeNodeOptions[] => {
+        // flatlist 未保存折叠的节点
         return flatList.value.filter(item => service.checkedNodes.value.selected.includes(item.nodeKey));
       },
       getHalfCheckedNodes: (): TreeNodeOptions[] => {

src/components/VirtualTree/service.ts

@@ -41,35 +41,40 @@ class TreeService {
           parentKey: parent?.nodeKey || null,
           children: item.children || []
         };
+
         let goon = true;
+
         if (parent) {
           if (defaultExpandedKeys.includes(parent.nodeKey)) {
-            this.expandedKeys.value.select(parent.nodeKey);
-            if (defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
-              defaultCheckedKeys.push(flatNode.nodeKey);
-            }
             result.push(flatNode);
           } else {
             goon = false;
           }
+          if (defaultCheckedKeys.includes(parent.nodeKey)) { // 默认展开并选中了
+            defaultCheckedKeys.push(flatNode.nodeKey);
+            this.checkedNodes.value.select(flatNode.nodeKey);
+          }
         } else {
           result.push(flatNode);
         }
-        if (goon) {
-          if (defaultDisabledKeys.includes(item.nodeKey)) {
-            this.disabledKeys.value.select(item.nodeKey);
-          }
-          if (defaultSelectedKey === item.nodeKey) {
-            this.selectedNodes.value.select(flatNode);
-          }
-          if (item.children?.length) {
-            flatNode.children = recursion(item.children, flatNode);
-          }
+      
+        if (defaultDisabledKeys.includes(flatNode.nodeKey)) {
+          this.disabledKeys.value.select(flatNode.nodeKey);
         }
-
+        if (defaultSelectedKey === flatNode.nodeKey) {
+          this.selectedNodes.value.select(flatNode);
+        }
+        if (defaultExpandedKeys.includes(flatNode.nodeKey)) {
+          this.expandedKeys.value.select(flatNode.nodeKey);
+        }
+        
         if (defaultCheckedKeys.includes(flatNode.nodeKey)) {
           this.checkedNodes.value.select(flatNode.nodeKey);
         }
+
+        if (flatNode.children?.length) {
+          flatNode.children = recursion(flatNode.children, flatNode);
+        }
         return flatNode;
       });
     }

src/doc/CheckboxDemo.vue

@@ -3,12 +3,14 @@
     <section>
       <h5>默认父子节点联动</h5>
       <a-button @click="halfNodes">获取半选节点</a-button>
-      <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" :default-checked-keys="defaultCheckedKeys" />
+      <vir-tree
+        ref="virTreeOne"
+        show-checkbox
+        :source="list"
+        :default-expanded-keys="defaultExpandedKeys"
+        :default-checked-keys="defaultCheckedKeys"
+      />
     </section>
   </div>
 </template>
@@ -46,24 +48,25 @@
       const list = ref<TreeNodeOptions[]>([]);
       const virTreeOne = ref<TreeInstance | null>(null);
       const virTreeTwo = ref<TreeInstance | null>(null);
+      const defaultExpandedKeys = ref(['0-3']);
       const defaultCheckedKeys = ref(['0-0-0', '0-2']);
 
-
       onMounted(() => {
         list.value = recursion();
       });
       const halfNodes = () => {
         getHalfCheckNodes(virTreeOne.value!);
       }
       const checkedNodes = () => {
-        getCheckNodes(virTreeTwo.value!);
+        getCheckNodes(virTreeOne.value!);
       }
       return {
         list,
         virTreeOne,
         virTreeTwo,
         halfNodes,
         checkedNodes,
+        defaultExpandedKeys,
         defaultCheckedKeys
       }
     }

src/doc/index.vue

@@ -38,29 +38,6 @@
     <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="展开、选中、禁用的基本功能"
-            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"
@@ -69,20 +46,6 @@
             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>