fix: tree support v-model

antdv-demo

@@ -1 +1 @@
-Subproject commit 033e7a7b879a2a76379f65ea7db2be6ddcd1ed36
+Subproject commit 13d33537f288296fed2de511882f74be15dd4981

components/tree/DirectoryTree.jsx

@@ -93,15 +93,15 @@ export default {
     },
   },
   methods: {
-    onExpand(expandedKeys, info) {
+    handleExpand(expandedKeys, info) {
       this.setUncontrolledState({ _expandedKeys: expandedKeys });
-
+      this.$emit('update:expandedKeys', expandedKeys);
       this.$emit('expand', expandedKeys, info);
 
       return undefined;
     },
 
-    onClick(event, node) {
+    handleClick(event, node) {
       const { expandAction } = this.$props;
 
       // Expand the tree
@@ -111,7 +111,7 @@ export default {
       this.$emit('click', event, node);
     },
 
-    onDoubleClick(event, node) {
+    handleDoubleClick(event, node) {
       const { expandAction } = this.$props;
 
       // Expand the tree
@@ -123,7 +123,7 @@ export default {
       this.$emit('dblclick', event, node);
     },
 
-    onSelect(keys, event) {
+    hanldeSelect(keys, event) {
       const { multiple } = this.$props;
       const children = this.children || [];
       const { _expandedKeys: expandedKeys = [] } = this.$data;
@@ -203,6 +203,10 @@ export default {
         this.setState(newState);
       }
     },
+    handleCheck(checkedObj, eventObj) {
+      this.$emit('update:checkedKeys', checkedObj);
+      this.$emit('check', checkedObj, eventObj);
+    },
   },
 
   render() {
@@ -215,18 +219,19 @@ export default {
     const connectClassName = classNames(`${prefixCls}-directory`, className);
     const treeProps = {
       icon: getIcon,
-      ...props,
-      ...omit(restAttrs, ['onUpdate:selectedKeys']),
+      ...restAttrs,
+      ...omit(props, ['onUpdate:selectedKeys', 'onUpdate:checkedKeys', 'onUpdate:expandedKeys']),
       prefixCls,
       expandedKeys,
       selectedKeys,
       switcherIcon: getComponent(this, 'switcherIcon'),
       ref: this.setTreeRef,
       class: connectClassName,
-      onSelect: this.onSelect,
-      onClick: this.onClick,
-      onDblclick: this.onDoubleClick,
-      onExpand: this.onExpand,
+      onSelect: this.hanldeSelect,
+      onClick: this.handleClick,
+      onDblclick: this.handleDoubleClick,
+      onExpand: this.handleExpand,
+      onCheck: this.handleCheck,
     };
     return <Tree {...treeProps}>{this.children}</Tree>;
   },

components/tree/Tree.jsx

@@ -48,16 +48,7 @@ function TreeProps() {
     /** 默认选中的树节点 */
     defaultSelectedKeys: PropTypes.array,
     selectable: PropTypes.bool,
-    /** 展开/收起节点时触发 */
-    // onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
-    /** 点击复选框触发 */
-    // onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
-    /** 点击树节点触发 */
-    // onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
-    /** 单击树节点触发 */
-    // onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
-    /** 双击树节点触发 */
-    // onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
+
     /** filter some AntTreeNodes as you need. it should return true */
     filterAntTreeNode: PropTypes.func,
     /** 异步加载数据 */
@@ -91,6 +82,20 @@ function TreeProps() {
      */
     replaceFields: PropTypes.object,
     blockNode: PropTypes.bool,
+    /** 展开/收起节点时触发 */
+    onExpand: PropTypes.func,
+    /** 点击复选框触发 */
+    onCheck: PropTypes.func,
+    /** 点击树节点触发 */
+    onSelect: PropTypes.func,
+    /** 单击树节点触发 */
+    onClick: PropTypes.func,
+    /** 双击树节点触发 */
+    onDoubleclick: PropTypes.func,
+    onDblclick: PropTypes.func,
+    'onUpdate:selectedKeys': PropTypes.func,
+    'onUpdate:checkedKeys': PropTypes.func,
+    'onUpdate:expandedKeys': PropTypes.func,
   };
 }
 
@@ -127,9 +132,7 @@ export default {
       const switcherCls = `${prefixCls}-switcher-icon`;
       if (switcherIcon) {
         return cloneElement(switcherIcon, {
-          class: {
-            [switcherCls]: true,
-          },
+          class: switcherCls,
         });
       }
       return showLine ? (
@@ -172,6 +175,18 @@ export default {
     setTreeRef(node) {
       this.tree = node;
     },
+    handleCheck(checkedObj, eventObj) {
+      this.$emit('update:checkedKeys', checkedObj);
+      this.$emit('check', checkedObj, eventObj);
+    },
+    handleExpand(expandedKeys, eventObj) {
+      this.$emit('update:expandedKeys', expandedKeys);
+      this.$emit('expand', expandedKeys, eventObj);
+    },
+    handleSelect(selectedKeys, eventObj) {
+      this.$emit('update:selectedKeys', selectedKeys);
+      this.$emit('select', selectedKeys, eventObj);
+    },
   },
   render() {
     const props = getOptionProps(this);
@@ -197,6 +212,9 @@ export default {
         [`${prefixCls}-icon-hide`]: !showIcon,
         [`${prefixCls}-block-node`]: blockNode,
       }),
+      onCheck: this.handleCheck,
+      onExpand: this.handleExpand,
+      onSelect: this.handleSelect,
     };
     if (treeData) {
       vcTreeProps.treeData = treeData;

components/tree/__tests__/util.test.js

@@ -30,9 +30,9 @@ describe('Tree util', () => {
       },
     });
 
-    const treeWrapper = wrapper.find({ name: 'ATree' });
+    const treeWrapper = wrapper.findComponent({ name: 'ATree' });
     const keys = calcRangeKeys(
-      treeWrapper.vm.$slots.default,
+      treeWrapper.vm.$slots.default(),
       ['0-0', '0-2', '0-2-0'],
       '0-2-0-1',
       '0-0-0',

components/vc-tree/src/Tree.jsx

@@ -419,7 +419,6 @@ const Tree = {
         selectedNodes,
         nativeEvent: e,
       };
-      this.__emit('update:selectedKeys', selectedKeys);
       this.__emit('select', selectedKeys, eventObj);
     },
     onNodeCheck(e, treeNode, checked) {
@@ -481,8 +480,6 @@ const Tree = {
           _halfCheckedKeys: halfCheckedKeys,
         });
       }
-      this.__emit('update:checkedKeys', checkedObj);
-
       this.__emit('check', checkedObj, eventObj);
     },
     onNodeLoad(treeNode) {
@@ -555,7 +552,6 @@ const Tree = {
         expanded: targetExpanded,
         nativeEvent: e,
       });
-      this.__emit('update:expandedKeys', expandedKeys);
 
       // Async Load data
       if (targetExpanded && loadData) {

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/table/demo/ajax';
+import demo from '../antdv-demo/docs/tree/demo/index';
 
 export default {
   components: {