vxe-pc-ui 3.7.4 → 3.7.6

package/es/tree/src/util.js

@@ -0,0 +1,31 @@
+function countTreeExpand($xeTree, prevNode) {
+    let count = 1;
+    if (!prevNode) {
+        return count;
+    }
+    const props = $xeTree;
+    const { transform } = props;
+    const reactData = $xeTree.reactData;
+    const { updateExpandedFlag } = reactData;
+    const internalData = $xeTree.internalData;
+    const { treeExpandedMaps } = internalData;
+    const childrenField = $xeTree.computeChildrenField;
+    const mapChildrenField = $xeTree.computeMapChildrenField;
+    const nodeChildren = prevNode[transform ? mapChildrenField : childrenField];
+    if (nodeChildren && updateExpandedFlag && treeExpandedMaps[$xeTree.getNodeId(prevNode)]) {
+        for (let index = 0; index < nodeChildren.length; index++) {
+            count += countTreeExpand($xeTree, nodeChildren[index]);
+        }
+    }
+    return count;
+}
+export function calcTreeLine($xeTree, node, prevNode) {
+    const internalData = $xeTree.internalData;
+    const { scrollYStore } = internalData;
+    const { rowHeight } = scrollYStore;
+    let expandSize = 1;
+    if (prevNode) {
+        expandSize = countTreeExpand($xeTree, prevNode);
+    }
+    return (rowHeight || 28) * expandSize - (prevNode ? 1 : 12);
+}

package/es/tree/style.css

@@ -2,7 +2,6 @@
   position: relative;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
