vxe-pc-ui 4.7.4 → 4.7.6

package/es/tree/src/util.js

@@ -0,0 +1,32 @@
+function countTreeExpand($xeTree, prevNode) {
+    let count = 1;
+    if (!prevNode) {
+        return count;
+    }
+    const props = $xeTree.props;
+    const { transform } = props;
+    const reactData = $xeTree.reactData;
+    const { updateExpandedFlag } = reactData;
+    const internalData = $xeTree.internalData;
+    const { treeExpandedMaps } = internalData;
+    const { computeChildrenField, computeMapChildrenField } = $xeTree.getComputeMaps();
+    const childrenField = computeChildrenField.value;
+    const mapChildrenField = computeMapChildrenField.value;
+    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 {
@@ -203,6 +194,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;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;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;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;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;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;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

@@ -6,6 +6,7 @@ import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { errLog } from '../../ui/src/log';
 import XEUtils from 'xe-utils';
 import VxeInputComponent from '../../input/src/input';
+import VxeButtonComponent from '../../button/src/button';
 import VxeTreeComponent from '../../tree/src/tree';
 function getOptUniqueId() {
     return XEUtils.uniqueId('node_');
@@ -28,6 +29,8 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        filterable: Boolean,
+        filterConfig: Object,
         multiple: Boolean,
         className: [String, Function],
         popupClassName: [String, Function],
@@ -37,20 +40,47 @@ export default defineVxeComponent({
         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
     },
     emits: [
         'update:modelValue',
         'change',
+        'all-change',
         'clear',
         'blur',
         'focus',
@@ -68,12 +98,14 @@ export default defineVxeComponent({
         const { computeSize } = useSize(props);
         const refElem = ref();
         const refInput = ref();
+        const refInpSearch = ref();
         const refTreeWrapper = ref();
         const refOptionPanel = ref();
+        const refTree = ref();
         const reactData = reactive({
             initialized: false,
-            fullOptionList: [],
-            fullNodeMaps: {},
+            searchValue: '',
+            searchLoading: false,
             panelIndex: 0,
             panelStyle: {},
             panelPlacement: null,
@@ -83,7 +115,9 @@ export default defineVxeComponent({
             isActivated: false
         });
         const internalData = {
-            hpTimeout: undefined
+            // hpTimeout: undefined,
+            fullOptionList: [],
+            fullNodeMaps: {}
         };
         const refMaps = {
             refElem
@@ -174,11 +208,22 @@ export default defineVxeComponent({
             const propsOpts = computePropsOpts.value;
             return propsOpts.hasChild || 'hasChild';
         });
+        const computeVirtualYOpts = computed(() => {
+            return Object.assign({}, getConfig().treeSelect.virtualYConfig, props.virtualYConfig);
+        });
+        const computeRemoteOpts = computed(() => {
+            return Object.assign({}, getConfig().treeSelect.remoteConfig, props.remoteConfig);
+        });
+        const computeFilterOpts = computed(() => {
+            const treeOpts = computeTreeOpts.value;
+            return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
+        });
         const computeSelectLabel = computed(() => {
             const { modelValue } = props;
-            const { fullNodeMaps } = reactData;
+            const { fullNodeMaps } = internalData;
             const labelField = computeLabelField.value;
-            return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).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(', ');
@@ -222,12 +267,14 @@ export default defineVxeComponent({
         };
         const cacheDataMap = () => {
             const { options } = props;
+            const treeOpts = computeTreeOpts.value;
             const nodeKeyField = computeNodeKeyField.value;
             const childrenField = computeChildrenField.value;
             const valueField = computeValueField.value;
+            const { transform } = treeOpts;
             const nodeMaps = {};
             const keyMaps = {};
-            XEUtils.eachTree(options, (item, index, items, path, parent, nodes) => {
+            const handleOptNode = (item, index, items, path, parent, nodes) => {
                 let nodeid = getNodeid(item);
                 if (!nodeid) {
                     nodeid = getOptUniqueId();
@@ -241,9 +288,19 @@ export default defineVxeComponent({
                     errLog('vxe.error.repeatKey', [valueField, value]);
                 }
                 nodeMaps[value] = { item, index, items, parent, nodes };
-            }, { children: childrenField });
-            reactData.fullOptionList = options || [];
-            reactData.fullNodeMaps = nodeMaps;
+            };
+            if (options) {
+                if (transform) {
+                    options.forEach((item, index, items) => {
+                        handleOptNode(item, index, items, [], null, []);
+                    });
+                }
+                else {
+                    XEUtils.eachTree(options, handleOptNode, { children: childrenField });
+                }
+            }
+            internalData.fullOptionList = options || [];
+            internalData.fullNodeMaps = nodeMaps;
         };
         const updateZindex = () => {
             if (reactData.panelIndex < getLastZIndex()) {
@@ -271,8 +328,10 @@ export default defineVxeComponent({
             return nextTick().then(handleStyle);
         };
         const showOptionPanel = () => {
-            const { loading } = props;
+            const { loading, remote, filterable } = props;
+            const { fullOptionList } = internalData;
             const isDisabled = computeIsDisabled.value;
+            const remoteOpts = computeRemoteOpts.value;
             if (!loading && !isDisabled) {
                 clearTimeout(internalData.hpTimeout);
                 if (!reactData.initialized) {
@@ -280,8 +339,14 @@ export default defineVxeComponent({
                 }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
+                if (filterable) {
+                    if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+                        handleSearchEvent();
+                    }
+                }
                 setTimeout(() => {
                     reactData.visiblePanel = true;
+                    handleFocusSearch();
                 }, 10);
                 updateZindex();
                 updatePlacement();
@@ -294,7 +359,7 @@ export default defineVxeComponent({
             }, 350);
         };
         const changeEvent = (evnt, selectValue) => {
-            const { fullNodeMaps } = reactData;
+            const { fullNodeMaps } = internalData;
             emitModel(selectValue);
             if (selectValue !== props.modelValue) {
                 const cacheItem = fullNodeMaps[selectValue];
@@ -313,6 +378,49 @@ export default defineVxeComponent({
             clearValueEvent(evnt, null);
             hideOptionPanel();
         };
+        const allCheckedPanelEvent = (params) => {
+            const { $event } = params;
+            const { multiple, autoClose } = props;
+            const $tree = refTree.value;
+            if (multiple) {
+                if ($tree) {
+                    $tree.setAllCheckboxNode(true).then(({ checkNodeKeys }) => {
+                        changeEvent($event, checkNodeKeys);
+                        dispatchEvent('all-change', { value: checkNodeKeys }, $event);
+                        if (autoClose) {
+                            hideOptionPanel();
+                        }
+                    });
+                }
+            }
+        };
+        const clearCheckedPanelEvent = (params) => {
+            const { $event } = params;
+            const { multiple, autoClose } = props;
+            const $tree = refTree.value;
+            if ($tree) {
+                const value = multiple ? [] : null;
+                $tree.clearCheckboxNode().then(() => {
+                    if (autoClose) {
+                        hideOptionPanel();
+                    }
+                });
+                changeEvent($event, value);
+                dispatchEvent('clear', { value }, $event);
+            }
+        };
+        const allExpandPanelEvent = () => {
+            const $tree = refTree.value;
+            if ($tree) {
+                $tree.setAllExpandNode(true);
+            }
+        };
+        const clearExpandPanelEvent = () => {
+            const $tree = refTree.value;
+            if ($tree) {
+                $tree.clearAllExpandNode();
+            }
+        };
         const handleGlobalMousewheelEvent = (evnt) => {
             const { visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
@@ -349,6 +457,16 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleFocusSearch = () => {
+            if (props.filterable) {
+                nextTick(() => {
+                    const inpSearch = refInpSearch.value;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        };
         const focusEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
@@ -370,6 +488,23 @@ export default defineVxeComponent({
             reactData.isActivated = false;
             dispatchEvent('blur', {}, evnt);
         };
+        const modelSearchEvent = (value) => {
+            reactData.searchValue = value;
+        };
+        const handleSearchEvent = () => {
+            const { modelValue, remote, remoteMethod } = props;
+            const { searchValue } = reactData;
+            const remoteOpts = computeRemoteOpts.value;
+            const queryMethod = remoteOpts.queryMethod || remoteMethod;
+            if (remote && queryMethod && remoteOpts.enabled) {
+                reactData.searchLoading = true;
+                Promise.resolve(queryMethod({ $treeSelect: $xeTreeSelect, searchValue, value: modelValue })).then(() => nextTick())
+                    .catch(() => nextTick())
+                    .finally(() => {
+                    reactData.searchLoading = false;
+                });
+            }
+        };
         const togglePanelEvent = (params) => {
             const { $event } = params;
             $event.preventDefault();
@@ -404,8 +539,8 @@ export default defineVxeComponent({
         const treeSelectPrivateMethods = {};
         Object.assign($xeTreeSelect, treeSelectMethods, treeSelectPrivateMethods);
         const renderVN = () => {
-            const { className, modelValue, multiple, options, loading } = props;
-            const { initialized, isActivated, isAniVisible, visiblePanel } = reactData;
+            const { className, modelValue, multiple, options, loading, filterable, showTotalButoon, showCheckedButoon, showClearButton, showExpandButton } = props;
+            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const selectLabel = computeSelectLabel.value;
@@ -427,6 +562,8 @@ export default defineVxeComponent({
             const childrenField = computeChildrenField.value;
             const parentField = computeParentField.value;
             const hasChildField = computeHasChildField.value;
+            const virtualYOpts = computeVirtualYOpts.value;
+            const filterOpts = computeFilterOpts.value;
             if (formReadonly) {
                 return h('div', {
                     ref: refElem,
@@ -437,10 +574,12 @@ export default defineVxeComponent({
                     }, 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,
@@ -457,6 +596,7 @@ export default defineVxeComponent({
                     prefixIcon: props.prefixIcon,
                     suffixIcon: loading ? getIcon().TREE_SELECT_LOADED : (visiblePanel ? getIcon().TREE_SELECT_OPEN : getIcon().TREE_SELECT_CLOSE),
                     modelValue: loading ? '' : selectLabel,
+                    title: selectLabel,
                     onClear: clearEvent,
                     onClick: clickEvent,
                     onFocus: focusEvent,
@@ -486,10 +626,71 @@ export default defineVxeComponent({
                             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',
+                                            modelValue: searchValue,
+                                            clearable: true,
+                                            disabled: false,
+                                            readonly: false,
+                                            placeholder: getI18n('vxe.treeSelect.search'),
+                                            prefixIcon: getIcon().INPUT_SEARCH,
+                                            'onUpdate:modelValue': 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, {
+                                                            content: getI18n('vxe.treeSelect.allChecked'),
+                                                            mode: 'text',
+                                                            onClick: allCheckedPanelEvent
+                                                        })
+                                                        : renderEmptyElement($xeTreeSelect),
+                                                    showClearButton
+                                                        ? h(VxeButtonComponent, {
+                                                            content: getI18n('vxe.treeSelect.clearChecked'),
+                                                            mode: 'text',
+                                                            onClick: clearCheckedPanelEvent
+                                                        })
+                                                        : renderEmptyElement($xeTreeSelect),
+                                                    showExpandButton
+                                                        ? h(VxeButtonComponent, {
+                                                            content: getI18n('vxe.treeSelect.allExpand'),
+                                                            mode: 'text',
+                                                            onClick: allExpandPanelEvent
+                                                        })
+                                                        : renderEmptyElement($xeTreeSelect),
+                                                    showExpandButton
+                                                        ? h(VxeButtonComponent, {
+                                                            content: getI18n('vxe.treeSelect.clearExpand'),
+                                                            mode: 'text',
+                                                            onClick: clearExpandPanelEvent
+                                                        })
+                                                        : renderEmptyElement($xeTreeSelect)
+                                                ])
+                                            ])
+                                        ])
                                     : renderEmptyElement($xeTreeSelect),
                                 h('div', {
                                     class: 'vxe-tree-select--panel-body'
@@ -500,7 +701,12 @@ export default defineVxeComponent({
                                         style: popupWrapperStyle
                                     }, [
                                         h(VxeTreeComponent, {
+                                            ref: refTree,
                                             class: 'vxe-tree-select--tree',
+                                            height: popupOpts.height ? '100%' : treeOpts.height,
+                                            minHeight: treeOpts.minHeight,
+                                            maxHeight: popupOpts.height ? '' : treeOpts.maxHeight,
+                                            autoResize: true,
                                             data: options,
                                             indent: treeOpts.indent,
                                             showRadio: !multiple,
@@ -528,6 +734,9 @@ export default defineVxeComponent({
                                             iconOpen: treeOpts.iconOpen,
                                             iconLoaded: treeOpts.iconLoaded,
                                             iconClose: treeOpts.iconClose,
+                                            filterValue: searchValue,
+                                            filterConfig: filterOpts,
+                                            virtualYConfig: virtualYOpts,
                                             onNodeClick: nodeClickEvent,
                                             onRadioChange: radioChangeEvent,
                                             onCheckboxChange: checkboxChangeEvent,

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;
 }
@@ -82,8 +88,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);
@@ -92,6 +120,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);
 }
@@ -109,7 +145,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;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;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)}