vxe-pc-ui 4.14.38 → 4.14.40

package/dist/all.esm.js

@@ -1,7 +1,7 @@
 import * as core from '@vxe-ui/core';
-import { VxeUI, log, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, usePermission, permission, globalEvents, renderer, getI18n as getI18n$2, GLOBAL_EVENT_KEYS, commands, formats, getComponent, validators, globalResize } from '@vxe-ui/core';
+import { VxeUI, log, setConfig as setConfig$1, setIcon, getConfig as getConfig$3, createEvent, getIcon as getIcon$2, renderEmptyElement, useSize, usePermission, permission, globalEvents, renderer, getI18n as getI18n$2, globalResize, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
 export * from '@vxe-ui/core';
-import { defineComponent, reactive, h, createCommentVNode, createApp, ref, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onDeactivated, onActivated, TransitionGroup } from 'vue';
+import { defineComponent, reactive, h, createCommentVNode, createApp, ref, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onActivated, onDeactivated, TransitionGroup } from 'vue';
 import XEUtils from 'xe-utils';
 import DomZIndex from 'dom-zindex';
 
@@ -80,11 +80,11 @@ function checkDynamic() {
     }
 }
 
-const version$1 = `ui v${"4.14.38"}`;
+const version$1 = `ui v${"4.14.40"}`;
 const warnLog = log.create('warn', version$1);
 const errLog = log.create('error', version$1);
 
-const version = "4.14.38";
+const version = "4.14.40";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -144,7 +144,10 @@ setConfig$1({
     },
     carouselItem: {},
     cascader: {
-        autoClose: true
+        showFullLabel: true,
+        treeConfig: {
+            showIcon: true
+        }
     },
     checkbox: {},
     checkboxButton: {},
@@ -498,7 +501,6 @@ setConfig$1({
         }
     },
     treeSelect: {
-        autoClose: null,
         // separator: '/',
         virtualYConfig: {
             enabled: true,
@@ -736,7 +738,11 @@ setIcon({
     BACKTOP_TOP: iconPrefix + 'top',
     // context-menu
     CONTEXT_MENU_OPTION_LOADING: iconPrefix + 'spinner roll',
-    CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right'
+    CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right',
+    // cascader
+    CASCADER_NODE_OPEN: iconPrefix + 'arrow-right',
+    CASCADER_NODE_CLOSE: iconPrefix + 'arrow-right',
+    CASCADER_NODE_LOADED: iconPrefix + 'spinner roll'
 });
 
 var zhCN = {
@@ -1092,6 +1098,13 @@ var zhCN = {
             yearLabel: '{0} 年',
             monthLabel: '{0} 月'
         },
+        cascader: {
+            clearChecked: '清除',
+            allChecked: '全选',
+            total: '已选 {0} 项',
+            close: '关闭',
+            search: '搜索'
+        },
         numberInput: {
             currencySymbol: '¥'
         },
@@ -1855,7 +1868,7 @@ function scrollToView(elem) {
     }
 }
 function updatePanelPlacement(targetElem, panelElem, options) {
-    const { placement, defaultPlacement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 18 }, options);
+    const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options);
     let panelPlacement = 'bottom';
     let top = '';
     let bottom = '';
@@ -1952,7 +1965,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
         if (XEUtils.isNumber(right)) {
             stys.right = toCssUnit(right);
         }
-        if (XEUtils.isNumber(minWidth)) {
+        if (isMinWidth && XEUtils.isNumber(minWidth)) {
             stys.minWidth = toCssUnit(minWidth);
         }
     }
@@ -3778,7 +3791,7 @@ function createInternalData$d() {
         targetEl: null
     };
 }
-function createReactData$9() {
+function createReactData$a() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3858,7 +3871,7 @@ var VxeBacktopComponent = defineVxeComponent({
         const refElem = ref();
         const { computeSize } = useSize(props);
         const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$9());
+        const reactData = reactive(createReactData$a());
         const refMaps = {
             refElem
         };
@@ -4035,7 +4048,7 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$9());
+            XEUtils.assign(reactData, createReactData$a());
             XEUtils.assign(internalData, createInternalData$d());
         });
         $xeBacktop.renderVN = renderVN;
@@ -6660,53 +6673,431 @@ dynamicApp.use(VxeCarouselItem);
 VxeUI.component(VxeCarouselItemComponent);
 const CarouselItem = VxeCarouselItem;
 
-function enNodeValue(nodeid) {
+function enNodeValue$1(nodeid) {
     return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
 }
-function deNodeValue(nodeid) {
+function deNodeValue$1(nodeid) {
     return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
-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]);
+
+function createReactData$9() {
+    return {
+        scrollYLoad: false,
+        bodyHeight: 0,
+        customHeight: 0,
+        customMaxHeight: 0,
+        parentHeight: 0,
+        topSpaceHeight: 0,
+        items: []
+    };
+}
+function createInternalData$c() {
+    return {
+        resizeObserver: undefined,
+        fullData: [],
+        lastScrollLeft: 0,
+        lastScrollTop: 0,
+        scrollYStore: {
+            startIndex: 0,
+            endIndex: 0,
+            visibleSize: 0,
+            offsetSize: 0,
+            rowHeight: 0
         }
-    }
-    return count;
+    };
 }
-function calcTreeLine($xeTree, node, prevNode) {
-    const internalData = $xeTree.internalData;
-    const { scrollYStore } = internalData;
-    const { rowHeight } = scrollYStore;
-    let expandSize = 1;
-    if (prevNode) {
-        expandSize = countTreeExpand($xeTree, prevNode);
+var VxeListComponent = defineVxeComponent({
+    name: 'VxeList',
+    props: {
+        data: Array,
+        height: [Number, String],
+        maxHeight: [Number, String],
+        loading: Boolean,
+        className: [String, Function],
+        size: {
+            type: String,
+            default: () => getConfig$3().list.size || getConfig$3().size
+        },
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig$3().list.autoResize
+        },
+        syncResize: [Boolean, String, Number],
+        virtualYConfig: Object,
+        scrollY: Object
+    },
+    emits: [
+        'scroll'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const browseObj = XEUtils.browse();
+        const { computeSize } = useSize(props);
+        const reactData = reactive(createReactData$9());
+        const internalData = createInternalData$c();
+        const refElem = ref();
+        const refVirtualWrapper = ref();
+        const refVirtualBody = ref();
+        const refMaps = {
+            refElem
+        };
+        const $xeList = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps
+        };
+        const computeSYOpts = computed(() => {
+            return Object.assign({}, getConfig$3().list.virtualYConfig || getConfig$3().list.scrollY, props.virtualYConfig || props.scrollY);
+        });
+        const computeStyles = computed(() => {
+            const { height, maxHeight } = props;
+            const { customHeight, customMaxHeight } = reactData;
+            const style = {};
+            if (height) {
+                style.height = `${customHeight}px`;
+            }
+            else if (maxHeight) {
+                style.height = 'auto';
+                style.maxHeight = `${customMaxHeight}px`;
+            }
+            return style;
+        });
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $list: $xeList }, params));
+        };
+        const calcTableHeight = (key) => {
+            const { parentHeight } = reactData;
+            const val = props[key];
+            let num = 0;
+            if (val) {
+                if (val === '100%' || val === 'auto') {
+                    num = parentHeight;
+                }
+                else {
+                    if (isScale(val)) {
+                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
+                    }
+                    else {
+                        num = XEUtils.toNumber(val);
+                    }
+                    num = Math.max(40, num);
+                }
+            }
+            return num;
+        };
+        const updateHeight = () => {
+            reactData.customHeight = calcTableHeight('height');
+            reactData.customMaxHeight = calcTableHeight('maxHeight');
+        };
+        const updateYSpace = () => {
+            const { scrollYLoad } = reactData;
+            const { scrollYStore, fullData } = internalData;
+            reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
+            reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+        };
+        const handleData = () => {
+            const { scrollYLoad } = reactData;
+            const { fullData, scrollYStore } = internalData;
+            reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            return nextTick();
+        };
+        const updateYData = () => {
+            handleData();
+            updateYSpace();
+        };
+        const computeScrollLoad = () => {
+            return nextTick().then(() => {
+                const { scrollYLoad } = reactData;
+                const { scrollYStore } = internalData;
+                const virtualBodyElem = refVirtualBody.value;
+                const sYOpts = computeSYOpts.value;
+                let rowHeight = 0;
+                let firstItemElem;
+                if (virtualBodyElem) {
+                    if (sYOpts.sItem) {
+                        firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
+                    }
+                    if (!firstItemElem) {
+                        firstItemElem = virtualBodyElem.children[0];
+                    }
+                }
+                if (firstItemElem) {
+                    rowHeight = firstItemElem.offsetHeight;
+                }
+                rowHeight = Math.max(12, rowHeight);
+                scrollYStore.rowHeight = rowHeight;
+                // 计算 Y 逻辑
+                if (scrollYLoad) {
+                    const scrollBodyElem = refVirtualWrapper.value;
+                    const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
+                    const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browseObj.edge ? 10 : 0);
+                    scrollYStore.offsetSize = offsetYSize;
+                    scrollYStore.visibleSize = visibleYSize;
+                    scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
+                    updateYData();
+                }
+                else {
+                    updateYSpace();
+                }
+            });
+        };
+        /**
+         * 清除滚动条
+         */
+        const clearScroll = () => {
+            const scrollBodyElem = refVirtualWrapper.value;
+            if (scrollBodyElem) {
+                scrollBodyElem.scrollTop = 0;
+            }
+            return nextTick();
+        };
+        /**
+         * 如果有滚动条，则滚动到对应的位置
+         */
+        const scrollTo = (scrollLeft, scrollTop) => {
+            const scrollBodyElem = refVirtualWrapper.value;
+            if (scrollLeft) {
+                if (!XEUtils.isNumber(scrollLeft)) {
+                    scrollTop = scrollLeft.top;
+                    scrollLeft = scrollLeft.left;
+                }
+            }
+            if (XEUtils.isNumber(scrollLeft)) {
+                scrollBodyElem.scrollLeft = scrollLeft;
+            }
+            if (XEUtils.isNumber(scrollTop)) {
+                scrollBodyElem.scrollTop = scrollTop;
+            }
+            if (reactData.scrollYLoad) {
+                return new Promise(resolve => {
+                    setTimeout(() => {
+                        nextTick(() => {
+                            resolve();
+                        });
+                    }, 50);
+                });
+            }
+            return nextTick();
+        };
+        /**
+         * 刷新滚动条
+         */
+        const refreshScroll = () => {
+            const { lastScrollLeft, lastScrollTop } = internalData;
+            return clearScroll().then(() => {
+                if (lastScrollLeft || lastScrollTop) {
+                    internalData.lastScrollLeft = 0;
+                    internalData.lastScrollTop = 0;
+                    return scrollTo(lastScrollLeft, lastScrollTop);
+                }
+            });
+        };
+        /**
+         * 重新计算列表
+         */
+        const recalculate = () => {
+            const el = refElem.value;
+            if (el) {
+                const parentEl = el.parentElement;
+                reactData.parentHeight = parentEl ? parentEl.clientHeight : 0;
+                updateHeight();
+                if (el.clientWidth && el.clientHeight) {
+                    return computeScrollLoad();
+                }
+            }
+            return nextTick();
+        };
+        const loadYData = (evnt) => {
+            const { scrollYStore } = internalData;
+            const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
+            const scrollBodyElem = evnt.target;
+            const scrollTop = scrollBodyElem.scrollTop;
+            const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+            const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+            const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+            if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+                if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+                    scrollYStore.startIndex = offsetStartIndex;
+                    scrollYStore.endIndex = offsetEndIndex;
+                    updateYData();
+                }
+            }
+        };
+        const scrollEvent = (evnt) => {
+            const scrollBodyElem = evnt.target;
+            const scrollTop = scrollBodyElem.scrollTop;
+            const scrollLeft = scrollBodyElem.scrollLeft;
+            const isX = scrollLeft !== internalData.lastScrollLeft;
+            const isY = scrollTop !== internalData.lastScrollTop;
+            internalData.lastScrollTop = scrollTop;
+            internalData.lastScrollLeft = scrollLeft;
+            if (reactData.scrollYLoad) {
+                loadYData(evnt);
+            }
+            dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt);
+        };
+        /**
+         * 加载数据
+         * @param {Array} datas 数据
+         */
+        const loadData = (datas) => {
+            const { scrollYStore } = internalData;
+            const sYOpts = computeSYOpts.value;
+            const fullData = datas || [];
+            Object.assign(scrollYStore, {
+                startIndex: 0,
+                endIndex: 1,
+                visibleSize: 0
+            });
+            internalData.fullData = fullData;
+            // 如果gt为0，则总是启用
+            reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
+            handleData();
+            return computeScrollLoad().then(() => {
+                refreshScroll();
+            });
+        };
+        const listMethods = {
+            dispatchEvent,
+            loadData,
+            /**
+             * 重新加载数据
+             * @param {Array} datas 数据
+             */
+            reloadData(datas) {
+                clearScroll();
+                return loadData(datas);
+            },
+            recalculate,
+            scrollTo,
+            refreshScroll,
+            clearScroll
+        };
+        Object.assign($xeList, listMethods);
+        const renderVN = () => {
+            const { className, loading } = props;
+            const { bodyHeight, topSpaceHeight, items } = reactData;
+            const defaultSlot = slots.default;
+            const vSize = computeSize.value;
+            const styles = computeStyles.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+                        [`size--${vSize}`]: vSize,
+                        'is--loading': loading
+                    }]
+            }, [
+                h('div', {
+                    ref: refVirtualWrapper,
+                    class: 'vxe-list--virtual-wrapper',
+                    style: styles,
+                    onScroll: scrollEvent
+                }, [
+                    h('div', {
+                        class: 'vxe-list--y-space',
+                        style: {
+                            height: bodyHeight ? `${bodyHeight}px` : ''
+                        }
+                    }),
+                    h('div', {
+                        ref: refVirtualBody,
+                        class: 'vxe-list--body',
+                        style: {
+                            marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
+                        }
+                    }, defaultSlot ? defaultSlot({ items, $list: $xeList }) : [])
+                ]),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoadingComponent, {
+                    class: 'vxe-list--loading',
+                    modelValue: loading
+                })
+            ]);
+        };
+        const dataFlag = ref(0);
+        watch(() => props.data ? props.data.length : -1, () => {
+            dataFlag.value++;
+        });
+        watch(() => props.data, () => {
+            dataFlag.value++;
+        });
+        watch(dataFlag, () => {
+            loadData(props.data || []);
+        });
+        watch(() => props.height, () => {
+            recalculate();
+        });
+        watch(() => props.maxHeight, () => {
+            recalculate();
+        });
+        watch(() => props.syncResize, (value) => {
+            if (value) {
+                recalculate();
+                nextTick(() => setTimeout(() => recalculate()));
+            }
+        });
+        onActivated(() => {
+            recalculate().then(() => refreshScroll());
+        });
+        nextTick(() => {
+            loadData(props.data || []);
+        });
+        onMounted(() => {
+            recalculate();
+            if (props.autoResize) {
+                const el = refElem.value;
+                const resizeObserver = globalResize.create(() => recalculate());
+                resizeObserver.observe(el);
+                if (el) {
+                    resizeObserver.observe(el.parentElement);
+                }
+                internalData.resizeObserver = resizeObserver;
+            }
+            globalEvents.on($xeList, 'resize', recalculate);
+        });
+        onBeforeUnmount(() => {
+            const { resizeObserver } = internalData;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            globalEvents.off($xeList, 'resize');
+            XEUtils.assign(reactData, createReactData$9());
+            XEUtils.assign(internalData, createInternalData$c());
+        });
+        $xeList.renderVN = renderVN;
+        return $xeList;
+    },
+    render() {
+        return this.renderVN();
     }