-  overflow: auto;
 }
 .vxe-tree.node--trigger .vxe-tree--node-item {
   cursor: pointer;
@@ -28,21 +27,6 @@
 .vxe-tree.node--hover.checkbox--highlight .vxe-tree--node-item.is-checkbox--checked:hover {
   background-color: var(--vxe-ui-tree-node-hover-checkbox-checked-background-color);
 }
-.vxe-tree.show--line .vxe-tree--node-list-wrapper {
-  position: relative;
-}
-.vxe-tree.show--line .vxe-tree--node-list-wrapper::before {
-  content: "";
-  position: absolute;
-  left: 0.7em;
-  top: calc(var(--vxe-ui-tree-node-height) / 2);
-  height: calc(100% - var(--vxe-ui-tree-node-height));
-  border-left-width: var(--vxe-ui-tree-node-line-width);
-  border-left-style: var(--vxe-ui-tree-node-line-style);
-  border-left-color: var(--vxe-ui-tree-node-line-color);
-  pointer-events: none;
-  z-index: 5;
-}
 .vxe-tree.show--line .vxe-tree--node-child-line {
   position: absolute;
   top: 0;
@@ -55,20 +39,27 @@
   pointer-events: none;
   z-index: 5;
 }
-.vxe-tree.show--line .vxe-tree--node-item-switcher {
+
+.vxe-tree--node-line-wrapper {
   position: relative;
+  display: block;
+  height: 0;
 }
-.vxe-tree.show--line .vxe-tree--node-item-switcher::before {
-  content: "";
+
+.vxe-tree--node-line {
   position: absolute;
-  left: 0.8em;
-  top: 50%;
-  width: 0.5em;
-  border-bottom-width: var(--vxe-ui-tree-node-line-width);
-  border-bottom-style: var(--vxe-ui-tree-node-line-style);
-  border-bottom-color: var(--vxe-ui-tree-node-line-color);
+  bottom: calc(var(--vxe-ui-tree-node-height) / 2 * -1);
+  left: 0.6em;
+  width: 0.6em;
+  border-width: 0 0 var(--vxe-ui-tree-node-line-width) var(--vxe-ui-tree-node-line-width);
+  border-style: var(--vxe-ui-tree-node-line-style);
+  border-color: var(--vxe-ui-tree-node-line-color);
   pointer-events: none;
-  z-index: 5;
+}
+
+.vxe-tree--node-list-wrapper {
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .vxe-tree--node-child-wrapper {
@@ -206,6 +197,12 @@
   vertical-align: middle;
 }
 
+.vxe-tree--empty-placeholder {
+  padding: 1.4em 0.6em 0 0.6em;
+  text-align: center;
+  color: var(--vxe-ui-input-placeholder-color);
+}
+
 .vxe-tree {
   font-size: var(--vxe-ui-font-size-default);
 }

package/es/tree/style.min.css

@@ -1 +1 @@
-.vxe-tree{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);overflow:auto}.vxe-tree.node--trigger .vxe-tree--node-item{cursor:pointer}.vxe-tree .vxe-tree--node-item.is--current{background-color:var(--vxe-ui-tree-node-current-background-color)}.vxe-tree.checkbox--highlight .vxe-tree--node-item.is-checkbox--checked{background-color:var(--vxe-ui-tree-node-checkbox-checked-background-color)}.vxe-tree.radio--highlight .vxe-tree--node-item.is-radio--checked{background-color:var(--vxe-ui-tree-node-radio-checked-background-color)}.vxe-tree.node--hover .vxe-tree--node-item:hover{background-color:var(--vxe-ui-tree-node-hover-background-color)}.vxe-tree.node--hover .vxe-tree--node-item:hover.is--current{background-color:var(--vxe-ui-tree-node-hover-current-background-color)}.vxe-tree.node--hover.radio--highlight .vxe-tree--node-item.is-radio--checked:hover{background-color:var(--vxe-ui-tree-node-hover-radio-checked-background-color)}.vxe-tree.node--hover.checkbox--highlight .vxe-tree--node-item.is-checkbox--checked:hover{background-color:var(--vxe-ui-tree-node-hover-checkbox-checked-background-color)}.vxe-tree.show--line .vxe-tree--node-list-wrapper{position:relative}.vxe-tree.show--line .vxe-tree--node-list-wrapper::before{content:"";position:absolute;left:.7em;top:calc(var(--vxe-ui-tree-node-height)/ 2);height:calc(100% - var(--vxe-ui-tree-node-height));border-left-width:var(--vxe-ui-tree-node-line-width);border-left-style:var(--vxe-ui-tree-node-line-style);border-left-color:var(--vxe-ui-tree-node-line-color);pointer-events:none;z-index:5}.vxe-tree.show--line .vxe-tree--node-child-line{position:absolute;top:0;left:0;height:calc(100% - .7em);transform:translateX(-.6em);border-left-width:var(--vxe-ui-tree-node-line-width);border-left-style:var(--vxe-ui-tree-node-line-style);border-left-color:var(--vxe-ui-tree-node-line-color);pointer-events:none;z-index:5}.vxe-tree.show--line .vxe-tree--node-item-switcher{position:relative}.vxe-tree.show--line .vxe-tree--node-item-switcher::before{content:"";position:absolute;left:.8em;top:50%;width:.5em;border-bottom-width:var(--vxe-ui-tree-node-line-width);border-bottom-style:var(--vxe-ui-tree-node-line-style);border-bottom-color:var(--vxe-ui-tree-node-line-color);pointer-events:none;z-index:5}.vxe-tree--node-child-wrapper{position:relative}.vxe-tree--node-item{display:flex;flex-direction:row;height:var(--vxe-ui-tree-node-height);line-height:var(--vxe-ui-tree-node-height)}.vxe-tree--node-item-switcher{position:relative;width:1.4em;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--node-item-icon{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;text-align:center;z-index:7}.vxe-tree--node-item-icon>i{display:inline-flex;transition:all .2s ease-in-out}.vxe-tree--node-item-inner{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-tree--node-item-inner .vxe-tree--node-item-title{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tree--node-item-inner .vxe-tree--node-item-extra{flex-shrink:0}.vxe-tree--checkbox-option{padding-right:.4em}.vxe-tree--checkbox-option .vxe-checkbox--icon{font-size:1.22em}.vxe-tree--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--checkbox-option.is--checked,.vxe-tree--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-tree--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option:not(.is--disabled){cursor:pointer}.vxe-tree--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option.is--hidden{cursor:default}.vxe-tree--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-tree--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-tree--checkbox-option .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-tree--radio-option{padding-right:.4em;cursor:pointer}.vxe-tree--radio-option .vxe-radio--icon{font-size:1.26em}.vxe-tree--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option:not(.is--disabled){cursor:pointer}.vxe-tree--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-tree--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-tree--radio-option .vxe-radio--label{padding-left:.5em;vertical-align:middle}.vxe-tree{font-size:var(--vxe-ui-font-size-default)}.vxe-tree.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-tree{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tree.node--trigger .vxe-tree--node-item{cursor:pointer}.vxe-tree .vxe-tree--node-item.is--current{background-color:var(--vxe-ui-tree-node-current-background-color)}.vxe-tree.checkbox--highlight .vxe-tree--node-item.is-checkbox--checked{background-color:var(--vxe-ui-tree-node-checkbox-checked-background-color)}.vxe-tree.radio--highlight .vxe-tree--node-item.is-radio--checked{background-color:var(--vxe-ui-tree-node-radio-checked-background-color)}.vxe-tree.node--hover .vxe-tree--node-item:hover{background-color:var(--vxe-ui-tree-node-hover-background-color)}.vxe-tree.node--hover .vxe-tree--node-item:hover.is--current{background-color:var(--vxe-ui-tree-node-hover-current-background-color)}.vxe-tree.node--hover.radio--highlight .vxe-tree--node-item.is-radio--checked:hover{background-color:var(--vxe-ui-tree-node-hover-radio-checked-background-color)}.vxe-tree.node--hover.checkbox--highlight .vxe-tree--node-item.is-checkbox--checked:hover{background-color:var(--vxe-ui-tree-node-hover-checkbox-checked-background-color)}.vxe-tree.show--line .vxe-tree--node-child-line{position:absolute;top:0;left:0;height:calc(100% - .7em);transform:translateX(-.6em);border-left-width:var(--vxe-ui-tree-node-line-width);border-left-style:var(--vxe-ui-tree-node-line-style);border-left-color:var(--vxe-ui-tree-node-line-color);pointer-events:none;z-index:5}.vxe-tree--node-line-wrapper{position:relative;display:block;height:0}.vxe-tree--node-line{position:absolute;bottom:calc(var(--vxe-ui-tree-node-height)/ 2 * -1);left:.6em;width:.6em;border-width:0 0 var(--vxe-ui-tree-node-line-width) var(--vxe-ui-tree-node-line-width);border-style:var(--vxe-ui-tree-node-line-style);border-color:var(--vxe-ui-tree-node-line-color);pointer-events:none}.vxe-tree--node-list-wrapper{overflow-y:auto;overflow-x:hidden}.vxe-tree--node-child-wrapper{position:relative}.vxe-tree--node-item{display:flex;flex-direction:row;height:var(--vxe-ui-tree-node-height);line-height:var(--vxe-ui-tree-node-height)}.vxe-tree--node-item-switcher{position:relative;width:1.4em;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--node-item-icon{position:absolute;display:inline-flex;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;text-align:center;z-index:7}.vxe-tree--node-item-icon>i{display:inline-flex;transition:all .2s ease-in-out}.vxe-tree--node-item-inner{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-tree--node-item-inner .vxe-tree--node-item-title{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tree--node-item-inner .vxe-tree--node-item-extra{flex-shrink:0}.vxe-tree--checkbox-option{padding-right:.4em}.vxe-tree--checkbox-option .vxe-checkbox--icon{font-size:1.22em}.vxe-tree--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--checkbox-option.is--checked,.vxe-tree--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-tree--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option:not(.is--disabled){cursor:pointer}.vxe-tree--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--checkbox-option.is--hidden{cursor:default}.vxe-tree--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-tree--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-tree--checkbox-option .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-tree--radio-option{padding-right:.4em;cursor:pointer}.vxe-tree--radio-option .vxe-radio--icon{font-size:1.26em}.vxe-tree--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option:not(.is--disabled){cursor:pointer}.vxe-tree--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-tree--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-tree--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-tree--radio-option .vxe-radio--label{padding-left:.5em;vertical-align:middle}.vxe-tree--empty-placeholder{padding:1.4em .6em 0 .6em;text-align:center;color:var(--vxe-ui-input-placeholder-color)}.vxe-tree{font-size:var(--vxe-ui-font-size-default)}.vxe-tree.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/tree-select/src/tree-select.js

@@ -5,6 +5,7 @@ import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/sr
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { errLog } from '../../ui/src/log';
 import VxeInputComponent from '../../input/src/input';
+import VxeButtonComponent from '../../button/src/button';
 import VxeTreeComponent from '../../tree/src/tree';
 function getOptUniqueId() {
     return XEUtils.uniqueId('node_');
@@ -34,6 +35,8 @@ export default {
             type: Boolean,
             default: null
         },
+        filterable: Boolean,
+        filterConfig: Object,
         multiple: Boolean,
         className: [String, Function],
         popupClassName: [String, Function],
@@ -43,16 +46,42 @@ export default {
         optionProps: Object,
         size: {
             type: String,
-            default: () => getConfig().select.size || getConfig().size
+            default: () => getConfig().treeSelect.size || getConfig().size
         },
         remote: Boolean,
-        remoteMethod: Function,
+        remoteConfig: Function,
         popupConfig: Object,
         treeConfig: Object,
+        virtualYConfig: Object,
+        autoClose: {
+            type: Boolean,
+            default: () => getConfig().treeSelect.autoClose
+        },
+        showTotalButoon: {
+            type: Boolean,
+            default: () => getConfig().treeSelect.showTotalButoon
+        },
+        showCheckedButoon: {
+            type: Boolean,
+            default: () => getConfig().treeSelect.showCheckedButoon
+        },
+        showClearButton: {
+            type: Boolean,
+            default: () => getConfig().treeSelect.showClearButton
+        },
+        showExpandButton: {
+            type: Boolean,
+            default: () => getConfig().treeSelect.showExpandButton
+        },
         transfer: {
             type: Boolean,
             default: null
-        }
+        },
+        /**
+         * 已废弃，被 remote-config.queryMethod 替换
+         * @deprecated
+         */
+        remoteMethod: Function
     },
     inject: {
         $xeModal: {
@@ -82,8 +111,8 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = {
             initialized: false,
-            fullOptionList: [],
-            fullNodeMaps: {},
+            searchValue: '',
+            searchLoading: false,
             panelIndex: 0,
             panelStyle: {},
             panelPlacement: null,
@@ -93,7 +122,9 @@ export default {
             isActivated: false
         };
         const internalData = {
-            hpTimeout: undefined
+            // hpTimeout: undefined,
+            fullOptionList: [],
+            fullNodeMaps: {}
         };
         return {
             xID,
@@ -214,14 +245,31 @@ export default {
             const propsOpts = $xeTreeSelect.computePropsOpts;
             return propsOpts.hasChild || 'hasChild';
         },
+        computeVirtualYOpts() {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            return Object.assign({}, getConfig().treeSelect.virtualYConfig, props.virtualYConfig);
+        },
+        computeRemoteOpts() {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            return Object.assign({}, getConfig().treeSelect.remoteConfig, props.remoteConfig);
+        },
+        computeFilterOpts() {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            const treeOpts = $xeTreeSelect.computeTreeOpts;
+            return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
+        },
         computeSelectLabel() {
             const $xeTreeSelect = this;
             const props = $xeTreeSelect;
-            const reactData = $xeTreeSelect.reactData;
-            const { value } = props;
-            const { fullNodeMaps } = reactData;
+            const internalData = $xeTreeSelect.internalData;
+            const { value: modelValue } = props;
+            const { fullNodeMaps } = internalData;
             const labelField = $xeTreeSelect.computeLabelField;
-            return (XEUtils.isArray(value) ? value : [value]).map(val => {
+            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+            return selectVals.map(val => {
                 const cacheItem = fullNodeMaps[val];
                 return cacheItem ? cacheItem.item[labelField] : val;
             }).join(', ');
@@ -267,7 +315,7 @@ export default {
         cacheDataMap() {
             const $xeTreeSelect = this;
             const props = $xeTreeSelect;
-            const reactData = $xeTreeSelect.reactData;
+            const internalData = $xeTreeSelect.internalData;
             const { options } = props;
             const nodeKeyField = $xeTreeSelect.computeNodeKeyField;
             const childrenField = $xeTreeSelect.computeChildrenField;
@@ -289,8 +337,8 @@ export default {
                 }
                 nodeMaps[value] = { item, index, items, parent, nodes };
             }, { children: childrenField });
-            reactData.fullOptionList = options || [];
-            reactData.fullNodeMaps = nodeMaps;
+            internalData.fullOptionList = options || [];
+            internalData.fullNodeMaps = nodeMaps;
         },
         updateZindex() {
             const $xeTreeSelect = this;
@@ -327,8 +375,10 @@ export default {
             const props = $xeTreeSelect;
             const reactData = $xeTreeSelect.reactData;
             const internalData = $xeTreeSelect.internalData;
-            const { loading } = props;
+            const { loading, remote, filterable } = props;
+            const { fullOptionList } = internalData;
             const isDisabled = $xeTreeSelect.computeIsDisabled;
+            const remoteOpts = $xeTreeSelect.computeRemoteOpts;
             if (!loading && !isDisabled) {
                 if (internalData.hpTimeout) {
                     clearTimeout(internalData.hpTimeout);
@@ -345,8 +395,14 @@ export default {
                 }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
+                if (filterable) {
+                    if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+                        $xeTreeSelect.handleSearchEvent();
+                    }
+                }
                 setTimeout(() => {
                     reactData.visiblePanel = true;
+                    $xeTreeSelect.handleFocusSearch();
                 }, 10);
                 $xeTreeSelect.updateZindex();
                 $xeTreeSelect.updatePlacement();
@@ -364,10 +420,10 @@ export default {
         changeEvent(evnt, selectValue) {
             const $xeTreeSelect = this;
             const props = $xeTreeSelect;
-            const reactData = $xeTreeSelect.reactData;
+            const internalData = $xeTreeSelect.internalData;
             const $xeForm = $xeTreeSelect.$xeForm;
             const formItemInfo = $xeTreeSelect.formItemInfo;
-            const { fullNodeMaps } = reactData;
+            const { fullNodeMaps } = internalData;
             $xeTreeSelect.emitModel(selectValue);
             if (selectValue !== props.value) {
                 const cacheItem = fullNodeMaps[selectValue];
@@ -388,6 +444,55 @@ export default {
             $xeTreeSelect.clearValueEvent(evnt, null);
             $xeTreeSelect.hideOptionPanel();
         },
+        allCheckedPanelEvent(params) {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            const { $event } = params;
+            const { multiple, autoClose } = props;
+            const $tree = $xeTreeSelect.$refs.refTree;
+            if (multiple) {
+                if ($tree) {
+                    $tree.setAllCheckboxNode(true).then(({ checkNodeKeys }) => {
+                        $xeTreeSelect.changeEvent($event, checkNodeKeys);
+                        $xeTreeSelect.dispatchEvent('all-change', { value: checkNodeKeys }, $event);
+                        if (autoClose) {
+                            $xeTreeSelect.hideOptionPanel();
+                        }
+                    });
+                }
+            }
+        },
+        clearCheckedPanelEvent(params) {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            const { $event } = params;
+            const { multiple, autoClose } = props;
+            const $tree = $xeTreeSelect.$refs.refTree;
+            if ($tree) {
+                const value = multiple ? [] : null;
+                $tree.clearCheckboxNode().then(() => {
+                    if (autoClose) {
+                        $xeTreeSelect.hideOptionPanel();
+                    }
+                });
+                $xeTreeSelect.changeEvent($event, value);
+                $xeTreeSelect.dispatchEvent('clear', { value }, $event);
+            }
+        },
+        allExpandPanelEvent() {
+            const $xeTreeSelect = this;
+            const $tree = $xeTreeSelect.$refs.refTree;
+            if ($tree) {
+                $tree.setAllExpandNode(true);
+            }
+        },
+        clearExpandPanelEvent() {
+            const $xeTreeSelect = this;
+            const $tree = $xeTreeSelect.$refs.refTree;
+            if ($tree) {
+                $tree.clearAllExpandNode();
+            }
+        },
         handleGlobalMousewheelEvent(evnt) {
             const $xeTreeSelect = this;
             const reactData = $xeTreeSelect.reactData;
@@ -431,6 +536,18 @@ export default {
                 $xeTreeSelect.updatePlacement();
             }
         },
+        handleFocusSearch() {
+            const $xeSelect = this;
+            const props = $xeSelect;
+            if (props.filterable) {
+                $xeSelect.$nextTick(() => {
+                    const inpSearch = $xeSelect.$refs.refInpSearch;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        },
         focusEvent(evnt) {
             const $xeTreeSelect = this;
             const reactData = $xeTreeSelect.reactData;
@@ -457,6 +574,28 @@ export default {
             reactData.isActivated = false;
             $xeTreeSelect.dispatchEvent('blur', {}, evnt);
         },
+        modelSearchEvent(value) {
+            const $xeTreeSelect = this;
+            const reactData = $xeTreeSelect.reactData;
+            reactData.searchValue = value;
+        },
+        handleSearchEvent() {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            const reactData = $xeTreeSelect.reactData;
+            const { value: modelValue, remote, remoteMethod } = props;
+            const { searchValue } = reactData;
+            const remoteOpts = $xeTreeSelect.computeRemoteOpts;
+            const queryMethod = remoteOpts.queryMethod || remoteMethod;
+            if (remote && queryMethod && remoteOpts.enabled) {
+                reactData.searchLoading = true;
+                Promise.resolve(queryMethod({ $treeSelect: $xeTreeSelect, searchValue, value: modelValue })).then(() => $xeTreeSelect.$nextTick())
+                    .catch(() => $xeTreeSelect.$nextTick())
+                    .finally(() => {
+                    reactData.searchLoading = false;
+                });
+            }
+        },
         togglePanelEvent(params) {
             const $xeTreeSelect = this;
             const reactData = $xeTreeSelect.reactData;
@@ -502,8 +641,8 @@ export default {
             const props = $xeTreeSelect;
             const slots = $xeTreeSelect.$scopedSlots;
             const reactData = $xeTreeSelect.reactData;
-            const { className, value, multiple, options, loading } = props;
-            const { initialized, isActivated, isAniVisible, visiblePanel } = reactData;
+            const { className, value: modelValue, multiple, options, loading, filterable, showTotalButoon, showCheckedButoon, showClearButton, showExpandButton } = props;
+            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData;
             const vSize = $xeTreeSelect.computeSize;
             const isDisabled = $xeTreeSelect.computeIsDisabled;
             const selectLabel = $xeTreeSelect.computeSelectLabel;
@@ -525,6 +664,8 @@ export default {
             const childrenField = $xeTreeSelect.computeChildrenField;
             const parentField = $xeTreeSelect.computeParentField;
             const hasChildField = $xeTreeSelect.computeHasChildField;
+            const virtualYOpts = $xeTreeSelect.computeVirtualYOpts;
+            const filterOpts = $xeTreeSelect.computeFilterOpts;
             if (formReadonly) {
                 return h('div', {
                     ref: 'refElem',
@@ -535,10 +676,12 @@ export default {
                     }, selectLabel)
                 ]);
             }
+            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
             return h('div', {
                 ref: 'refElem',
                 class: ['vxe-tree-select', className ? (XEUtils.isFunction(className) ? className({ $treeSelect: $xeTreeSelect }) : className) : '', {
                         [`size--${vSize}`]: vSize,
+                        'is--filterable': filterable,
                         'is--visible': visiblePanel,
                         'is--disabled': isDisabled,
                         'is--loading': loading,
@@ -555,7 +698,8 @@ export default {
                         type: 'text',
                         prefixIcon: props.prefixIcon,
                         suffixIcon: loading ? getIcon().TREE_SELECT_LOADED : (visiblePanel ? getIcon().TREE_SELECT_OPEN : getIcon().TREE_SELECT_CLOSE),
-                        value: loading ? getI18n('vxe.select.loadingText') : selectLabel
+                        value: loading ? getI18n('vxe.select.loadingText') : selectLabel,
+                        title: selectLabel
                     },
                     on: {
                         clear: $xeTreeSelect.clearEvent,
@@ -587,10 +731,92 @@ export default {
                         h('div', {
                             class: 'vxe-tree-select--panel-wrapper'
                         }, [
-                            headerSlot
+                            filterable
+                                ? h('div', {
+                                    class: 'vxe-tree-select--panel-search'
+                                }, [
+                                    h(VxeInputComponent, {
+                                        ref: 'refInpSearch',
+                                        class: 'vxe-tree-select-search--input',
+                                        props: {
+                                            value: searchValue,
+                                            title: selectLabel,
+                                            clearable: true,
+                                            disabled: false,
+                                            readonly: false,
+                                            placeholder: getI18n('vxe.treeSelect.search'),
+                                            prefixIcon: getIcon().INPUT_SEARCH
+                                        },
+                                        on: {
+                                            'model-value': $xeTreeSelect.modelSearchEvent
+                                        }
+                                    })
+                                ])
+                                : renderEmptyElement($xeTreeSelect),
+                            showTotalButoon || (showCheckedButoon && multiple) || showClearButton || showExpandButton || headerSlot
                                 ? h('div', {
                                     class: 'vxe-tree-select--panel-header'
-                                }, headerSlot({}))
+                                }, headerSlot
+                                    ? headerSlot({})
+                                    : [
+                                        h('div', {
+                                            class: 'vxe-tree-select--header-button'
+                                        }, [
+                                            showTotalButoon
+                                                ? h('div', {
+                                                    class: 'vxe-tree-select--header-total'
+                                                }, getI18n('vxe.treeSelect.total', [selectVals.length]))
+                                                : renderEmptyElement($xeTreeSelect),
+                                            h('div', {
+                                                class: 'vxe-tree-select--header-btns'
+                                            }, [
+                                                (showCheckedButoon && multiple)
+                                                    ? h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.treeSelect.allChecked'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeTreeSelect.allCheckedPanelEvent
+                                                        }
+                                                    })
+                                                    : renderEmptyElement($xeTreeSelect),
+                                                showClearButton
+                                                    ? h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.treeSelect.clearChecked'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeTreeSelect.clearCheckedPanelEvent
+                                                        }
+                                                    })
+                                                    : renderEmptyElement($xeTreeSelect),
+                                                showExpandButton
+                                                    ? h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.treeSelect.allExpand'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeTreeSelect.allExpandPanelEvent
+                                                        }
+                                                    })
+                                                    : renderEmptyElement($xeTreeSelect),
+                                                showExpandButton
+                                                    ? h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.treeSelect.clearExpand'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeTreeSelect.clearExpandPanelEvent
+                                                        }
+                                                    })
+                                                    : renderEmptyElement($xeTreeSelect)
+                                            ])
+                                        ])
+                                    ])
                                 : renderEmptyElement($xeTreeSelect),
                             h('div', {
                                 class: 'vxe-tree-select--panel-body'
@@ -601,15 +827,20 @@ export default {
                                     style: popupWrapperStyle
                                 }, [
                                     h(VxeTreeComponent, {
+                                        ref: 'refTree',
                                         class: 'vxe-tree-select--tree',
                                         props: {
                                             data: options,
+                                            height: popupOpts.height ? '100%' : treeOpts.height,
+                                            minHeight: treeOpts.minHeight,
+                                            maxHeight: popupOpts.height ? '' : treeOpts.maxHeight,
+                                            autoResize: true,
                                             indent: treeOpts.indent,
                                             showRadio: !multiple,
                                             radioConfig: treeRadioOpts,
-                                            checkNodeKey: multiple ? null : value,
+                                            checkNodeKey: multiple ? null : modelValue,
                                             showCheckbox: !!multiple,
-                                            checkNodeKeys: multiple ? value : null,
+                                            checkNodeKeys: multiple ? modelValue : null,
                                             checkboxConfig: treeCheckboxOpts,
                                             titleField: labelField,
                                             valueField: valueField,
@@ -629,7 +860,10 @@ export default {
                                             showLine: treeOpts.showLine,
                                             iconOpen: treeOpts.iconOpen,
                                             iconLoaded: treeOpts.iconLoaded,
-                                            iconClose: treeOpts.iconClose
+                                            iconClose: treeOpts.iconClose,
+                                            filterValue: searchValue,
+                                            filterConfig: filterOpts,
+                                            virtualYConfig: virtualYOpts
                                         },
                                         on: {
                                             'node-click': $xeTreeSelect.nodeClickEvent,

package/es/tree-select/style.css

@@ -8,6 +8,12 @@
 .vxe-tree-select > .vxe-input .vxe-input--inner {
   cursor: pointer;
 }
+.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper {
+  padding-top: 0;
+}
+.vxe-tree-select.is--filterable .vxe-tree-select--panel-header {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
 .vxe-tree-select.is--disabled > .vxe-input .vxe-input--inner {
   cursor: no-drop;
 }
@@ -83,8 +89,30 @@
   width: 100%;
 }
 
+.vxe-tree-select--header-button {
+  display: flex;
+  flex-direction: row;
+}
+
+.vxe-tree-select--header-total {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-left: 0.8em;
+}
+
+.vxe-tree-select--header-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: right;
+}
+
 .vxe-tree-select--panel-wrapper {
   display: inline-flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -93,6 +121,14 @@
   pointer-events: auto;
 }
 
+.vxe-tree-select--panel-search {
+  display: block;
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-tree-select--panel-search .vxe-tree-select-search--input {
+  width: 100%;
+}
+
 .vxe-tree-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
@@ -110,7 +146,6 @@
   position: relative;
   overflow: auto;
   padding: var(--vxe-ui-layout-padding-default);
-  max-height: 21em;
   width: 30em;
   outline: 0;
 }

package/es/tree-select/style.min.css

@@ -1 +1 @@
-.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--panel-wrapper{display:inline-flex;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);max-height:21em;width:30em;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper{padding-top:0}.vxe-tree-select.is--filterable .vxe-tree-select--panel-header{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--header-button{display:flex;flex-direction:row}.vxe-tree-select--header-total{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;padding-left:.8em}.vxe-tree-select--header-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.vxe-tree-select--panel-wrapper{display:inline-flex;flex-direction:column;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-search{display:block;padding:var(--vxe-ui-layout-padding-default)}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-layout-padding-default);width:30em;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}