perf: update tree-select

antdv-demo

@@ -1 +1 @@
-Subproject commit 13d33537f288296fed2de511882f74be15dd4981
+Subproject commit 747488ec6b7df7cb3f7fd2a3c15c16e4368a79ec

components/tree-select/index.jsx

@@ -61,10 +61,18 @@ const TreeSelect = {
       }
       return <CaretDownOutlined class={`${prefixCls}-switcher-icon`} />;
     },
-    onChange(...args) {
+    handleChange(...args) {
       this.$emit('update:value', args[0]);
       this.$emit('change', ...args);
     },
+    handleTreeExpand(...args) {
+      this.$emit('update:treeExpandedKeys', args[0]);
+      this.$emit('treeExpand', ...args);
+    },
+    handleSearch(...args) {
+      this.$emit('update:searchValue', args[0]);
+      this.$emit('search', ...args);
+    },
     updateTreeData(treeData) {
       const { $slots } = this;
       const defaultFields = {
@@ -163,25 +171,23 @@ const TreeSelect = {
     );
     const VcTreeSelectProps = {
       ...this.$attrs,
-      ...Object.assign(
-        {
-          switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, nodeProps),
-          inputIcon,
-          removeIcon: finalRemoveIcon,
-          clearIcon: finalClearIcon,
-          ...rest,
-          showSearch,
-          getPopupContainer: getPopupContainer || getContextPopupContainer,
-          dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
-          prefixCls,
-          dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
-          treeCheckable: checkable,
-          notFoundContent: notFoundContent || renderEmpty('Select'),
-        },
-        treeData ? { treeData } : {},
-      ),
+      switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, nodeProps),
+      inputIcon,
+      removeIcon: finalRemoveIcon,
+      clearIcon: finalClearIcon,
+      ...rest,
+      showSearch,
+      getPopupContainer: getPopupContainer || getContextPopupContainer,
+      dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
+      prefixCls,
+      dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
+      treeCheckable: checkable,
+      notFoundContent: notFoundContent || renderEmpty('Select'),
+      ...(treeData ? { treeData } : {}),
       class: cls,
-      onChange: this.onChange,
+      onChange: this.handleChange,
+      onSearch: this.handleSearch,
+      onTreeExpand: this.handleTreeExpand,
       ref: this.saveTreeSelect,
       children: getSlot(this),
     };

components/tree-select/interface.jsx

@@ -33,9 +33,6 @@ export const TreeSelectProps = () => ({
   ]),
   multiple: PropTypes.bool,
   notFoundContent: PropTypes.any,
-  // onSelect: (value: any) => void,
-  // onChange: (value: any, label: any) => void,
-  // onSearch: (value: any) => void,
   searchPlaceholder: PropTypes.string,
   searchValue: PropTypes.string,
   showCheckedStrategy: PropTypes.oneOf(['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD']),
@@ -56,4 +53,12 @@ export const TreeSelectProps = () => ({
   replaceFields: PropTypes.object.def({}),
   clearIcon: PropTypes.any,
   removeIcon: PropTypes.any,
+
+  onSelect: PropTypes.func,
+  onChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  onTreeExpand: PropTypes.func,
+  'onUpdate:treeExpandedKeys': PropTypes.func,
+  'onUpdate:searchValue': PropTypes.func,
+  'onUpdate:value': PropTypes.func,
 });

components/vc-tree-select/src/Base/BasePopup.jsx

@@ -148,7 +148,6 @@ const BasePopup = {
           this.__emit('treeExpanded');
         });
       }
-      this.__emit('update:treeExpandedKeys', expandedKeyList);
       this.__emit('treeExpand', expandedKeyList);
     },
 

components/vc-tree-select/src/Select.jsx

@@ -707,7 +707,6 @@ const Select = {
         // We should also trigger onSearch with empty string here
         // since if user use `treeExpandedKeys`, it need user have the ability to reset it.
         if (searchValue && searchValue.length) {
-          this.__emit('update:searchValue', '');
           this.__emit('search', '');
         }
       }
@@ -834,7 +833,6 @@ const Select = {
       const value = event.target.value;
       const { _treeNodes: treeNodes, _valueEntities: valueEntities } = this.$data;
       const { filterTreeNode, treeNodeFilterProp } = this.$props;
-      this.__emit('update:searchValue', value);
       this.__emit('search', value);
 
       let isSet = false;
@@ -1031,7 +1029,6 @@ const Select = {
         if (!this.isMultiple()) {
           returnValue = returnValue[0];
         }
-        // this.__emit('update:value', returnValue);
         this.__emit('change', returnValue, labelList, extra);
       }
     },

examples/App.vue

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