fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应…

…变更事件，并触发对应 props 的变更 (#2852)
Tencent · Oct 19, 2023 · 70b0977 · 70b0977
1 parent ff3fe7a
commit 70b0977
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 13 deletions.
diff --git a/src/tree/__tests__/api.test.jsx b/src/tree/__tests__/api.test.jsx
@@ -123,7 +123,7 @@ describe('Tree:api', () => {
       expect(wrapper.find('[data-value="t1"]').text()).toBe('节点1');
     });
 
-    it('可以设置节点属性 checked，触发视图更新', async () => {
+    it('可以设置节点属性 checked, 触发视图更新', async () => {
       const data = [
         {
           value: 't1',
@@ -142,28 +142,62 @@ describe('Tree:api', () => {
           ],
         },
       ];
+      let changeParams = null;
+      let changeCount = 0;
+      const onChange = (checked, context) => {
+        changeCount += 1;
+        changeParams = {
+          checked,
+          context,
+        };
+      };
       const wrapper = mount({
+        data() {
+          return {
+            checked: [],
+          };
+        },
         render() {
-          return <Tree ref="tree" transition={false} data={data} expandAll={true} checkable />;
+          return (
+            <Tree
+              ref="tree"
+              expandAll
+              checkable
+              transition={false}
+              data={data}
+              v-model={this.checked}
+              onChange={onChange}
+            />
+          );
         },
       });
 
-      await delay(10);
+      await delay(1);
       const { tree } = wrapper.vm.$refs;
       tree.setItem('t1', {
         checked: true,
       });
       tree.setItem('t2', {
         checked: true,
       });
-      await delay(10);
+
+      expect(wrapper.vm.checked.length).toBe(2);
+      expect(wrapper.vm.checked[0]).toBe('t1.1');
+      expect(wrapper.vm.checked[1]).toBe('t2.1');
+      await delay(1);
       expect(wrapper.find('[data-value="t1"] .t-checkbox').classes('t-is-checked')).toBe(true);
       expect(wrapper.find('[data-value="t1.1"] .t-checkbox').classes('t-is-checked')).toBe(true);
       expect(wrapper.find('[data-value="t2"] .t-checkbox').classes('t-is-checked')).toBe(true);
       expect(wrapper.find('[data-value="t2.1"] .t-checkbox').classes('t-is-checked')).toBe(true);
+
+      expect(changeCount).toBe(2);
+      expect(changeParams.checked.length).toBe(2);
+      expect(changeParams.checked[0]).toBe('t1.1');
+      expect(changeParams.checked[1]).toBe('t2.1');
+      expect(changeParams.context.node.value).toEqual('t2');
     });
 
-    it('可以设置节点属性 expanded，触发视图更新', async () => {
+    it('可以设置节点属性 expanded, 触发视图更新', async () => {
       const data = [
         {
           value: 't1',
@@ -182,27 +216,104 @@ describe('Tree:api', () => {
           ],
         },
       ];
+
+      let expandParams = null;
+      let expandCount = 0;
+      const onExpand = (expanded, context) => {
+        expandCount += 1;
+        expandParams = {
+          expanded,
+          context,
+        };
+      };
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" transition={false} data={data} />;
+          return <Tree ref="tree" transition={false} data={data} onExpand={onExpand} />;
         },
       });
 
-      await delay(10);
+      await delay(1);
       const { tree } = wrapper.vm.$refs;
       tree.setItem('t1', {
         expanded: true,
       });
       tree.setItem('t2', {
         expanded: true,
       });
-      await delay(10);
+      await delay(1);
       const t1d1 = wrapper.find('[data-value="t1.1"]');
       expect(t1d1.exists()).toBe(true);
       expect(t1d1.classes('t-tree__item--visible')).toBe(true);
       const t2d1 = wrapper.find('[data-value="t2.1"]');
       expect(t2d1.exists()).toBe(true);
       expect(t2d1.classes('t-tree__item--visible')).toBe(true);
+
+      expect(expandCount).toBe(2);
+      expect(expandParams.expanded.length).toBe(2);
+      expect(expandParams.expanded[0]).toBe('t1');
+      expect(expandParams.expanded[1]).toBe('t2');
+      expect(expandParams.context.node.value).toEqual('t2');
+    });
+
+    it('可以设置节点属性 actived, 触发视图更新', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+          ],
+        },
+        {
+          value: 't2',
+          children: [
+            {
+              value: 't2.1',
+            },
+          ],
+        },
+      ];
+
+      let activeParams = null;
+      let activeCount = 0;
+      const onActive = (actived, context) => {
+        activeCount += 1;
+        activeParams = {
+          actived,
+          context,
+        };
+      };
+      const wrapper = mount({
+        render() {
+          return <Tree ref="tree" activable expandAll transition={false} data={data} onActive={onActive} />;
+        },
+      });
+
+      await delay(1);
+      const t1d1 = wrapper.find('[data-value="t1.1"]');
+      const t2d1 = wrapper.find('[data-value="t2.1"]');
+
+      const { tree } = wrapper.vm.$refs;
+      tree.setItem('t1.1', {
+        actived: true,
+      });
+      expect(activeCount).toBe(1);
+      expect(activeParams.actived.length).toBe(1);
+      expect(activeParams.actived[0]).toBe('t1.1');
+      expect(activeParams.context.node.value).toEqual('t1.1');
+      await delay(1);
+      expect(t1d1.classes('t-is-active')).toBe(true);
+
+      tree.setItem('t2.1', {
+        actived: true,
+      });
+      expect(activeCount).toBe(2);
+      expect(activeParams.actived.length).toBe(1);
+      expect(activeParams.actived[0]).toBe('t2.1');
+      expect(activeParams.context.node.value).toEqual('t2.1');
+      await delay(1);
+      expect(t2d1.classes('t-is-active')).toBe(true);
     });
   });
 

diff --git a/src/tree/hooks/useTreeAction.ts b/src/tree/hooks/useTreeAction.ts
@@ -37,6 +37,9 @@ export default function useTreeAction(state: TypeTreeState) {
       }
     }
     setTExpanded(expanded, evtCtx);
+    if (evtCtx.trigger === 'setItem') {
+      store.replaceExpanded(expanded);
+    }
     return expanded;
   };
 
@@ -58,6 +61,9 @@ export default function useTreeAction(state: TypeTreeState) {
       evtCtx.trigger = 'node-click';
     }
     setTActived(actived, evtCtx);
+    if (evtCtx.trigger === 'setItem') {
+      store.replaceActived(actived);
+    }
     return actived;
   };
 
@@ -79,6 +85,9 @@ export default function useTreeAction(state: TypeTreeState) {
       evtCtx.trigger = 'node-click';
     }
     setTValue(checked, evtCtx);
+    if (evtCtx.trigger === 'setItem') {
+      store.replaceChecked(checked);
+    }
     return checked;
   };
 

diff --git a/src/tree/tree.tsx b/src/tree/tree.tsx
@@ -101,12 +101,9 @@ export default defineComponent({
             const val = spec[name];
             delete spec[name];
             const methodName = `set${upperFirst(name)}`;
-            const setupMethod = node[methodName];
+            const setupMethod = this[methodName];
             if (isFunction(setupMethod)) {
-              setupMethod.call(node, val, {
-                directly: true,
-                isAction: false,
-              });
+              setupMethod.call(this, node, val);
             }
           }
         });