-    return (rowHeight || 28) * expandSize - (prevNode ? 1 : 12);
-}
+});
 
 function handleNumber(val) {
     return XEUtils.isString(val) ? val.replace(/[^0-9e.-]/g, '') : val;
 }
-function toFloatValueFixed(inputValue, digitsValue) {
-    if (/^-/.test('' + inputValue)) {
-        return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue);
+function toFloatValueFixed(inputValue, type, digitsValue, roundingMode) {
+    if (type !== 'integer' && (!roundingMode || roundingMode === 'default')) {
+        // 默认截取忽略
+        if (/^-/.test('' + inputValue)) {
+            return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue);
+        }
+        return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue);
+    }
+    else {
+        if (roundingMode === 'ceil') {
+            return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue);
+        }
+        if (roundingMode === 'floor') {
+            return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue);
+        }
+        return XEUtils.toFixed(XEUtils.round(inputValue, digitsValue), digitsValue);
     }
-    return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue);
 }
 
 var VxeInputComponent = defineVxeComponent({
@@ -7442,7 +7833,7 @@ var VxeInputComponent = defineVxeComponent({
             const { type, exponential } = props;
             const inpMaxLength = computeInpMaxLength.value;
             const digitsValue = computeDigitsValue.value;
-            const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val));
+            const restVal = (type === 'float' ? toFloatValueFixed(val, type, digitsValue, '') : XEUtils.toValueString(val));
             if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
                 return val;
             }
@@ -7628,7 +8019,7 @@ var VxeInputComponent = defineVxeComponent({
             }
             else if (type === 'float') {
                 if (inputValue) {
-                    const validValue = toFloatValueFixed(inputValue, digitsValue);
+                    const validValue = toFloatValueFixed(inputValue, type, digitsValue, '');
                     if (inputValue !== validValue) {
                         handleChange(validValue, { type: 'init' });
                     }
@@ -9383,14 +9774,48 @@ var VxeInputComponent = defineVxeComponent({
     }
 });
 
-function getOptUniqueId$2() {
+/**
+ * 生成节点的唯一主键
+ */
+function getNodeUniqueId$1() {
     return XEUtils.uniqueId('node_');
 }
-function createInternalData$c() {
+function createReactData$8() {
+    return {
+        initialized: false,
+        searchValue: '',
+        searchLoading: false,
+        currentCunkList: [],
+        currentItems: [],
+        currentNode: null,
+        panelIndex: 0,
+        panelStyle: {},
+        panelPlacement: null,
+        triggerFocusPanel: false,
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false,
+        selectRadioKey: null,
+        treeList: [],
+        updateExpandedFlag: 1,
+        updateCheckboxFlag: 1,
+        fullOptFlag: 1,
+        lazyOptFlag: 1
+    };
+}
+function createInternalData$b() {
     return {
         // hpTimeout: undefined,
-        fullOptionList: [],
-        fullNodeMaps: {}
+        afterTreeList: [],
+        treeFullData: [],
+        afterVisibleList: [],
+        nodeMaps: {},
+        fullNodeMaps: {},
+        lazyNodeMaps: {},
+        indeterminateRowMaps: {},
+        selectCheckboxMaps: {},
+        treeExpandedMaps: {},
+        treeExpandLazyLoadedMaps: {}
     };
 }
 var VxeCascaderComponent = defineVxeComponent({
@@ -9413,25 +9838,41 @@ var VxeCascaderComponent = defineVxeComponent({
         },
         filterable: Boolean,
         filterConfig: Object,
+        showFullLabel: {
+            type: Boolean,
+            default: getConfig$3().cascader.showFullLabel
+        },
+        separator: {
+            type: String,
+            default: getConfig$3().cascader.separator
+        },
         multiple: Boolean,
         className: [String, Function],
         prefixIcon: String,
-        placement: String,
-        transform: Boolean,
         lazyOptions: Array,
         options: Array,
         optionProps: Object,
-        zIndex: Number,
         size: {
             type: String,
             default: () => getConfig$3().cascader.size || getConfig$3().size
         },
+        treeConfig: Object,
+        radioConfig: Object,
+        checkboxConfig: Object,
         remote: Boolean,
         remoteConfig: Function,
         popupConfig: Object,
-        autoClose: {
+        checkedClosable: {
+            type: Boolean,
+            default: () => getConfig$3().cascader.checkedClosable
+        },
+        clearClosable: {
+            type: Boolean,
+            default: () => getConfig$3().cascader.clearClosable
+        },
+        showCloseButton: {
             type: Boolean,
-            default: () => getConfig$3().cascader.autoClose
+            default: () => getConfig$3().cascader.showCloseButton
         },
         showTotalButton: {
             type: Boolean,
@@ -9444,16 +9885,7 @@ var VxeCascaderComponent = defineVxeComponent({
         showClearButton: {
             type: Boolean,
             default: () => getConfig$3().cascader.showClearButton
-        },
-        transfer: {
-            type: Boolean,
-            default: null
-        },
-        /**
-         * 已废弃，被 remote-config.queryMethod 替换
-         * @deprecated
-         */
-        remoteMethod: Function
+        }
     },
     emits: [
         'update:modelValue',
@@ -9463,7 +9895,14 @@ var VxeCascaderComponent = defineVxeComponent({
         'blur',
         'focus',
         'click',
-        'node-click'
+        'node-click',
+        'node-expand',
+        'current-change',
+        'radio-change',
+        'checkbox-change',
+        'load-success',
+        'load-error',
+        'visible-change'
     ],
     setup(props, context) {
         const { emit, slots } = context;
@@ -9477,22 +9916,10 @@ var VxeCascaderComponent = defineVxeComponent({
         const refElem = ref();
         const refInput = ref();
         const refInpSearch = ref();
-        const refTreeWrapper = ref();
+        const refChunkWrapper = ref();
         const refOptionPanel = ref();
-        const refTree = ref();
-        const reactData = reactive({
-            initialized: false,
-            searchValue: '',
-            searchLoading: false,
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            triggerFocusPanel: false,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        });
-        const internalData = createInternalData$c();
+        const reactData = reactive(createReactData$8());
+        const internalData = createInternalData$b();
         const refMaps = {
             refElem
         };
@@ -9517,17 +9944,24 @@ var VxeCascaderComponent = defineVxeComponent({
             return disabled;
         });
         const computeBtnTransfer = computed(() => {
-            const { transfer } = props;
-            if (transfer === null) {
-                const globalTransfer = getConfig$3().select.transfer;
-                if (XEUtils.isBoolean(globalTransfer)) {
-                    return globalTransfer;
-                }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-                    return true;
-                }
+            const popupOpts = computePopupOpts.value;
+            const { transfer } = popupOpts;
+            if (XEUtils.isBoolean(transfer)) {
+                return transfer;
             }
-            return transfer;
+            if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                return true;
+            }
+            return false;
+        });
+        const computeTreeOpts = computed(() => {
+            return Object.assign({}, getConfig$3().cascader.treeConfig, props.treeConfig);
+        });
+        const computeRadioOpts = computed(() => {
+            return Object.assign({}, getConfig$3().cascader.radioConfig, props.radioConfig);
+        });
+        const computeCheckboxOpts = computed(() => {
+            return Object.assign({}, getConfig$3().cascader.checkboxConfig, props.checkboxConfig);
         });
         const computePopupOpts = computed(() => {
             return Object.assign({}, getConfig$3().cascader.popupConfig, props.popupConfig);
@@ -9535,10 +9969,6 @@ var VxeCascaderComponent = defineVxeComponent({
         const computePropsOpts = computed(() => {
             return props.optionProps || {};
         });
-        const computeNodeKeyField = computed(() => {
-            const valueField = computeValueField.value;
-            return valueField;
-        });
         const computeLabelField = computed(() => {
             const propsOpts = computePropsOpts.value;
             return propsOpts.label || 'label';
@@ -9547,46 +9977,72 @@ var VxeCascaderComponent = defineVxeComponent({
             const propsOpts = computePropsOpts.value;
             return propsOpts.value || 'value';
         });
+        const computeKeyField = computed(() => {
+            const treeOpts = computeTreeOpts.value;
+            return treeOpts.keyField || 'id';
+        });
+        const computeParentField = computed(() => {
+            const treeOpts = computeTreeOpts.value;
+            return treeOpts.parentField || 'parentId';
+        });
         const computeChildrenField = computed(() => {
-            const propsOpts = computePropsOpts.value;
-            return propsOpts.children || 'children';
+            const treeOpts = computeTreeOpts.value;
+            return treeOpts.childrenField || 'children';
+        });
+        const computeMapChildrenField = computed(() => {
+            const treeOpts = computeTreeOpts.value;
+            return treeOpts.mapChildrenField || 'mapChildren';
+        });
+        const computeHasChildField = computed(() => {
+            const treeOpts = computeTreeOpts.value;
+            return treeOpts.hasChildField || 'hasChild';
         });
         const computeRemoteOpts = computed(() => {
             return Object.assign({}, getConfig$3().cascader.remoteConfig, props.remoteConfig);
         });
+        const computeSelectVals = computed(() => {
+            const { modelValue } = props;
+            return XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+        });
         const computeSelectLabel = computed(() => {
-            const { modelValue, lazyOptions } = props;
-            const { fullNodeMaps } = internalData;
-            const valueField = computeValueField.value;
+            const { showFullLabel } = props;
+            const { fullOptFlag, lazyOptFlag } = reactData;
+            const { fullNodeMaps, lazyNodeMaps } = internalData;
             const labelField = computeLabelField.value;
-            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+            const selectVals = computeSelectVals.value;
             return selectVals.map(val => {
                 const cacheItem = fullNodeMaps[val];
-                if (cacheItem) {
-                    return cacheItem.item[labelField];
+                if (fullOptFlag && cacheItem) {
+                    return showFullLabel ? cacheItem.fullLabel : cacheItem.item[labelField];
                 }
-                if (lazyOptions) {
-                    const lazyItem = lazyOptions.find(item => item[valueField] === val);
-                    if (lazyItem) {
-                        return lazyItem[labelField];
+                if (lazyOptFlag) {
+                    const lazyCacheItem = lazyNodeMaps[val];
+                    if (lazyCacheItem) {
+                        return showFullLabel ? lazyCacheItem.fullLabel : lazyCacheItem.item[labelField];
                     }
                 }
                 return val;
             }).join(', ');
         });
         const computePopupWrapperStyle = computed(() => {
+            const { currentCunkList, panelStyle } = reactData;
             const popupOpts = computePopupOpts.value;
-            const { height, width } = popupOpts;
-            const stys = {};
-            if (width) {
-                stys.width = toCssUnit(width);
-            }
+            const { height, nodeWidth, nodeHeight } = popupOpts;
+            const stys = Object.assign(Object.assign({}, panelStyle), { '--vxe-ui-cascader-chunk-size': currentCunkList.length });
             if (height) {
-                stys.height = toCssUnit(height);
-                stys.maxHeight = toCssUnit(height);
+                stys['--vxe-ui-cascader-chunk-height'] = toCssUnit(height);
+            }
+            if (nodeWidth) {
+                stys['--vxe-ui-cascader-node-width'] = toCssUnit(nodeWidth);
+            }
+            if (nodeHeight) {
+                stys['--vxe-ui-cascader-node-height'] = toCssUnit(nodeHeight);
             }
             return stys;
         });
+        const computeFilterOpts = computed(() => {
+            return Object.assign({}, getConfig$3().cascader.filterConfig, props.filterConfig);
+        });
         const computeMaps = {};
         const $xeCascader = {
             xID,
@@ -9606,48 +10062,318 @@ var VxeCascaderComponent = defineVxeComponent({
         const cascaderMethods = {
             dispatchEvent
         };
-        const getNodeid = (option) => {
-            const nodeKeyField = computeNodeKeyField.value;
-            const nodeid = option[nodeKeyField];
-            return nodeid ? encodeURIComponent(nodeid) : '';
+        const getNodeId = (node) => {
+            if (!node) {
+                return '';
+            }
+            const valueField = computeValueField.value;
+            const nodeKey = node[valueField];
+            return enNodeValue$1(nodeKey);
         };
-        const cacheDataMap = () => {
-            const { transform, options } = props;
-            const nodeKeyField = computeNodeKeyField.value;
+        const isCheckedByCheckboxNodeId = (nodeid) => {
+            const { updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps } = internalData;
+            return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+        };
+        const handleCheckedCheckboxNode = (nodeList, checked) => {
+            const { selectCheckboxMaps } = internalData;
+            const mapChildrenField = computeMapChildrenField.value;
             const childrenField = computeChildrenField.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { checkStrictly } = checkboxOpts;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const handleSelect = (node) => {
+                const nodeid = getNodeId(node);
+                {
+                    if (!selectCheckboxMaps[nodeid]) {
+                        selectCheckboxMaps[nodeid] = node;
+                    }
+                }
+            };
+            if (checkStrictly) {
+                nodeList.forEach(handleSelect);
+            }
+            else {
+                XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
+            }
+            reactData.updateCheckboxFlag++;
+            updateCheckboxStatus();
+        };
+        const createNode = (records) => {
             const valueField = computeValueField.value;
-            const nodeMaps = {};
+            return Promise.resolve(records.map(obj => {
+                const item = Object.assign({}, obj);
+                let nodeid = getNodeId(item);
+                if (!nodeid) {
+                    nodeid = getNodeUniqueId$1();
+                    XEUtils.set(item, valueField, nodeid);
+                }
+                return item;
+            }));
+        };
+        const cacheNodeMap = () => {
+            const { separator } = props;
+            const { treeFullData } = internalData;
+            const valueField = computeValueField.value;
+            const labelField = computeLabelField.value;
+            const childrenField = computeChildrenField.value;
             const keyMaps = {};
-            const handleOptNode = (item, index, items, path, parent, nodes) => {
-                let nodeid = getNodeid(item);
+            const fullMaps = {};
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
+                let nodeid = getNodeId(item);
                 if (!nodeid) {
-                    nodeid = getOptUniqueId$2();
+                    nodeid = getNodeUniqueId$1();
+                    item[valueField] = nodeid;
                 }
-                if (keyMaps[nodeid]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid]);
+                const nodeVal = item[valueField];
+                const itemRest = {
+                    item,
+                    index,
+                    $index: -1,
+                    _index: -1,
+                    items,
+                    parent: parenItem,
+                    nodes,
+                    level: nodes.length - 1,
+                    treeIndex: index,
+                    lineCount: 0,
+                    treeLoaded: false,
+                    fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
+                };
+                keyMaps[nodeid] = itemRest;
+                fullMaps[nodeVal] = itemRest;
+            }, { children: childrenField });
+            internalData.nodeMaps = keyMaps;
+            internalData.fullNodeMaps = fullMaps;
+            reactData.fullOptFlag++;
+        };
+        const updateAfterDataIndex = () => {
+            const { separator } = props;
+            const { afterTreeList, nodeMaps } = internalData;
+            const labelField = computeLabelField.value;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            let vtIndex = 0;
+            XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
+                const nodeid = getNodeId(item);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items = items;
+                    nodeItem.treeIndex = index;
+                    nodeItem._index = vtIndex;
                 }
-                keyMaps[nodeid] = true;
-                const value = item[valueField];
-                if (nodeMaps[value]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        $index: -1,
+                        _index: vtIndex,
+                        items,
+                        parent: parenItem,
+                        nodes,
+                        level: nodes.length - 1,
+                        treeIndex: index,
+                        lineCount: 0,
+                        treeLoaded: false,
+                        fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
+                    };
+                    nodeMaps[nodeid] = rest;
+                }
+                vtIndex++;
+            }, { children: transform ? mapChildrenField : childrenField });
+        };
+        const updateAfterFullData = () => {
+            const { searchValue } = reactData;
+            const { treeFullData, lastFilterValue } = internalData;
+            const labelField = computeLabelField.value;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const filterOpts = computeFilterOpts.value;
+            const { beforeFilterMethod, filterMethod, afterFilterMethod } = filterOpts;
+            let fullList = treeFullData;
+            let treeList = fullList;
+            let filterStr = '';
+            if (searchValue) {
+                filterStr = `${searchValue}`;
+                const handleSearch = filterMethod
+                    ? (item) => {
+                        return filterMethod({
+                            $cascader: $xeCascader,
+                            node: item,
+                            filterValue: filterStr
+                        });
+                    }
+                    : (item) => {
+                        return String(item[labelField]).toLowerCase().indexOf(filterStr.toLowerCase()) > -1;
+                    };
+                const bafParams = { $cascader: $xeCascader, filterValue: filterStr };
+                if (beforeFilterMethod) {
+                    beforeFilterMethod(bafParams);
                 }
-                nodeMaps[value] = { item, index, items, parent, nodes };
-            };
-            if (options) {
                 if (transform) {
-                    options.forEach((item, index, items) => {
-                        handleOptNode(item, index, items, [], null, []);
+                    treeList = XEUtils.searchTree(treeFullData, handleSearch, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
                     });
+                    fullList = treeList;
                 }
                 else {
-                    XEUtils.eachTree(options, handleOptNode, { children: childrenField });
+                    fullList = treeFullData.filter(handleSearch);
                 }
+                internalData.lastFilterValue = filterStr;
+                nextTick(() => {
+                    if (afterFilterMethod) {
+                        afterFilterMethod(bafParams);
+                    }
+                });
             }
-            internalData.fullOptionList = options || [];
-            internalData.fullNodeMaps = nodeMaps;
+            else {
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, () => true, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                    fullList = treeList;
+                    if (lastFilterValue) {
+                        const bafParams = { $cascader: $xeCascader, filterValue: filterStr };
+                        if (beforeFilterMethod) {
+                            beforeFilterMethod(bafParams);
+                        }
+                        // 取消筛选时自动收起
+                        nextTick(() => {
+                            if (afterFilterMethod) {
+                                afterFilterMethod(bafParams);
+                            }
+                        });
+                    }
+                }
+                internalData.lastFilterValue = '';
+            }
+            internalData.afterVisibleList = fullList;
+            internalData.afterTreeList = treeList;
+            updateAfterDataIndex();
+        };
+        /**
+         * 如果为虚拟树、则将树结构拍平
+         */
+        const handleTreeToList = () => {
+            const { afterTreeList, treeExpandedMaps } = internalData;
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const expandMaps = {};
+            if (transform) {
+                const fullData = [];
+                XEUtils.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
+                    const nodeid = getNodeId(item);
+                    const parentNodeid = getNodeId(parentRow);
+                    if (!parentRow || (expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid])) {
+                        expandMaps[nodeid] = 1;
+                        fullData.push(item);
+                    }
+                }, { children: mapChildrenField });
+                internalData.afterVisibleList = fullData;
+                return fullData;
+            }
+            return internalData.afterVisibleList;
+        };
+        const handleData = (force) => {
+            const { nodeMaps } = internalData;
+            let fullList = internalData.afterVisibleList;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                updateAfterFullData();
+                // 如果为虚拟树，将树结构拍平
+                fullList = handleTreeToList();
+            }
+            const treeList = fullList.slice(0);
+            treeList.forEach((item, $index) => {
+                const nodeid = getNodeId(item);
+                const itemRest = nodeMaps[nodeid];
+                if (itemRest) {
+                    itemRest.$index = $index;
+                }
+            });
+            reactData.treeList = treeList;
+        };
+        const triggerSearchEvent = XEUtils.debounce(() => handleData(true), 350, { trailing: true });
+        const loadData = (list) => {
+            const treeOpts = computeTreeOpts.value;
+            const keyField = computeKeyField.value;
+            const parentField = computeParentField.value;
+            const childrenField = computeChildrenField.value;
+            const { rootParentValue, rootValues } = treeOpts;
+            const { transform } = treeOpts;
+            const fullData = transform
+                ? XEUtils.toArrayTree(list, {
+                    key: keyField,
+                    parentKey: parentField,
+                    mapChildren: childrenField,
+                    rootParentValue,
+                    rootValues
+                })
+                : list ? list.slice(0) : [];
+            internalData.treeFullData = fullData;
+            cacheNodeMap();
+            handleData(true);
+            handleCurrentItems();
+            updateCurrentChunk();
+            return nextTick();
+        };
+        const updateCurrentChunk = () => {
+            const { currentItems } = reactData;
+            const { treeFullData } = internalData;
+            const childrenField = computeChildrenField.value;
+            const currentCunkList = [treeFullData];
+            if (currentItems.length) {
+                let chunkIndex = 0;
+                let stNodeid = currentItems[chunkIndex];
+                let optList = treeFullData;
+                while (stNodeid && optList && optList.length) {
+                    stNodeid = currentItems[chunkIndex++];
+                    const currOption = optList.find(item => stNodeid === getNodeId(item));
+                    optList = currOption ? currOption[childrenField] : [];
+                    if (!optList || !optList.length) {
+                        break;
+                    }
+                    currentCunkList.push(optList);
+                }
+            }
+            reactData.currentCunkList = currentCunkList;
+        };
+        const handleCurrentItems = () => {
+            const { treeFullData } = internalData;
+            const selectVals = computeSelectVals.value;
+            const childrenField = computeChildrenField.value;
+            const stItems = [];
+            const expandedMaps = {};
+            if (selectVals.length) {
+                const lastVal = XEUtils.last(selectVals);
+                const stRest = XEUtils.findTree(treeFullData, (item) => lastVal === getNodeId(item), { children: childrenField });
+                if (stRest) {
+                    const { nodes } = stRest;
+                    nodes.forEach(item => {
+                        const nodeid = getNodeId(item);
+                        expandedMaps[nodeid] = true;
+                        stItems.push(nodeid);
+                    });
+                }
+            }
+            internalData.treeExpandedMaps = expandedMaps;
+            reactData.currentItems = stItems;
         };
         const updateZindex = () => {
-            const { zIndex } = props;
+            const popupOpts = computePopupOpts.value;
+            const { zIndex } = popupOpts;
             if (zIndex) {
                 reactData.panelIndex = zIndex;
             }
@@ -9656,7 +10382,6 @@ var VxeCascaderComponent = defineVxeComponent({
             }
         };
         const updatePlacement = () => {
-            const { placement } = props;
             const { panelIndex } = reactData;
             const targetElem = refElem.value;
             const panelElem = refOptionPanel.value;
@@ -9664,9 +10389,10 @@ var VxeCascaderComponent = defineVxeComponent({
             const popupOpts = computePopupOpts.value;
             const handleStyle = () => {
                 const ppObj = updatePanelPlacement(targetElem, panelElem, {
-                    placement: popupOpts.placement || placement,
+                    placement: popupOpts.placement,
                     defaultPlacement: popupOpts.defaultPlacement,
-                    teleportTo: btnTransfer
+                    teleportTo: btnTransfer,
+                    isMinWidth: false
                 });
                 const panelStyle = Object.assign(ppObj.style, {
                     zIndex: panelIndex
@@ -9677,9 +10403,9 @@ var VxeCascaderComponent = defineVxeComponent({
             handleStyle();
             return nextTick().then(handleStyle);
         };
-        const showOptionPanel = () => {
+        const showOptionPanel = (evnt) => {
             const { loading, remote, filterable } = props;
-            const { fullOptionList } = internalData;
+            const { treeFullData } = internalData;
             const isDisabled = computeIsDisabled.value;
             const remoteOpts = computeRemoteOpts.value;
             if (!loading && !isDisabled) {
@@ -9690,7 +10416,7 @@ var VxeCascaderComponent = defineVxeComponent({
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
                 if (filterable) {
-                    if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+                    if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !treeFullData.length) {
                         handleSearchEvent();
                     }
                 }
@@ -9700,16 +10426,55 @@ var VxeCascaderComponent = defineVxeComponent({
                 }, 10);
                 updateZindex();
                 updatePlacement();
+                dispatchEvent('visible-change', { visible: true }, evnt || null);
             }
         };
-        const hideOptionPanel = () => {
+        const hideOptionPanel = (evnt) => {
             reactData.visiblePanel = false;
             internalData.hpTimeout = setTimeout(() => {
                 reactData.isAniVisible = false;
             }, 350);
+            dispatchEvent('visible-change', { visible: false }, evnt || null);
+        };
+        const setCurrentNode = (node) => {
+            reactData.currentNode = node;
+            return nextTick();
+        };
+        const setAllCheckboxNode = (checked) => {
+            const selectMaps = {};
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const checkKeys = [];
+            const checkNodes = [];
+            {
+                XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                    const nodeid = getNodeId(node);
+                    checkKeys.push(nodeid);
+                    checkNodes.push(node);
+                    selectMaps[nodeid] = true;
+                }, { children: transform ? mapChildrenField : childrenField });
+            }
+            internalData.indeterminateRowMaps = {};
+            internalData.selectCheckboxMaps = selectMaps;
+            reactData.updateCheckboxFlag++;
+            updateCheckboxStatus();
+            return nextTick().then(() => {
+                return { checkNodeKeys: checkKeys, checkNodes };
+            });
+        };
+        const clearCheckboxNode = () => {
+            internalData.indeterminateRowMaps = {};
+            internalData.selectCheckboxMaps = {};
+            reactData.updateCheckboxFlag++;
+            updateCheckboxStatus();
+            return nextTick().then(() => {
+                return { checkNodeKeys: [], checkNodes: [] };
+            });
         };
         const changeEvent = (evnt, selectValue, node) => {
-            const value = XEUtils.isArray(selectValue) ? selectValue.map(deNodeValue) : deNodeValue(selectValue);
+            const value = XEUtils.isArray(selectValue) ? selectValue.map(deNodeValue$1) : deNodeValue$1(selectValue);
             emitModel(value);
             if (value !== props.modelValue) {
                 dispatchEvent('change', { value, node, option: node }, evnt);
@@ -9725,103 +10490,438 @@ var VxeCascaderComponent = defineVxeComponent({
         };
         const clearEvent = (params, evnt) => {
             clearValueEvent(evnt, null);
-            hideOptionPanel();
+            hideOptionPanel(evnt);
         };
         const allCheckedPanelEvent = (params) => {
             const { $event } = params;
-            const { multiple, autoClose } = props;
-            const $tree = refTree.value;
+            const { multiple, checkedClosable } = props;
             if (multiple) {
-                if ($tree) {
-                    $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
-                        changeEvent($event, checkNodeKeys, checkNodes[0]);
-                        dispatchEvent('all-change', { value: checkNodeKeys }, $event);
-                        if (autoClose) {
-                            hideOptionPanel();
-                        }
-                    });
-                }
+                setAllCheckboxNode().then(({ checkNodeKeys, checkNodes }) => {
+                    changeEvent($event, checkNodeKeys, checkNodes[0]);
+                    dispatchEvent('all-change', { value: checkNodeKeys }, $event);
+                    if (checkedClosable) {
+                        hideOptionPanel($event);
+                    }
+                });
             }
         };
         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();
+            const { multiple, checkedClosable } = props;
+            const value = multiple ? [] : null;
+            clearCheckboxNode().then(() => {
+                if (checkedClosable) {
+                    hideOptionPanel($event);
+                }
+            });
+            changeEvent($event, value, null);
+            dispatchEvent('clear', { value }, $event);
+        };
+        const closePanelEvent = (params) => {
+            const { $event } = params;
+            hideOptionPanel($event);
+        };
+        const handleGlobalMousewheelEvent = (evnt) => {
+            const { visiblePanel } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
+                if (visiblePanel) {
+                    const panelElem = refOptionPanel.value;
+                    if (getEventTargetNode(evnt, panelElem).flag) {
+                        updatePlacement();
+                    }
+                    else {
+                        hideOptionPanel(evnt);
+                    }
+                }
+            }
+        };
+        const handleGlobalMousedownEvent = (evnt) => {
+            const { visiblePanel } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
+                const el = refElem.value;
+                const panelElem = refOptionPanel.value;
+                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+                if (visiblePanel && !reactData.isActivated) {
+                    hideOptionPanel(evnt);
+                }
+            }
+        };
+        const handleGlobalBlurEvent = (evnt) => {
+            const { visiblePanel, isActivated } = reactData;
+            if (visiblePanel) {
+                hideOptionPanel(evnt);
+            }
+            if (isActivated) {
+                reactData.isActivated = false;
+            }
+            if (visiblePanel || isActivated) {
+                const $input = refInput.value;
+                if ($input) {
+                    $input.blur();
+                }
+            }
+        };
+        const handleGlobalResizeEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
+        const handleFocusSearch = () => {
+            if (props.filterable) {
+                nextTick(() => {
+                    const inpSearch = refInpSearch.value;
+                    if (inpSearch) {
+                        inpSearch.focus();
+                    }
+                });
+            }
+        };
+        const changeCurrentEvent = (evnt, node) => {
+            evnt.preventDefault();
+            const isChecked = true;
+            reactData.currentNode = node;
+            dispatchEvent('current-change', { node, checked: isChecked }, evnt);
+        };
+        const changeRadioEvent = (evnt, node) => {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { nodeMaps } = internalData;
+            const radioOpts = computeRadioOpts.value;
+            const childrenField = computeChildrenField.value;
+            const { checkMode, checkMethod } = radioOpts;
+            const nodeid = getNodeId(node);
+            const childList = node[childrenField];
+            const isExistChild = childList && childList.length > 0;
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nLevel = nodeItem.level;
+            const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+            if (isDisabled) {
+                return;
+            }
+            const value = nodeid;
+            reactData.selectRadioKey = value;
+            changeEvent(evnt, value, node);
+            hideOptionPanel(evnt);
+        };
+        const handleAsyncTreeExpandChilds = (node) => {
+            const checkboxOpts = computeCheckboxOpts.value;
+            const treeOpts = computeTreeOpts.value;
+            const { loadMethod } = treeOpts;
+            const { checkStrictly } = checkboxOpts;
+            return new Promise(resolve => {
+                if (loadMethod) {
+                    const { nodeMaps } = internalData;
+                    const nodeid = getNodeId(node);
+                    const nodeItem = nodeMaps[nodeid];
+                    internalData.treeExpandLazyLoadedMaps[nodeid] = true;
+                    Promise.resolve(loadMethod({ $cascader: $xeCascader, node })).then((childRecords) => {
+                        const { treeExpandLazyLoadedMaps } = internalData;
+                        nodeItem.treeLoaded = true;
+                        if (treeExpandLazyLoadedMaps[nodeid]) {
+                            treeExpandLazyLoadedMaps[nodeid] = false;
+                        }
+                        if (!XEUtils.isArray(childRecords)) {
+                            childRecords = [];
+                        }
+                        if (childRecords) {
+                            return $xeCascader.loadChildrenNode(node, childRecords).then(childRows => {
+                                const { treeExpandedMaps } = internalData;
+                                if (childRows.length && !treeExpandedMaps[nodeid]) {
+                                    treeExpandedMaps[nodeid] = true;
+                                }
+                                reactData.updateExpandedFlag++;
+                                // 如果当前节点已选中，则展开后子节点也被选中
+                                if (!checkStrictly && $xeCascader.isCheckedByCheckboxNodeId(nodeid)) {
+                                    handleCheckedCheckboxNode(childRows);
+                                }
+                                dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                                return nextTick();
+                            });
+                        }
+                        else {
+                            dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                        }
+                    }).catch((e) => {
+                        const { treeExpandLazyLoadedMaps } = internalData;
+                        nodeItem.treeLoaded = false;
+                        if (treeExpandLazyLoadedMaps[nodeid]) {
+                            treeExpandLazyLoadedMaps[nodeid] = false;
+                        }
+                        dispatchEvent('load-error', { node, data: e }, new Event('load-error'));
+                    }).finally(() => {
+                        handleTreeToList();
+                        handleData();
+                    });
+                }
+                else {
+                    resolve();
+                }
+            });
+        };
+        /**
+         * 展开与收起树节点
+         * @param nodeList
+         * @param expanded
+         * @returns
+         */
+        const handleBaseTreeExpand = (nodeList, expanded) => {
+            const { treeExpandLazyLoadedMaps, treeExpandedMaps } = internalData;
+            const { nodeMaps } = internalData;
+            const childrenField = computeChildrenField.value;
+            const hasChildField = computeHasChildField.value;
+            const treeOpts = computeTreeOpts.value;
+            const { lazy, toggleMethod } = treeOpts;
+            const result = [];
+            let validNodes = toggleMethod ? nodeList.filter((node) => toggleMethod({ $cascader: $xeCascader, expanded, node })) : nodeList;
+            validNodes = validNodes.length ? [validNodes[validNodes.length - 1]] : [];
+            // 同一级只能展开一个
+            const nodeid = getNodeId(validNodes[0]);
+            const nodeItem = nodeMaps[nodeid];
+            if (nodeItem) {
+                nodeItem.items.forEach(item => {
+                    const itemNodeId = getNodeId(item);
+                    if (treeExpandedMaps[itemNodeId]) {
+                        delete treeExpandedMaps[itemNodeId];
+                    }
+                });
+            }
+            {
+                validNodes.forEach((item) => {
+                    const itemNodeId = getNodeId(item);
+                    if (!treeExpandedMaps[itemNodeId]) {
+                        const nodeItem = nodeMaps[itemNodeId];
+                        const isLoad = lazy && item[hasChildField] && !nodeItem.treeLoaded && !treeExpandLazyLoadedMaps[itemNodeId];
+                        // 是否使用懒加载
+                        if (isLoad) {
+                            result.push(handleAsyncTreeExpandChilds(item));
+                        }
+                        else {
+                            if (item[childrenField] && item[childrenField].length) {
+                                treeExpandedMaps[itemNodeId] = true;
+                            }
+                        }
                     }
                 });
-                changeEvent($event, value, null);
-                dispatchEvent('clear', { value }, $event);
             }
+            reactData.updateExpandedFlag++;
+            handleTreeToList();
+            handleData();
+            return Promise.all(result);
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelElem = refOptionPanel.value;
-                    if (getEventTargetNode(evnt, panelElem).flag) {
-                        updatePlacement();
+        const toggleExpandEvent = (evnt, node, chunks, chunkIndex) => {
+            const { currentItems } = reactData;
+            const { treeExpandLazyLoadedMaps } = internalData;
+            const treeOpts = computeTreeOpts.value;
+            const { lazy } = treeOpts;
+            const stItems = currentItems.slice(0, chunkIndex);
+            const nodeid = getNodeId(node);
+            const expanded = true;
+            evnt.stopPropagation();
+            stItems.push(nodeid);
+            reactData.currentItems = stItems;
+            if (!lazy || !treeExpandLazyLoadedMaps[nodeid]) {
+                handleBaseTreeExpand([node], expanded);
+            }
+            setCurrentNode(node);
+            updateCurrentChunk();
+            dispatchEvent('node-expand', { node, expanded }, evnt);
+        };
+        const updateCheckboxStatus = () => {
+            const { selectCheckboxMaps, indeterminateRowMaps, afterTreeList } = internalData;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { checkStrictly, checkMethod } = checkboxOpts;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            if (!checkStrictly) {
+                const childRowMaps = {};
+                const childRowList = [];
+                XEUtils.eachTree(afterTreeList, (node) => {
+                    const nodeid = getNodeId(node);
+                    const childList = node[childrenField];
+                    if (childList && childList.length && !childRowMaps[nodeid]) {
+                        childRowMaps[nodeid] = 1;
+                        childRowList.unshift([node, nodeid, childList]);
+                    }
+                }, { children: transform ? mapChildrenField : childrenField });
+                childRowList.forEach(vals => {
+                    const node = vals[0];
+                    const nodeid = vals[1];
+                    const childList = vals[2];
+                    let sLen = 0; // 已选
+                    let hLen = 0; // 半选
+                    let vLen = 0; // 有效子行
+                    const cLen = childList.length; // 子行
+                    childList.forEach(checkMethod
+                        ? (item) => {
+                            const childNodeid = getNodeId(item);
+                            const isSelect = selectCheckboxMaps[childNodeid];
+                            if (checkMethod({ $cascader: $xeCascader, node: item })) {
+                                if (isSelect) {
+                                    sLen++;
+                                }
+                                else if (indeterminateRowMaps[childNodeid]) {
+                                    hLen++;
+                                }
+                                vLen++;
+                            }
+                            else {
+                                if (isSelect) {
+                                    sLen++;
+                                }
+                                else if (indeterminateRowMaps[childNodeid]) {
+                                    hLen++;
+                                }
+                            }
+                        }
+                        : item => {
+                            const childNodeid = getNodeId(item);
+                            const isSelect = selectCheckboxMaps[childNodeid];
+                            if (isSelect) {
+                                sLen++;
+                            }
+                            else if (indeterminateRowMaps[childNodeid]) {
+                                hLen++;
+                            }
+                            vLen++;
+                        });
+                    let isSelected = false;
+                    if (cLen > 0) {
+                        if (vLen > 0) {
+                            isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
+                        }
+                        else {
+                            // 如果存在子项禁用
+                            if ((sLen > 0 && sLen >= vLen)) {
+                                isSelected = true;
+                            }
+                            else if (selectCheckboxMaps[nodeid]) {
+                                isSelected = true;
+                            }
+                            else {
+                                isSelected = false;
+                            }
+                        }
                     }
                     else {
-                        hideOptionPanel();
+                        // 如果无子项
+                        isSelected = selectCheckboxMaps[nodeid];
                     }
-                }
+                    const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
+                    if (isSelected) {
+                        selectCheckboxMaps[nodeid] = node;
+                        if (indeterminateRowMaps[nodeid]) {
+                            delete indeterminateRowMaps[nodeid];
+                        }
+                    }
+                    else {
+                        if (selectCheckboxMaps[nodeid]) {
+                            delete selectCheckboxMaps[nodeid];
+                        }
+                        if (halfSelect) {
+                            indeterminateRowMaps[nodeid] = node;
+                        }
+                        else {
+                            if (indeterminateRowMaps[nodeid]) {
+                                delete indeterminateRowMaps[nodeid];
+                            }
+                        }
+                    }
+                });
+                reactData.updateCheckboxFlag++;
             }
         };
-        const handleGlobalMousedownEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                const el = refElem.value;
-                const panelElem = refOptionPanel.value;
-                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
-                if (visiblePanel && !reactData.isActivated) {
-                    hideOptionPanel();
-                }
+        const changeCheckboxEvent = (evnt, node) => {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { selectCheckboxMaps, nodeMaps } = internalData;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { checkStrictly, checkMode, checkMethod } = checkboxOpts;
+            const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
+            const nodeid = getNodeId(node);
+            const childList = node[childrenField];
+            const isExistChild = childList && childList.length > 0;
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nLevel = nodeItem.level;
+            const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+            if (isDisabled) {
+                return;
             }
-        };
-        const handleGlobalBlurEvent = () => {
-            const { visiblePanel, isActivated } = reactData;
-            if (visiblePanel) {
-                hideOptionPanel();
+            let isChecked = false;
+            if (selectCheckboxMaps[nodeid]) {
+                delete selectCheckboxMaps[nodeid];
             }
-            if (isActivated) {
-                reactData.isActivated = false;
+            else {
+                isChecked = true;
+                selectCheckboxMaps[nodeid] = node;
             }
-            if (visiblePanel || isActivated) {
-                const $input = refInput.value;
-                if ($input) {
-                    $input.blur();
-                }
+            if (!checkStrictly) {
+                XEUtils.eachTree(XEUtils.get(node, transform ? mapChildrenField : childrenField), (childNode) => {
+                    const childNodeid = getNodeId(childNode);
+                    if (isChecked) {
+                        if (!selectCheckboxMaps[childNodeid]) {
+                            selectCheckboxMaps[childNodeid] = true;
+                        }
+                    }
+                    else {
+                        if (selectCheckboxMaps[childNodeid]) {
+                            delete selectCheckboxMaps[childNodeid];
+                        }
+                    }
+                }, { children: transform ? mapChildrenField : childrenField });
             }
+            reactData.updateCheckboxFlag++;
+            updateCheckboxStatus();
+            const nodeids = XEUtils.keys(selectCheckboxMaps);
+            const value = nodeids;
+            changeEvent(evnt, value, node);
         };
-        const handleGlobalResizeEvent = () => {
-            const { visiblePanel } = reactData;
-            if (visiblePanel) {
-                updatePlacement();
+        const handleNodeClickEvent = (evnt, node, chunks, chunkIndex) => {
+            const { multiple } = props;
+            const treeOpts = computeTreeOpts.value;
+            const radioOpts = computeRadioOpts.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const { transform, trigger } = treeOpts;
+            const childList = node[transform ? mapChildrenField : childrenField];
+            let triggerCurrent = false;
+            let triggerRadio = false;
+            let triggerCheckbox = false;
+            let triggerExpand = false;
+            triggerCurrent = true;
+            changeCurrentEvent(evnt, node);
+            if (trigger !== 'icon') {
+                triggerExpand = true;
+                toggleExpandEvent(evnt, node, chunks, chunkIndex);
             }
-        };
-        const handleFocusSearch = () => {
-            if (props.filterable) {
-                nextTick(() => {
-                    const inpSearch = refInpSearch.value;
-                    if (inpSearch) {
-                        inpSearch.focus();
-                    }
-                });
+            if (multiple) {
+                if (checkboxOpts.trigger === 'node' || (!checkboxOpts.showIcon && (!childList || !childList.length))) {
+                    triggerCheckbox = true;
+                    changeCheckboxEvent(evnt, node);
+                }
+            }
+            else {
+                if (radioOpts.trigger === 'node' || (!radioOpts.showIcon && (!childList || !childList.length))) {
+                    triggerRadio = true;
+                    changeRadioEvent(evnt, node);
+                }
             }
+            dispatchEvent('node-click', { node, triggerCurrent, triggerRadio, triggerCheckbox, triggerExpand }, evnt);
         };
         const focusEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 if (!reactData.visiblePanel) {
                     reactData.triggerFocusPanel = true;
-                    showOptionPanel();
+                    showOptionPanel(evnt);
                     setTimeout(() => {
                         reactData.triggerFocusPanel = false;
                     }, 150);
@@ -9830,7 +10930,15 @@ var VxeCascaderComponent = defineVxeComponent({
             dispatchEvent('focus', {}, evnt);
         };
         const clickEvent = (evnt) => {
-            togglePanelEvent(evnt);
+            evnt.preventDefault();
+            if (reactData.triggerFocusPanel) {
+                reactData.triggerFocusPanel = false;
+            }
+            else {
+                if (!reactData.visiblePanel) {
+                    showOptionPanel(evnt);
+                }
+            }
             dispatchEvent('click', {}, evnt);
         };
         const blurEvent = (evnt) => {
@@ -9839,12 +10947,13 @@ var VxeCascaderComponent = defineVxeComponent({
         };
         const modelSearchEvent = (value) => {
             reactData.searchValue = value;
+            triggerSearchEvent(new Event('filter'));
         };
         const handleSearchEvent = () => {
-            const { modelValue, remote, remoteMethod } = props;
+            const { modelValue, remote } = props;
             const { searchValue } = reactData;
             const remoteOpts = computeRemoteOpts.value;
-            const queryMethod = remoteOpts.queryMethod || remoteMethod;
+            const queryMethod = remoteOpts.queryMethod;
             if (remote && queryMethod && remoteOpts.enabled) {
                 reactData.searchLoading = true;
                 Promise.resolve(queryMethod({ $cascader: $xeCascader, searchValue, value: modelValue })).then(() => nextTick())
@@ -9862,18 +10971,211 @@ var VxeCascaderComponent = defineVxeComponent({
             }
             else {
                 if (reactData.visiblePanel) {
-                    hideOptionPanel();
+                    hideOptionPanel($event);
                 }
                 else {
-                    showOptionPanel();
+                    showOptionPanel($event);
+                }
+            }
+        };
+        const cascaderPrivateMethods = {
+            isCheckedByCheckboxNodeId,
+            /**
+             * 用于树结构，给行数据加载子节点
+             */
+            loadChildrenNode(node, childRecords) {
+                const { separator } = props;
+                const { nodeMaps } = internalData;
+                const treeOpts = computeTreeOpts.value;
+                const labelField = computeLabelField.value;
+                const { lazy, transform } = treeOpts;
+                if (!lazy) {
+                    return Promise.resolve([]);
                 }
+                const childrenField = computeChildrenField.value;
+                const mapChildrenField = computeMapChildrenField.value;
+                const parentNodeItem = nodeMaps[getNodeId(node)];
+                const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+                const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+                return createNode(childRecords).then((nodeList) => {
+                    XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+                        const itemNodeId = getNodeId(childRow);
+                        nodeMaps[itemNodeId] = {
+                            item: childRow,
+                            index: -1,
+                            $index: -1,
+                            _index: -1,
+                            items,
+                            parent: parent || parentNodeItem.item,
+                            nodes: parentNodes.concat(nodes),
+                            level: parentLevel + nodes.length,
+                            treeIndex: -1,
+                            lineCount: 0,
+                            treeLoaded: false,
+                            fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
+                        };
+                    }, { children: childrenField });
+                    node[childrenField] = nodeList;
+                    if (transform) {
+                        node[mapChildrenField] = nodeList;
+                    }
+                    updateAfterDataIndex();
+                    return nodeList;
+                });
             }
         };
-        const cascaderPrivateMethods = {};
         Object.assign($xeCascader, cascaderMethods, cascaderPrivateMethods);
+        const handleVisibleOrCheckMode = (mode, isExistChild, nLevel) => {
+            if (mode) {
+                if (mode === 'first') {
+                    return !nLevel;
+                }
+                if (mode === 'last') {
+                    return !isExistChild;
+                }
+            }
+            return true;
+        };
+        const renderRadio = (node, isExistChild, nLevel, isChecked) => {
+            const radioOpts = computeRadioOpts.value;
+            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = radioOpts;
+            const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+            if (showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+                return h('div', {
+                    class: ['vxe-tree--radio-option', {
+                            'is--checked': isChecked,
+                            'is--disabled': isDisabled
+                        }],
+                    onClick: (evnt) => {
+                        if (!isDisabled) {
+                            changeRadioEvent(evnt, node);
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-radio--icon', isChecked ? getIcon$2().RADIO_CHECKED : getIcon$2().RADIO_UNCHECKED]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeCascader);
+        };
+        const renderCheckbox = (node, isExistChild, nLevel, isChecked, isIndeterminate) => {
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = checkboxOpts;
+            const isVisible = visibleMethod ? visibleMethod({ $cascader: $xeCascader, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+            if (showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $cascader: $xeCascader, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+                return h('div', {
+                    class: ['vxe-cascader--checkbox-option', {
+                            'is--checked': isChecked,
+                            'is--indeterminate': isIndeterminate,
+                            'is--disabled': isDisabled
+                        }],
+                    onClick: (evnt) => {
+                        if (!isDisabled) {
+                            changeCheckboxEvent(evnt, node);
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon$2().CHECKBOX_INDETERMINATE : (isChecked ? getIcon$2().CHECKBOX_CHECKED : getIcon$2().CHECKBOX_UNCHECKED)]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeCascader);
+        };
+        const renderNode = (node, nodeid, nodeIndex, chunks, chunkIndex) => {
+            const { multiple } = props;
+            const { currentNode, selectRadioKey, updateCheckboxFlag, updateExpandedFlag } = reactData;
+            const { nodeMaps, selectCheckboxMaps, indeterminateRowMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
+            const treeOpts = computeTreeOpts.value;
+            const { lazy, iconLoaded, iconOpen, iconClose } = treeOpts;
+            const childrenField = computeChildrenField.value;
+            const labelField = computeLabelField.value;
+            const hasChildField = computeHasChildField.value;
+            const childList = node[childrenField];
+            const isExistChild = childList && childList.length > 0;
+            const iconSlot = slots.icon;
+            const titleSlot = slots.title;
+            const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nodeTitle = node[labelField];
+            const nLevel = nodeItem.level;
+            let isRadioChecked = false;
+            if (!multiple) {
+                isRadioChecked = nodeid === selectRadioKey;
+            }
+            let isCheckboxChecked = false;
+            let isIndeterminate = false;
+            if (multiple) {
+                isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+                isIndeterminate = !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
+            }
+            let hasLazyChilds = false;
+            let isLazyLoading = false;
+            let isLazyLoaded = false;
+            if (lazy) {
+                isLazyLoading = !!treeExpandLazyLoadedMaps[nodeid];
+                hasLazyChilds = node[hasChildField];
+                isLazyLoaded = !!nodeItem.treeLoaded;
+            }
+            const nParams = { node };
+            return h('div', {
+                key: `${chunkIndex}_${nodeIndex}`,
+                class: ['vxe-cascader-chunk--node-item', {
+                        'is--current': currentNode && (currentNode === node || getNodeId(currentNode) === nodeid),
+                        'is-radio--checked': isRadioChecked,
+                        'is-checkbox--checked': isCheckboxChecked,
+                        'is-checkbox--indeterminate': isIndeterminate,
+                        'is--expand': isExpand
+                    }],
+                title: nodeTitle,
+                onMousedown: (evnt) => {
+                    const isLeftBtn = evnt.button === 0;
+                    if (isLeftBtn) {
+                        evnt.stopPropagation();
+                    }
+                },
+                onClick(evnt) {
+                    handleNodeClickEvent(evnt, node, chunks, chunkIndex);
+                }
+            }, [
+                multiple ? renderCheckbox(node, isExistChild, nLevel, isCheckboxChecked, isIndeterminate) : renderRadio(node, isExistChild, nLevel, isRadioChecked),
+                h('div', {
+                    class: 'vxe-cascader-chunk--node-item-inner'
+                }, [
+                    h('div', {
+                        class: 'vxe-cascader-chunk--node-item-title'
+                    }, titleSlot ? getSlotVNs$1(titleSlot(nParams)) : nodeTitle)
+                ]),
+                treeOpts.showIcon && (lazy ? (isLazyLoaded ? isExistChild : hasLazyChilds) : isExistChild)
+                    ? h('div', {
+                        class: 'vxe-cascader-chunk--node-item-switcher'
+                    }, [
+                        [
+                            h('div', {
+                                class: 'vxe-cascader--node-item-icon',
+                                onClick(evnt) {
+                                    if (treeOpts.trigger === 'icon') {
+                                        toggleExpandEvent(evnt, node, chunks, chunkIndex);
+                                    }
+                                }
+                            }, iconSlot
+                                ? getSlotVNs$1(iconSlot(nParams))
+                                : [
+                                    h('i', {
+                                        class: isLazyLoading ? (iconLoaded || getIcon$2().CASCADER_NODE_LOADED) : (isExpand ? (iconOpen || getIcon$2().CASCADER_NODE_OPEN) : (iconClose || getIcon$2().CASCADER_NODE_CLOSE))
+                                    })
+                                ])
+                        ]
+                    ])
+                    : renderEmptyElement($xeCascader)
+            ]);
+        };
         const renderVN = () => {
-            const { className, modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton } = props;
-            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData;
+            const { className, modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton } = props;
+            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue, currentCunkList } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const selectLabel = computeSelectLabel.value;
@@ -9941,7 +11243,7 @@ var VxeCascaderComponent = defineVxeComponent({
                                 'ani--enter': !loading && visiblePanel
                             }],
                         placement: reactData.panelPlacement,
-                        style: reactData.panelStyle
+                        style: popupWrapperStyle
                     }, initialized
                         ? [
                             h('div', {
@@ -9964,38 +11266,35 @@ var VxeCascaderComponent = defineVxeComponent({
                                         })
                                     ])
                                     : renderEmptyElement($xeCascader),
-                                showTotalButton || (showCheckedButton && multiple) || showClearButton || headerSlot
+                                (showCheckedButton && multiple) || showClearButton || headerSlot
                                     ? h('div', {
-                                        class: 'vxe-cascader--panel-header'
+                                        class: 'vxe-tree-select--panel-header'
                                     }, headerSlot
                                         ? headerSlot({})
                                         : [
                                             h('div', {
-                                                class: 'vxe-cascader--header-button'
+                                                class: 'vxe-tree-select--header-button'
                                             }, [
-                                                showTotalButton
+                                                showCheckedButton && showClearButton
                                                     ? h('div', {
-                                                        class: 'vxe-cascader--header-total'
-                                                    }, getI18n$2('vxe.cascader.total', [selectVals.length]))
-                                                    : renderEmptyElement($xeCascader),
-                                                h('div', {
-                                                    class: 'vxe-cascader--header-btns'
-                                                }, [
-                                                    (showCheckedButton && multiple)
-                                                        ? h(VxeButtonComponent, {
-                                                            content: getI18n$2('vxe.cascader.allChecked'),
-                                                            mode: 'text',
-                                                            onClick: allCheckedPanelEvent
-                                                        })
-                                                        : renderEmptyElement($xeCascader),
-                                                    showClearButton
-                                                        ? h(VxeButtonComponent, {
-                                                            content: getI18n$2('vxe.cascader.clearChecked'),
-                                                            mode: 'text',
-                                                            onClick: clearCheckedPanelEvent
-                                                        })
-                                                        : renderEmptyElement($xeCascader)
-                                                ])
+                                                        class: 'vxe-tree-select--selected-btns'
+                                                    }, [
+                                                        (showCheckedButton && multiple)
+                                                            ? h(VxeButtonComponent, {
+                                                                content: getI18n$2('vxe.treeSelect.allChecked'),
+                                                                mode: 'text',
+                                                                onClick: allCheckedPanelEvent
+                                                            })
+                                                            : renderEmptyElement($xeCascader),
+                                                        showClearButton
+                                                            ? h(VxeButtonComponent, {
+                                                                content: getI18n$2('vxe.treeSelect.clearChecked'),
+                                                                mode: 'text',
+                                                                onClick: clearCheckedPanelEvent
+                                                            })
+                                                            : renderEmptyElement($xeCascader)
+                                                    ])
+                                                    : renderEmptyElement($xeCascader)
                                             ])
                                         ])
                                     : renderEmptyElement($xeCascader),
@@ -10003,15 +11302,56 @@ var VxeCascaderComponent = defineVxeComponent({
                                     class: 'vxe-cascader--panel-body'
                                 }, [
                                     h('div', {
-                                        ref: refTreeWrapper,
-                                        class: 'vxe-cascader-tree--wrapper',
-                                        style: popupWrapperStyle
-                                    }, [])
+                                        ref: refChunkWrapper,
+                                        class: 'vxe-cascader-chunk--wrapper'
+                                    }, [
+                                        currentCunkList.map((chunks, chunkIndex) => {
+                                            return h('div', {
+                                                key: chunkIndex,
+                                                class: 'vxe-cascader-chunk--item-wrapper'
+                                            }, [
+                                                h(VxeListComponent, {
+                                                    data: chunks
+                                                }, {
+                                                    default(slotParams) {
+                                                        const { items } = slotParams;
+                                                        return items.map((node, nodeIndex) => {
+                                                            const nodeid = getNodeId(node);
+                                                            return renderNode(node, nodeid, nodeIndex, chunks, chunkIndex);
+                                                        });
+                                                    }
+                                                })
+                                            ]);
+                                        })
+                                    ])
                                 ]),
-                                footerSlot
+                                footerSlot || showTotalButton || (showCloseButton && multiple)
                                     ? h('div', {
                                         class: 'vxe-cascader--panel-footer'
-                                    }, footerSlot({}))
+                                    }, footerSlot
+                                        ? footerSlot({})
+                                        : [
+                                            h('div', {
+                                                class: 'vxe-cascader--footer-button'
+                                            }, [
+                                                showTotalButton
+                                                    ? h('div', {
+                                                        class: 'vxe-cascader--total-btns'
+                                                    }, getI18n$2('vxe.treeSelect.total', [selectVals.length]))
+                                                    : renderEmptyElement($xeCascader),
+                                                showCloseButton && multiple
+                                                    ? h('div', {
+                                                        class: 'vxe-cascader--oper-btns'
+                                                    }, [
+                                                        h(VxeButtonComponent, {
+                                                            content: getI18n$2('vxe.select.close'),
+                                                            mode: 'text',
+                                                            onClick: closePanelEvent
+                                                        })
+                                                    ])
+                                                    : renderEmptyElement($xeCascader)
+                                            ])
+                                        ])
                                     : renderEmptyElement($xeCascader)
                             ])
                         ]
@@ -10019,11 +11359,30 @@ var VxeCascaderComponent = defineVxeComponent({
                 ])
             ]);
         };
+        watch(() => props.modelValue, () => {
+            if (!reactData.visiblePanel) {
+                handleCurrentItems();
+                updateCurrentChunk();
+            }
+        });
         watch(() => props.options, () => {
-            cacheDataMap();
+            cacheNodeMap();
         });
-        cacheDataMap();
+        const dataFlag = ref(0);
+        watch(() => props.options ? props.options.length : 0, () => {
+            dataFlag.value++;
+        });
+        watch(() => props.options, () => {
+            dataFlag.value++;
+        });
+        watch(dataFlag, () => {
+            loadData(props.options || []);
+        });
+        loadData(props.options || []);
         onMounted(() => {
+            if (props.filterable) {
+                errLog('vxe.error.notProp', ['filterable']);
+            }
             globalEvents.on($xeCascader, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeCascader, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeCascader, 'blur', handleGlobalBlurEvent);
@@ -10034,7 +11393,7 @@ var VxeCascaderComponent = defineVxeComponent({
             globalEvents.off($xeCascader, 'mousedown');
             globalEvents.off($xeCascader, 'blur');
             globalEvents.off($xeCascader, 'resize');
-            XEUtils.assign(internalData, createInternalData$c());
+            XEUtils.assign(internalData, createInternalData$b());
         });
         provide('$xeCascader', $xeCascader);
         $xeCascader.renderVN = renderVN;
@@ -10367,7 +11726,7 @@ dynamicApp.use(VxeCheckboxButton);
 VxeUI.component(VxeCheckboxButtonComponent);
 const CheckboxButton = VxeCheckboxButton;
 
-function createInternalData$b() {
+function createInternalData$a() {
     return {
     // isLoaded: false
     };
@@ -10407,7 +11766,7 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const reactData = reactive({});
-        const internalData = createInternalData$b();
+        const internalData = createInternalData$a();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -10566,7 +11925,7 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(internalData, createInternalData$b());
+            XEUtils.assign(internalData, createInternalData$a());
         });
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
         $xeCheckboxGroup.renderVN = renderVN;
@@ -11308,6 +12667,11 @@ var VxeNumberInputComponent = defineVxeComponent({
         },
         controlConfig: Object,
         // float
+        roundingMode: {
+            type: String,
+            default: () => getConfig$3().numberInput.roundingMode
+        },
+        // float
         digits: {
             type: [String, Number],
             default: null
@@ -11477,12 +12841,22 @@ var VxeNumberInputComponent = defineVxeComponent({
             return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue));
         });
         const computeNumLabel = computed(() => {
-            const { type, showCurrency, currencySymbol, autoFill } = props;
+            const { type, roundingMode, showCurrency, currencySymbol, autoFill } = props;
             const { inputValue } = reactData;
             const digitsValue = computeDigitsValue.value;
             if (type === 'amount') {
                 const num = XEUtils.toNumber(inputValue);
-                let amountLabel = XEUtils.commafy(num, { digits: digitsValue });
+                const cfyOpts = { digits: digitsValue };
+                if (roundingMode === 'floor') {
+                    cfyOpts.floor = true;
+                }
+                else if (roundingMode === 'ceil') {
+                    cfyOpts.ceil = true;
+                }
+                else {
+                    cfyOpts.round = true;
+                }
+                let amountLabel = XEUtils.commafy(num, cfyOpts);
                 if (!autoFill) {
                     const [iStr, dStr] = amountLabel.split('.');
                     if (dStr) {
@@ -11541,13 +12915,13 @@ var VxeNumberInputComponent = defineVxeComponent({
             return `${val}`;
         };
         const getNumberValue = (val) => {
-            const { exponential, autoFill } = props;
+            const { type, exponential, roundingMode, autoFill } = props;
             const inpMaxLength = computeInpMaxLength.value;
             const digitsValue = computeDigitsValue.value;
             const decimalsType = computeDecimalsType.value;
             let restVal = '';
             if (decimalsType) {
-                restVal = toFloatValueFixed(val, digitsValue);
+                restVal = toFloatValueFixed(val, type, digitsValue, roundingMode);
                 if (!autoFill) {
                     restVal = handleNumberString(XEUtils.toNumber(restVal));
                 }
@@ -11639,7 +13013,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             }
         };
         const updateModel = (val) => {
-            const { autoFill } = props;
+            const { type, roundingMode, autoFill } = props;
             const { inputValue } = reactData;
             const digitsValue = computeDigitsValue.value;
             const decimalsType = computeDecimalsType.value;
@@ -11647,11 +13021,11 @@ var VxeNumberInputComponent = defineVxeComponent({
                 reactData.inputValue = '';
             }
             else {
-                let textValue = `${val}`;
+                let textValue = '' + val;
                 if (decimalsType) {
-                    textValue = toFloatValueFixed(val, digitsValue);
+                    textValue = toFloatValueFixed(val, type, digitsValue, roundingMode);
                     if (!autoFill) {
-                        textValue = `${XEUtils.toNumber(textValue)}`;
+                        textValue = '' + XEUtils.toNumber(textValue);
                     }
                 }
                 if (textValue !== inputValue) {
@@ -11663,7 +13037,7 @@ var VxeNumberInputComponent = defineVxeComponent({
          * 检查初始值
          */
         const initValue = () => {
-            const { autoFill } = props;
+            const { type, roundingMode, autoFill } = props;
             const { inputValue } = reactData;
             const digitsValue = computeDigitsValue.value;
             const decimalsType = computeDecimalsType.value;
@@ -11672,7 +13046,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                     let textValue = '';
                     let validValue = null;
                     if (inputValue) {
-                        textValue = toFloatValueFixed(inputValue, digitsValue);
+                        textValue = toFloatValueFixed(inputValue, type, digitsValue, roundingMode);
                         validValue = XEUtils.toNumber(textValue);
                         if (!autoFill) {
                             textValue = `${validValue}`;
@@ -13294,12 +14668,12 @@ dynamicApp.use(VxeColorPicker);
 VxeUI.component(VxeColorPickerComponent);
 const ColorPicker = VxeColorPicker;
 
-function createInternalData$a() {
+function createInternalData$9() {
     return {
     // leaveTime: null
     };
 }
-function createReactData$8() {
+function createReactData$7() {
     return {
         visible: false,
         activeOption: null,
@@ -13354,8 +14728,8 @@ var VxeContextMenuComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$a();
-        const reactData = reactive(createReactData$8());
+        const internalData = createInternalData$9();
+        const reactData = reactive(createReactData$7());
         const refMaps = {
             refElem
         };
@@ -13910,8 +15284,8 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$8());
-            XEUtils.assign(internalData, createInternalData$a());
+            XEUtils.assign(reactData, createReactData$7());
+            XEUtils.assign(internalData, createInternalData$9());
         });
         $xeContextMenu.renderVN = renderVN;
         return $xeContextMenu;
@@ -20601,7 +21975,7 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
-function createReactData$7() {
+function createReactData$6() {
     return {
         collapseAll: false,
         staticItems: [],
@@ -20609,7 +21983,7 @@ function createReactData$7() {
         itemWidth: 0
     };
 }
-function createInternalData$9() {
+function createInternalData$8() {
     return {
         meTimeout: undefined,
         stTimeout: undefined,
@@ -20718,8 +22092,8 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$7());
-        const internalData = createInternalData$9();
+        const reactData = reactive(createReactData$6());
+        const internalData = createInternalData$8();
         const refElem = ref();
         const refTooltip = ref();
         let formMethods = {};
@@ -21413,7 +22787,7 @@ var VxeFormComponent = defineVxeComponent({
         });
         onUnmounted(() => {
             globalEvents.off($xeForm, 'resize');
-            XEUtils.assign(internalData, createInternalData$9());
+            XEUtils.assign(internalData, createInternalData$8());
         });
         reactData.collapseAll = !!props.collapseStatus;
         if (props.items) {
@@ -22817,13 +24191,13 @@ const openPreviewImage = (options) => {
     return Promise.resolve();
 };
 
-function createInternalData$8() {
+function createInternalData$7() {
     return {
     // dgTime: 0,
     // mdTime: 0
     };
 }
-function createReactData$6() {
+function createReactData$5() {
     return {};
 }
 var VxeImageComponent = defineVxeComponent({
@@ -22882,8 +24256,8 @@ var VxeImageComponent = defineVxeComponent({
         const $xeImageGroup = inject('$xeImageGroup', null);
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$8();
-        const reactData = reactive(createReactData$6());
+        const internalData = createInternalData$7();
+        const reactData = reactive(createReactData$5());
         const refMaps = {
             refElem
         };
@@ -23069,8 +24443,8 @@ var VxeImageComponent = defineVxeComponent({
             ]);
         };
         onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$6());
-            XEUtils.assign(internalData, createInternalData$8());
+            XEUtils.assign(reactData, createReactData$5());
+            XEUtils.assign(internalData, createInternalData$7());
         });
         $xeImage.renderVN = renderVN;
         return $xeImage;
@@ -23359,10 +24733,10 @@ dynamicApp.use(VxeLayoutAside);
 VxeUI.component(VxeLayoutAsideComponent);
 const LayoutAside = VxeLayoutAside;
 
-function createInternalData$7() {
+function createInternalData$6() {
     return {};
 }
-function createReactData$5() {
+function createReactData$4() {
     return {};
 }
 var VxeLayoutBodyComponent = defineVxeComponent({
@@ -23387,8 +24761,8 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         const backtopId = `vxe_layout_body_backtop_${xID}`;
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$7();
-        const reactData = reactive(createReactData$5());
+        const internalData = createInternalData$6();
+        const reactData = reactive(createReactData$4());
         const refMaps = {
             refElem
         };
@@ -23803,404 +25177,6 @@ dynamicApp.use(VxeLink);
 VxeUI.component(VxeLinkComponent);
 const Link = VxeLink;
 
-function createReactData$4() {
-    return {
-        scrollYLoad: false,
-        bodyHeight: 0,
-        customHeight: 0,
-        customMaxHeight: 0,
-        parentHeight: 0,
-        topSpaceHeight: 0,
-        items: []
-    };
-}
-function createInternalData$6() {
-    return {
-        resizeObserver: undefined,
-        fullData: [],
-        lastScrollLeft: 0,
-        lastScrollTop: 0,
-        scrollYStore: {
-            startIndex: 0,
-            endIndex: 0,
-            visibleSize: 0,
-            offsetSize: 0,
-            rowHeight: 0
-        }
-    };
-}
-var VxeListComponent = defineVxeComponent({
-    name: 'VxeList',
-    props: {
-        data: Array,
-        height: [Number, String],
-        maxHeight: [Number, String],
-        loading: Boolean,
-        className: [String, Function],
-        size: {
-            type: String,
-            default: () => getConfig$3().list.size || getConfig$3().size
-        },
-        autoResize: {
-            type: Boolean,
-            default: () => getConfig$3().list.autoResize
-        },
-        syncResize: [Boolean, String, Number],
-        virtualYConfig: Object,
-        scrollY: Object
-    },
-    emits: [
-        'scroll'
-    ],
-    setup(props, context) {
-        const { slots, emit } = context;
-        const xID = XEUtils.uniqueId();
-        const browseObj = XEUtils.browse();
-        const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$4());
-        const internalData = createInternalData$6();
-        const refElem = ref();
-        const refVirtualWrapper = ref();
-        const refVirtualBody = ref();
-        const refMaps = {
-            refElem
-        };
-        const $xeList = {
-            xID,
-            props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps
-        };
-        const computeSYOpts = computed(() => {
-            return Object.assign({}, getConfig$3().list.virtualYConfig || getConfig$3().list.scrollY, props.virtualYConfig || props.scrollY);
-        });
-        const computeStyles = computed(() => {
-            const { height, maxHeight } = props;
-            const { customHeight, customMaxHeight } = reactData;
-            const style = {};
-            if (height) {
-                style.height = `${customHeight}px`;
-            }
-            else if (maxHeight) {
-                style.height = 'auto';
-                style.maxHeight = `${customMaxHeight}px`;
-            }
-            return style;
-        });
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $list: $xeList }, params));
-        };
-        const calcTableHeight = (key) => {
-            const { parentHeight } = reactData;
-            const val = props[key];
-            let num = 0;
-            if (val) {
-                if (val === '100%' || val === 'auto') {
-                    num = parentHeight;
-                }
-                else {
-                    if (isScale(val)) {
-                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
-                    }
-                    else {
-                        num = XEUtils.toNumber(val);
-                    }
-                    num = Math.max(40, num);
-                }
-            }
-            return num;
-        };
-        const updateHeight = () => {
-            reactData.customHeight = calcTableHeight('height');
-            reactData.customMaxHeight = calcTableHeight('maxHeight');
-        };
-        const updateYSpace = () => {
-            const { scrollYLoad } = reactData;
-            const { scrollYStore, fullData } = internalData;
-            reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
-            reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
-        };
-        const handleData = () => {
-            const { scrollYLoad } = reactData;
-            const { fullData, scrollYStore } = internalData;
-            reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
-            return nextTick();
-        };
-        const updateYData = () => {
-            handleData();
-            updateYSpace();
-        };
-        const computeScrollLoad = () => {
-            return nextTick().then(() => {
-                const { scrollYLoad } = reactData;
-                const { scrollYStore } = internalData;
-                const virtualBodyElem = refVirtualBody.value;
-                const sYOpts = computeSYOpts.value;
-                let rowHeight = 0;
-                let firstItemElem;
-                if (virtualBodyElem) {
-                    if (sYOpts.sItem) {
-                        firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
-                    }
-                    if (!firstItemElem) {
-                        firstItemElem = virtualBodyElem.children[0];
-                    }
-                }
-                if (firstItemElem) {
-                    rowHeight = firstItemElem.offsetHeight;
-                }
-                rowHeight = Math.max(12, rowHeight);
-                scrollYStore.rowHeight = rowHeight;
-                // 计算 Y 逻辑
-                if (scrollYLoad) {
-                    const scrollBodyElem = refVirtualWrapper.value;
-                    const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
-                    const offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browseObj.edge ? 10 : 0);
-                    scrollYStore.offsetSize = offsetYSize;
-                    scrollYStore.visibleSize = visibleYSize;
-                    scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
-                    updateYData();
-                }
-                else {
-                    updateYSpace();
-                }
-            });
-        };
-        /**
-         * 清除滚动条
-         */
-        const clearScroll = () => {
-            const scrollBodyElem = refVirtualWrapper.value;
-            if (scrollBodyElem) {
-                scrollBodyElem.scrollTop = 0;
-            }
-            return nextTick();
-        };
-        /**
-         * 如果有滚动条，则滚动到对应的位置
-         */
-        const scrollTo = (scrollLeft, scrollTop) => {
-            const scrollBodyElem = refVirtualWrapper.value;
-            if (scrollLeft) {
-                if (!XEUtils.isNumber(scrollLeft)) {
-                    scrollTop = scrollLeft.top;
-                    scrollLeft = scrollLeft.left;
-                }
-            }
-            if (XEUtils.isNumber(scrollLeft)) {
-                scrollBodyElem.scrollLeft = scrollLeft;
-            }
-            if (XEUtils.isNumber(scrollTop)) {
-                scrollBodyElem.scrollTop = scrollTop;
-            }
-            if (reactData.scrollYLoad) {
-                return new Promise(resolve => {
-                    setTimeout(() => {
-                        nextTick(() => {
-                            resolve();
-                        });
-                    }, 50);
-                });
-            }
-            return nextTick();
-        };
-        /**
-         * 刷新滚动条
-         */
-        const refreshScroll = () => {
-            const { lastScrollLeft, lastScrollTop } = internalData;
-            return clearScroll().then(() => {
-                if (lastScrollLeft || lastScrollTop) {
-                    internalData.lastScrollLeft = 0;
-                    internalData.lastScrollTop = 0;
-                    return scrollTo(lastScrollLeft, lastScrollTop);
-                }
-            });
-        };
-        /**
-         * 重新计算列表
-         */
-        const recalculate = () => {
-            const el = refElem.value;
-            if (el) {
-                const parentEl = el.parentElement;
-                reactData.parentHeight = parentEl ? parentEl.clientHeight : 0;
-                updateHeight();
-                if (el.clientWidth && el.clientHeight) {
-                    return computeScrollLoad();
-                }
-            }
-            return nextTick();
-        };
-        const loadYData = (evnt) => {
-            const { scrollYStore } = internalData;
-            const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-            const scrollBodyElem = evnt.target;
-            const scrollTop = scrollBodyElem.scrollTop;
-            const toVisibleIndex = Math.floor(scrollTop / rowHeight);
-            const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
-            const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
-            if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
-                if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
-                    scrollYStore.startIndex = offsetStartIndex;
-                    scrollYStore.endIndex = offsetEndIndex;
-                    updateYData();
-                }
-            }
-        };
-        const scrollEvent = (evnt) => {
-            const scrollBodyElem = evnt.target;
-            const scrollTop = scrollBodyElem.scrollTop;
-            const scrollLeft = scrollBodyElem.scrollLeft;
-            const isX = scrollLeft !== internalData.lastScrollLeft;
-            const isY = scrollTop !== internalData.lastScrollTop;
-            internalData.lastScrollTop = scrollTop;
-            internalData.lastScrollLeft = scrollLeft;
-            if (reactData.scrollYLoad) {
-                loadYData(evnt);
-            }
-            dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt);
-        };
-        /**
-         * 加载数据
-         * @param {Array} datas 数据
-         */
-        const loadData = (datas) => {
-            const { scrollYStore } = internalData;
-            const sYOpts = computeSYOpts.value;
-            const fullData = datas || [];
-            Object.assign(scrollYStore, {
-                startIndex: 0,
-                endIndex: 1,
-                visibleSize: 0
-            });
-            internalData.fullData = fullData;
-            // 如果gt为0，则总是启用
-            reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
-            handleData();
-            return computeScrollLoad().then(() => {
-                refreshScroll();
-            });
-        };
-        const listMethods = {
-            dispatchEvent,
-            loadData,
-            /**
-             * 重新加载数据
-             * @param {Array} datas 数据
-             */
-            reloadData(datas) {
-                clearScroll();
-                return loadData(datas);
-            },
-            recalculate,
-            scrollTo,
-            refreshScroll,
-            clearScroll
-        };
-        Object.assign($xeList, listMethods);
-        const renderVN = () => {
-            const { className, loading } = props;
-            const { bodyHeight, topSpaceHeight, items } = reactData;
-            const defaultSlot = slots.default;
-            const vSize = computeSize.value;
-            const styles = computeStyles.value;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
-                        [`size--${vSize}`]: vSize,
-                        'is--loading': loading
-                    }]
-            }, [
-                h('div', {
-                    ref: refVirtualWrapper,
-                    class: 'vxe-list--virtual-wrapper',
-                    style: styles,
-                    onScroll: scrollEvent
-                }, [
-                    h('div', {
-                        class: 'vxe-list--y-space',
-                        style: {
-                            height: bodyHeight ? `${bodyHeight}px` : ''
-                        }
-                    }),
-                    h('div', {
-                        ref: refVirtualBody,
-                        class: 'vxe-list--body',
-                        style: {
-                            marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
-                        }
-                    }, defaultSlot ? defaultSlot({ items, $list: $xeList }) : [])
-                ]),
-                /**
-                 * 加载中
-                 */
-                h(VxeLoadingComponent, {
-                    class: 'vxe-list--loading',
-                    modelValue: loading
-                })
-            ]);
-        };
-        const dataFlag = ref(0);
-        watch(() => props.data ? props.data.length : -1, () => {
-            dataFlag.value++;
-        });
-        watch(() => props.data, () => {
-            dataFlag.value++;
-        });
-        watch(dataFlag, () => {
-            loadData(props.data || []);
-        });
-        watch(() => props.height, () => {
-            recalculate();
-        });
-        watch(() => props.maxHeight, () => {
-            recalculate();
-        });
-        watch(() => props.syncResize, (value) => {
-            if (value) {
-                recalculate();
-                nextTick(() => setTimeout(() => recalculate()));
-            }
-        });
-        onActivated(() => {
-            recalculate().then(() => refreshScroll());
-        });
-        nextTick(() => {
-            loadData(props.data || []);
-        });
-        onMounted(() => {
-            recalculate();
-            if (props.autoResize) {
-                const el = refElem.value;
-                const resizeObserver = globalResize.create(() => recalculate());
-                resizeObserver.observe(el);
-                if (el) {
-                    resizeObserver.observe(el.parentElement);
-                }
-                internalData.resizeObserver = resizeObserver;
-            }
-            globalEvents.on($xeList, 'resize', recalculate);
-        });
-        onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-            globalEvents.off($xeList, 'resize');
-            XEUtils.assign(reactData, createReactData$4());
-            XEUtils.assign(internalData, createInternalData$6());
-        });
-        $xeList.renderVN = renderVN;
-        return $xeList;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
 const VxeList = Object.assign(VxeListComponent, {
     install(app) {
         app.component(VxeListComponent.name, VxeListComponent);
@@ -36005,6 +36981,45 @@ dynamicApp.use(VxeTour);
 VxeUI.component(VxeTourComponent);
 const Tour = VxeTour;
 
+function enNodeValue(nodeid) {
+    return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
+}
+function deNodeValue(nodeid) {
+    return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
+}
+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;
+}
+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);
+}
+
 // 跨树拖拽
 const crossTreeDragNodeInfo = reactive({
     node: null
@@ -36367,6 +37382,9 @@ var VxeTreeComponent = defineVxeComponent({
             getComputeMaps: () => computeMaps
         };
         const getNodeId = (node) => {
+            if (!node) {
+                return '';
+            }
             const valueField = computeValueField.value;
             const nodeKey = XEUtils.get(node, valueField);
             return enNodeValue(nodeKey);
@@ -36522,7 +37540,7 @@ var VxeTreeComponent = defineVxeComponent({
             const valueField = computeValueField.value;
             const childrenField = computeChildrenField.value;
             const keyMaps = {};
-            XEUtils.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
                 let nodeid = getNodeId(item);
                 if (!nodeid) {
                     nodeid = getNodeUniqueId();
@@ -36534,7 +37552,7 @@ var VxeTreeComponent = defineVxeComponent({
                     $index: -1,
                     _index: -1,
                     items,
-                    parent,
+                    parent: parenItem,
                     nodes,
                     level: nodes.length - 1,
                     treeIndex: index,
@@ -36550,7 +37568,7 @@ var VxeTreeComponent = defineVxeComponent({
             const childrenField = computeChildrenField.value;
             const mapChildrenField = computeMapChildrenField.value;
             let vtIndex = 0;
-            XEUtils.eachTree(afterTreeList, (item, index, items) => {
+            XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
                 const nodeid = getNodeId(item);
                 const nodeItem = nodeMaps[nodeid];
                 if (nodeItem) {
@@ -36565,9 +37583,9 @@ var VxeTreeComponent = defineVxeComponent({
                         $index: -1,
                         _index: vtIndex,
                         items,
-                        parent,
-                        nodes: [],
-                        level: 0,
+                        parent: parenItem,
+                        nodes,
+                        level: nodes.length - 1,
                         treeIndex: index,
                         lineCount: 0,
                         treeLoaded: false
@@ -38377,7 +39395,7 @@ var VxeTreeComponent = defineVxeComponent({
             const extraSlot = slots.extra;
             const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
             const nodeItem = nodeMaps[nodeid] || {};
-            const nodeValue = XEUtils.get(node, titleField);
+            const nodeTitle = XEUtils.get(node, titleField);
             const nLevel = nodeItem.level;
             let isRadioChecked = false;
             if (showRadio) {
@@ -38467,7 +39485,7 @@ var VxeTreeComponent = defineVxeComponent({
                     }, [
                         h('div', {
                             class: 'vxe-tree--node-item-title'
-                        }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeValue}`),
+                        }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeTitle}`),
                         extraSlot
                             ? h('div', {
                                 class: 'vxe-tree--node-item-extra'
@@ -38633,6 +39651,15 @@ var VxeTreeComponent = defineVxeComponent({
         watch(() => props.data, () => {
             dataFlag.value++;
         });
+        watch(() => props.rootParentValue, () => {
+            dataFlag.value++;
+        });
+        watch(() => props.rootValues ? props.rootValues.length : 0, () => {
+            dataFlag.value++;
+        });
+        watch(() => props.rootValues, () => {
+            dataFlag.value++;
+        });
         watch(dataFlag, () => {
             loadData(props.data || []);
         });
@@ -38665,19 +39692,6 @@ var VxeTreeComponent = defineVxeComponent({
         watch(hFlag, () => {
             recalculate();
         });
-        const rootConf = ref(0);
-        watch(() => props.rootParentValue, () => {
-            rootConf.value++;
-        });
-        watch(() => props.rootValues ? props.rootValues.length : 0, () => {
-            rootConf.value++;
-        });
-        watch(() => props.rootValues, () => {
-            rootConf.value++;
-        });
-        watch(rootConf, () => {
-            loadData(props.data || []);
-        });
         onMounted(() => {
             const { transform, drag, menuConfig } = props;
             const dragOpts = computeDragOpts.value;
@@ -38687,6 +39701,9 @@ var VxeTreeComponent = defineVxeComponent({
             if (dragOpts.isCrossTreeDrag) {
                 errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
             }
+            // if (valueField) {
+            //   errLog('vxe.error.delProp', ['value-field', 'value-field'])
+            // }
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
                 errLog('vxe.error.reqComp', ['vxe-context-menu']);
@@ -38921,12 +39938,12 @@ var VxeTreeSelectComponent = defineVxeComponent({
             return disabled;
         });
         const computeBtnTransfer = computed(() => {
-            const { transfer } = props;
             const popupOpts = computePopupOpts.value;
-            if (XEUtils.isBoolean(popupOpts.transfer)) {
-                return popupOpts.transfer;
+            const { transfer } = popupOpts;
+            if (XEUtils.isBoolean(transfer)) {
+                return transfer;
             }
-            if (transfer === null) {
+            if (props.transfer === null) {
                 const globalTransfer = getConfig$3().treeSelect.transfer;
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
@@ -38935,7 +39952,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     return true;
                 }
             }
-            return transfer;
+            return props.transfer;
         });
         const computePopupOpts = computed(() => {
             return Object.assign({}, getConfig$3().treeSelect.popupConfig, props.popupConfig);
@@ -39004,12 +40021,16 @@ var VxeTreeSelectComponent = defineVxeComponent({
             const treeOpts = computeTreeOpts.value;
             return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
         });
+        const computeSelectVals = computed(() => {
+            const { modelValue } = props;
+            return XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+        });
         const computeSelectLabel = computed(() => {
-            const { modelValue, showFullLabel } = props;
+            const { showFullLabel } = props;
             const { fullOptFlag, lazyOptFlag } = reactData;
             const { fullNodeMaps, lazyNodeMaps } = internalData;
             const labelField = computeLabelField.value;
-            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+            const selectVals = computeSelectVals.value;
             return selectVals.map(val => {
                 const cacheItem = fullNodeMaps[val];
                 if (fullOptFlag && cacheItem) {
@@ -39089,12 +40110,12 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     nodeid = getOptUniqueId();
                 }
                 if (keyMaps[nodeid]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid]);
+                    errLog('vxe.error.repeatKey', [nodeKeyField, nodeid]);
                 }
                 keyMaps[nodeid] = true;
                 const value = item[valueField];
                 if (nodeMaps[value]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
+                    errLog('vxe.error.repeatKey', [valueField, value]);
                 }
                 nodeMaps[value] = {
                     item,
@@ -39102,7 +40123,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     items,
                     parent: parentItem,
                     nodes,
-                    fullLabel: nodes.map(item => item[labelField]).join((separator || '/') + ' ')
+                    fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
                 };
             };
             if (optList) {
@@ -39171,7 +40192,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             handleStyle();
             return nextTick().then(handleStyle);
         };
-        const showOptionPanel = () => {
+        const showOptionPanel = (evnt) => {
             const { loading, remote, filterable } = props;
             const { fullOptionList } = internalData;
             const isDisabled = computeIsDisabled.value;
@@ -39195,7 +40216,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                 }, 10);
                 updateZindex();
                 updatePlacement();
-                dispatchEvent('visible-change', { visible: true }, null);
+                dispatchEvent('visible-change', { visible: true }, evnt || null);
             }
         };
         const hideOptionPanel = (evnt) => {
@@ -39234,7 +40255,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
                         changeEvent($event, checkNodeKeys, checkNodes[0]);
                         dispatchEvent('all-change', { value: checkNodeKeys }, $event);
-                        if (XEUtils.isBoolean(autoClose) ? autoClose : checkedClosable) {
+                        if (XEUtils.isBoolean(checkedClosable) ? checkedClosable : autoClose) {
                             hideOptionPanel($event);
                         }
                     });
@@ -39248,7 +40269,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             if ($tree) {
                 const value = multiple ? [] : null;
                 $tree.clearCheckboxNode().then(() => {
-                    if (XEUtils.isBoolean(autoClose) ? autoClose : clearClosable) {
+                    if (XEUtils.isBoolean(clearClosable) ? clearClosable : autoClose) {
                         hideOptionPanel($event);
                     }
                 });
@@ -39335,7 +40356,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             if (!isDisabled) {
                 if (!reactData.visiblePanel) {
                     reactData.triggerFocusPanel = true;
-                    showOptionPanel();
+                    showOptionPanel(evnt);
                     setTimeout(() => {
                         reactData.triggerFocusPanel = false;
                     }, 150);
@@ -39379,7 +40400,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
                     hideOptionPanel($event);
                 }
                 else {
-                    showOptionPanel();
+                    showOptionPanel($event);
                 }
             }
         };