refactor(tree): tree 组件 vue2,vue3 统一业务代码

src/common.ts

@@ -45,7 +45,7 @@ export type OptionData = {
 } & PlainObject;
 
 export type TreeOptionData<T = string | number> = {
-  children?: Array<TreeOptionData<T>>;
+  children?: Array<TreeOptionData<T>> | boolean;
   /** option label content */
   label?: string | TNode;
   /** option search text */

src/tree-select/useTreeSelect.ts

@@ -177,7 +177,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
       return;
     }
     const onlyLeafNode = Boolean(
-      !props.multiple && props.treeProps?.valueMode === 'onlyLeaf' && ctx.node?.data?.children?.length,
+      !props.multiple
+        && props.treeProps?.valueMode === 'onlyLeaf'
+        && Array.isArray(ctx.node?.data?.children)
+        && ctx.node?.data?.children?.length,
     );
     let current: TreeSelectValue = value;
     const nodeValue = Array.isArray(value) ? value[0] : value;

src/tree-select/utils.ts

@@ -18,7 +18,7 @@ export function getNodeDataByValue(
         // results.push(item);
         results.set(values[index], item);
       }
-      if (item.children?.length) {
+      if (Array.isArray(item.children) && item.children?.length) {
         getTreeNodeData(values, item.children, keys, results);
       }
       if (results.size >= values.length) {

src/tree/__tests__/activable.test.jsx

@@ -166,6 +166,55 @@ describe('Tree:activable', () => {
       expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
       expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
     });
+
+    it('actived 受控处理可赋值空值', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        data() {
+          return {
+            actived: ['t1'],
+          };
+        },
+        methods: {
+          onActive(vals) {
+            const actived = vals.filter((val) => val !== 't1');
+            this.actived = actived;
+          },
+        },
+        render() {
+          return (
+            <Tree
+              ref="tree"
+              data={data}
+              activable
+              actived={this.actived}
+              onActive={this.onActive}
+              expand-all
+              transition={false}
+            ></Tree>
+          );
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      await delay(1);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+    });
   });
 
   describe('props.activeMultiple', () => {

src/tree/__tests__/adapt.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { defineComponent } from '@vue/composition-api';

src/tree/__tests__/api.test.jsx

@@ -24,16 +24,14 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
       expect(wrapper.find('[data-value="t1"]').exists()).toBe(true);
       expect(wrapper.find('[data-value="t1.1"]').exists()).toBe(true);
       expect(wrapper.find('[data-value="t2"]').exists()).toBe(true);
-
       wrapper.vm.$refs.tree.remove('t2');
       await delay(10);
-
       expect(wrapper.find('[data-value="t2"]').exists()).toBe(false);
     });
   });
@@ -57,7 +55,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -86,7 +84,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -109,7 +107,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -146,7 +144,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} checkable />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} checkable />;
         },
       });
 
@@ -186,7 +184,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} />;
+          return <Tree ref="tree" transition={false} data={data} />;
         },
       });
 
@@ -224,7 +222,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -264,7 +262,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -308,7 +306,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -354,7 +352,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -392,7 +390,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -430,7 +428,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -472,7 +470,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -518,7 +516,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -556,7 +554,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -594,7 +592,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -636,7 +634,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -668,7 +666,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -690,7 +688,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -722,7 +720,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -762,7 +760,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });