vxe-pc-ui 4.7.5 → 4.7.6

package/es/tree/src/tree.js

@@ -1,9 +1,11 @@
-import { ref, h, reactive, computed, watch, onUnmounted, nextTick } from 'vue';
+import { ref, h, reactive, computed, watch, onUnmounted, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { createEvent, getIcon, getConfig, useSize, renderEmptyElement } from '../../ui';
+import { getI18n, createEvent, getIcon, getConfig, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
+import { calcTreeLine } from './util';
+import { errLog } from '../../ui/src/log';
 import XEUtils from 'xe-utils';
 import { getSlotVNs } from '../../ui/src/vn';
-import { toCssUnit } from '../../ui/src/dom';
+import { toCssUnit, isScale, getPaddingTopBottomSize } from '../../ui/src/dom';
 import VxeLoadingComponent from '../../loading/src/loading';
 /**
  * 生成节点的唯一主键
@@ -15,7 +17,15 @@ export default defineVxeComponent({
     name: 'VxeTree',
     props: {
         data: Array,
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig().tree.autoResize
+        },
         height: [String, Number],
+        maxHeight: {
+            type: [String, Number],
+            default: () => getConfig().tree.maxHeight
+        },
         minHeight: {
             type: [String, Number],
             default: () => getConfig().tree.minHeight
@@ -107,10 +117,13 @@ export default defineVxeComponent({
             type: String,
             default: () => getConfig().tree.iconLoaded
         },
+        filterValue: [String, Number],
+        filterConfig: Object,
         size: {
             type: String,
             default: () => getConfig().tree.size || getConfig().size
-        }
+        },
+        virtualYConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -122,15 +135,27 @@ export default defineVxeComponent({
         'radio-change',
         'checkbox-change',
         'load-success',
-        'load-error'
+        'load-error',
+        'scroll'
     ],
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
         const refElem = ref();
+        const refHeaderWrapperElem = ref();
+        const refFooterWrapperElem = ref();
+        const refVirtualWrapper = ref();
+        const refVirtualBody = ref();
         const reactData = reactive({
+            parentHeight: 0,
+            customHeight: 0,
+            customMinHeight: 0,
+            customMaxHeight: 0,
             currentNode: null,
+            scrollYLoad: false,
+            bodyHeight: 0,
+            topSpaceHeight: 0,
             selectRadioKey: props.checkNodeKey,
             treeList: [],
             updateExpandedFlag: 1,
@@ -138,11 +163,26 @@ export default defineVxeComponent({
         });
         const internalData = {
             // initialized: false,
+            // lastFilterValue: '',
+            treeFullData: [],
+            afterTreeList: [],
+            afterVisibleList: [],
             nodeMaps: {},
             selectCheckboxMaps: {},
             indeterminateRowMaps: {},
             treeExpandedMaps: {},
-            treeExpandLazyLoadedMaps: {}
+            treeExpandLazyLoadedMaps: {},
+            lastScrollLeft: 0,
+            lastScrollTop: 0,
+            scrollYStore: {
+                startIndex: 0,
+                endIndex: 0,
+                visibleSize: 0,
+                offsetSize: 0,
+                rowHeight: 0
+            },
+            lastScrollTime: 0
+            // hpTimeout: undefined
         };
         const refMaps = {
             refElem
@@ -169,6 +209,9 @@ export default defineVxeComponent({
         const computeHasChildField = computed(() => {
             return props.hasChildField || 'hasChild';
         });
+        const computeVirtualYOpts = computed(() => {
+            return Object.assign({}, getConfig().tree.virtualYConfig, props.virtualYConfig);
+        });
         const computeIsRowCurrent = computed(() => {
             const nodeOpts = computeNodeOpts.value;
             const { isCurrent } = nodeOpts;
@@ -198,17 +241,25 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().tree.loadingConfig, props.loadingConfig);
         });
         const computeTreeStyle = computed(() => {
-            const { height, minHeight } = props;
+            const { customHeight, customMinHeight, customMaxHeight } = reactData;
             const stys = {};
-            if (height) {
-                stys.height = toCssUnit(height);
+            if (customHeight) {
+                stys.height = toCssUnit(customHeight);
+            }
+            if (customMinHeight) {
+                stys.minHeight = toCssUnit(customMinHeight);
             }
-            if (minHeight) {
-                stys.minHeight = toCssUnit(minHeight);
+            if (customMaxHeight) {
+                stys.maxHeight = toCssUnit(customMaxHeight);
             }
             return stys;
         });
+        const computeFilterOpts = computed(() => {
+            return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
+        });
         const computeMaps = {
+            computeChildrenField,
+            computeMapChildrenField,
             computeRadioOpts,
             computeCheckboxOpts,
             computeNodeOpts
@@ -341,6 +392,39 @@ export default defineVxeComponent({
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $tree: $xeTree }, params));
         };
+        const getParentElem = () => {
+            const el = refElem.value;
+            return el ? el.parentElement : null;
+        };
+        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.customMinHeight = calcTableHeight('minHeight');
+            reactData.customMaxHeight = calcTableHeight('maxHeight');
+            // 如果启用虚拟滚动，默认高度
+            if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
+                reactData.customHeight = 300;
+            }
+        };
         const createNode = (records) => {
             const valueField = computeValueField.value;
             return Promise.resolve(records.map(obj => {
@@ -353,352 +437,368 @@ export default defineVxeComponent({
                 return item;
             }));
         };
-        const treeMethods = {
-            dispatchEvent,
-            clearCurrentNode() {
-                reactData.currentNode = null;
-                return nextTick();
-            },
-            getCurrentNodeId() {
-                const { currentNode } = reactData;
-                if (currentNode) {
-                    return getNodeId(currentNode);
+        const cacheNodeMap = () => {
+            const { treeFullData } = internalData;
+            const valueField = computeValueField.value;
+            const childrenField = computeChildrenField.value;
+            const keyMaps = {};
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
+                let nodeid = getNodeId(item);
+                if (!nodeid) {
+                    nodeid = getNodeUniqueId();
+                    XEUtils.set(item, valueField, nodeid);
                 }
-                return null;
-            },
-            getCurrentNode() {
-                const { currentNode } = reactData;
-                const { nodeMaps } = internalData;
-                if (currentNode) {
-                    const nodeItem = nodeMaps[getNodeId(currentNode)];
-                    if (nodeItem) {
-                        return nodeItem.item;
-                    }
+                keyMaps[nodeid] = {
+                    item,
+                    index,
+                    items,
+                    parent,
+                    nodes,
+                    level: nodes.length,
+                    treeIndex: index,
+                    lineCount: 0,
+                    treeLoaded: false
+                };
+            }, { children: childrenField });
+            internalData.nodeMaps = keyMaps;
+        };
+        const updateAfterDataIndex = () => {
+            const { transform } = props;
+            const { afterTreeList, nodeMaps } = internalData;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            XEUtils.eachTree(afterTreeList, (item, index, items) => {
+                const nodeid = getNodeId(item);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items = items;
+                    nodeItem.treeIndex = index;
                 }
-                return null;
-            },
-            setCurrentNodeId(nodeKey) {
-                const { nodeMaps } = internalData;
-                const nodeItem = nodeMaps[nodeKey];
-                reactData.currentNode = nodeItem ? nodeItem.item : null;
-                return nextTick();
-            },
-            setCurrentNode(node) {
-                reactData.currentNode = node;
-                return nextTick();
-            },
-            clearRadioNode() {
-                reactData.selectRadioKey = null;
-                return nextTick();
-            },
-            getRadioNodeId() {
-                return reactData.selectRadioKey || null;
-            },
-            getRadioNode() {
-                const { selectRadioKey } = reactData;
-                const { nodeMaps } = internalData;
-                if (selectRadioKey) {
-                    const nodeItem = nodeMaps[selectRadioKey];
-                    if (nodeItem) {
-                        return nodeItem.item;
-                    }
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        items,
+                        parent,
+                        nodes: [],
+                        level: 0,
+                        treeIndex: index,
+                        lineCount: 0,
+                        treeLoaded: false
+                    };
+                    nodeMaps[nodeid] = rest;
                 }
-                return null;
-            },
-            setRadioNodeId(nodeKey) {
-                reactData.selectRadioKey = nodeKey;
-                return nextTick();
-            },
-            setRadioNode,
-            setCheckboxNode,
-            setCheckboxByNodeId,
-            getCheckboxNodeIds() {
-                const { selectCheckboxMaps } = internalData;
-                return Object.keys(selectCheckboxMaps);
-            },
-            getCheckboxNodes() {
-                const { nodeMaps, selectCheckboxMaps } = internalData;
-                const list = [];
-                XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
-                    const nodeItem = nodeMaps[nodeid];
-                    if (nodeItem) {
-                        list.push(nodeItem.item);
+            }, { children: transform ? mapChildrenField : childrenField });
+        };
+        const updateAfterFullData = () => {
+            const { transform, filterValue } = props;
+            const { treeFullData, lastFilterValue } = internalData;
+            const titleField = computeTitleField.value;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const filterOpts = computeFilterOpts.value;
+            const { autoExpandAll, beforeFilterMethod, filterMethod, afterFilterMethod } = filterOpts;
+            let fullList = treeFullData;
+            let treeList = fullList;
+            let filterStr = '';
+            if (filterValue || filterValue === 0) {
+                filterStr = `${filterValue}`;
+                const handleSearch = filterMethod
+                    ? (item) => {
+                        return filterMethod({
+                            $tree: $xeTree,
+                            node: item,
+                            filterValue: filterStr
+                        });
                     }
-                });
-                return list;
-            },
-            clearCheckboxNode() {
-                internalData.selectCheckboxMaps = {};
-                reactData.updateCheckboxFlag++;
-                return nextTick();
-            },
-            setAllCheckboxNode(checked) {
-                const { transform } = props;
-                const selectMaps = {};
-                const childrenField = computeChildrenField.value;
-                const mapChildrenField = computeMapChildrenField.value;
-                if (checked) {
-                    XEUtils.eachTree(reactData.treeList, (node) => {
-                        const nodeid = getNodeId(node);
-                        selectMaps[nodeid] = true;
-                    }, { children: transform ? mapChildrenField : childrenField });
+                    : (item) => {
+                        return String(item[titleField]).toLowerCase().indexOf(filterStr) > -1;
+                    };
+                const bafParams = { $tree: $xeTree, filterValue: filterStr };
+                if (beforeFilterMethod) {
+                    beforeFilterMethod(bafParams);
                 }
-                internalData.selectCheckboxMaps = selectMaps;
-                reactData.updateCheckboxFlag++;
-                return nextTick();
-            },
-            clearExpandNode() {
-                return treeMethods.clearAllExpandNode();
-            },
-            clearAllExpandNode() {
-                const { nodeMaps } = internalData;
-                XEUtils.each(nodeMaps, (nodeItem) => {
-                    nodeItem.treeLoaded = false;
-                });
-                internalData.treeExpandedMaps = {};
-                reactData.updateExpandedFlag++;
-                return nextTick();
-            },
-            setExpandByNodeId(nodeids, expanded) {
-                const { treeExpandedMaps } = internalData;
-                if (nodeids) {
-                    if (!XEUtils.isArray(nodeids)) {
-                        nodeids = [nodeids];
-                    }
-                    nodeids.forEach((nodeid) => {
-                        handleSetExpand(nodeid, expanded, treeExpandedMaps);
-                    });
-                    reactData.updateExpandedFlag++;
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, handleSearch, { children: childrenField, mapChildren: mapChildrenField, isEvery: true });
+                    fullList = treeList;
                 }
-                return nextTick();
-            },
-            getExpandNodeIds() {
-                const { treeExpandedMaps } = internalData;
-                return XEUtils.keys(treeExpandedMaps);
-            },
-            getExpandNodes() {
-                const { nodeMaps, treeExpandedMaps } = internalData;
-                const list = [];
-                XEUtils.each(treeExpandedMaps, (item, nodeid) => {
-                    const nodeItem = nodeMaps[nodeid];
-                    if (nodeItem) {
-                        list.push(nodeItem.item);
+                else {
+                    fullList = treeFullData.filter(handleSearch);
+                }
+                internalData.lastFilterValue = filterStr;
+                nextTick(() => {
+                    // 筛选时自动展开
+                    if (autoExpandAll) {
+                        $xeTree.setAllExpandNode(true).then(() => {
+                            if (afterFilterMethod) {
+                                afterFilterMethod(bafParams);
+                            }
+                        });
+                    }
+                    else {
+                        if (afterFilterMethod) {
+                            afterFilterMethod(bafParams);
+                        }
                     }
                 });
-                return list;
-            },
-            setExpandNode(nodes, expanded) {
-                const { treeExpandedMaps } = internalData;
-                if (nodes) {
-                    if (!XEUtils.isArray(nodes)) {
-                        nodes = [nodes];
+            }
+            else {
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, () => true, { children: childrenField, mapChildren: mapChildrenField, isEvery: true });
+                    fullList = treeList;
+                    if (lastFilterValue) {
+                        const bafParams = { $tree: $xeTree, filterValue: filterStr };
+                        if (beforeFilterMethod) {
+                            beforeFilterMethod(bafParams);
+                        }
+                        // 取消筛选时自动收起
+                        nextTick(() => {
+                            if (autoExpandAll) {
+                                $xeTree.clearAllExpandNode().then(() => {
+                                    if (afterFilterMethod) {
+                                        afterFilterMethod(bafParams);
+                                    }
+                                });
+                            }
+                            else {
+                                if (afterFilterMethod) {
+                                    afterFilterMethod(bafParams);
+                                }
+                            }
+                        });
                     }
-                    nodes.forEach((node) => {
-                        const nodeid = getNodeId(node);
-                        handleSetExpand(nodeid, expanded, treeExpandedMaps);
-                    });
-                    reactData.updateExpandedFlag++;
                 }
-                return nextTick();
-            },
-            toggleExpandByNodeId(nodeids) {
-                const { treeExpandedMaps } = internalData;
-                if (nodeids) {
-                    if (!XEUtils.isArray(nodeids)) {
-                        nodeids = [nodeids];
+                internalData.lastFilterValue = '';
+            }
+            internalData.afterVisibleList = fullList;
+            internalData.afterTreeList = treeList;
+            updateAfterDataIndex();
+        };
+        /**
+         * 如果为虚拟树、则将树结构拍平
+         */
+        const handleTreeToList = () => {
+            const { transform } = props;
+            const { afterTreeList, treeExpandedMaps } = internalData;
+            const mapChildrenField = computeMapChildrenField.value;
+            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);
                     }
-                    nodeids.forEach((nodeid) => {
-                        handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
-                    });
-                    reactData.updateExpandedFlag++;
+                }, { children: mapChildrenField });
+                updateScrollYStatus(fullData);
+                internalData.afterVisibleList = fullData;
+                return fullData;
+            }
+            return internalData.afterVisibleList;
+        };
+        const handleData = (force) => {
+            const { scrollYLoad } = reactData;
+            const { scrollYStore } = internalData;
+            let fullList = internalData.afterVisibleList;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                updateAfterFullData();
+                // 如果为虚拟树，将树结构拍平
+                fullList = handleTreeToList();
+            }
+            const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0);
+            reactData.treeList = treeList;
+        };
+        const triggerSearchEvent = XEUtils.debounce(() => handleData(true), 350, { trailing: true });
+        const loadData = (list) => {
+            const { expandAll, transform } = props;
+            const { initialized, scrollYStore } = internalData;
+            const keyField = computeKeyField.value;
+            const parentField = computeParentField.value;
+            const childrenField = computeChildrenField.value;
+            const fullData = transform ? XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: childrenField }) : list ? list.slice(0) : [];
+            internalData.treeFullData = fullData;
+            Object.assign(scrollYStore, {
+                startIndex: 0,
+                endIndex: 1,
+                visibleSize: 0
+            });
+            const sYLoad = updateScrollYStatus(fullData);
+            cacheNodeMap();
+            handleData(true);
+            if (sYLoad) {
+                if (!(props.height || props.maxHeight)) {
+                    errLog('vxe.error.reqProp', ['height | max-height | virtual-y-config.enabled=false']);
                 }
-                return nextTick();
-            },
-            toggleExpandNode(nodes) {
-                const { treeExpandedMaps } = internalData;
-                if (nodes) {
-                    if (!XEUtils.isArray(nodes)) {
-                        nodes = [nodes];
+            }
+            return computeScrollLoad().then(() => {
+                if (!initialized) {
+                    if (list && list.length) {
+                        internalData.initialized = true;
+                        if (expandAll) {
+                            $xeTree.setAllExpandNode(true);
+                        }
+                        $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
                     }
-                    nodes.forEach((node) => {
-                        const nodeid = getNodeId(node);
-                        handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
-                    });
-                    reactData.updateExpandedFlag++;
                 }
-                return nextTick();
-            },
-            setAllExpandNode(expanded) {
-                const { transform } = props;
-                const { treeExpandedMaps } = internalData;
-                const childrenField = computeChildrenField.value;
-                const mapChildrenField = computeMapChildrenField.value;
-                if (expanded) {
-                    XEUtils.eachTree(reactData.treeList, (node) => {
-                        const childList = XEUtils.get(node, childrenField);
-                        const hasChild = childList && childList.length;
-                        if (hasChild) {
-                            const nodeid = getNodeId(node);
-                            treeExpandedMaps[nodeid] = true;
-                        }
-                    }, { children: transform ? mapChildrenField : childrenField });
+                updateHeight();
+                refreshScroll();
+            });
+        };
+        const updateScrollYStatus = (fullData) => {
+            const { transform } = props;
+            const virtualYOpts = computeVirtualYOpts.value;
+            const allList = fullData || internalData.treeFullData;
+            // 如果gt为0，则总是启用
+            const scrollYLoad = !!transform && !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length);
+            reactData.scrollYLoad = scrollYLoad;
+            return scrollYLoad;
+        };
+        const updateYSpace = () => {
+            const { scrollYLoad } = reactData;
+            const { scrollYStore, afterVisibleList } = internalData;
+            reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
+            reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+        };
+        const updateYData = () => {
+            handleData();
+            updateYSpace();
+        };
+        const computeScrollLoad = () => {
+            return nextTick().then(() => {
+                const { scrollYLoad } = reactData;
+                const { scrollYStore } = internalData;
+                const virtualBodyElem = refVirtualBody.value;
+                const virtualYOpts = computeVirtualYOpts.value;
+                let rowHeight = 0;
+                let firstItemElem;
+                if (virtualBodyElem) {
+                    if (!firstItemElem) {
+                        firstItemElem = virtualBodyElem.children[0];
+                    }
                 }
-                else {
-                    internalData.treeExpandedMaps = {};
+                if (firstItemElem) {
+                    rowHeight = firstItemElem.offsetHeight;
                 }
-                reactData.updateExpandedFlag++;
-                return nextTick();
-            },
-            reloadExpandNode(node) {
-                const { lazy } = props;
-                if (lazy) {
-                    treeMethods.clearExpandLoaded(node);
-                    return handleAsyncTreeExpandChilds(node);
+                rowHeight = Math.max(20, rowHeight);
+                scrollYStore.rowHeight = rowHeight;
+                // 计算 Y 逻辑
+                if (scrollYLoad) {
+                    const scrollBodyElem = refVirtualWrapper.value;
+                    const visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
+                    const offsetYSize = Math.max(0, Math.min(2, XEUtils.toNumber(virtualYOpts.oSize)));
+                    scrollYStore.offsetSize = offsetYSize;
+                    scrollYStore.visibleSize = visibleYSize;
+                    scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
+                    updateYData();
                 }
-                return nextTick();
-            },
-            clearExpandLoaded(node) {
-                const { lazy } = props;
-                const { nodeMaps } = internalData;
-                if (lazy) {
-                    const nodeItem = nodeMaps[getNodeId(node)];
-                    if (nodeItem) {
-                        nodeItem.treeLoaded = false;
-                    }
+                else {
+                    updateYSpace();
                 }
-                return nextTick();
-            },
-            /**
-             * 用于树结构，给行数据加载子节点
-             */
-            loadChildrenNode(node, childRecords) {
-                const { lazy, transform } = props;
-                const { nodeMaps } = internalData;
-                if (!lazy) {
-                    return Promise.resolve([]);
+            });
+        };
+        /**
+         * 如果有滚动条，则滚动到对应的位置
+         * @param {Number} scrollLeft 左距离
+         * @param {Number} scrollTop 上距离
+         */
+        const scrollTo = (scrollLeft, scrollTop) => {
+            const scrollBodyElem = refVirtualWrapper.value;
+            if (scrollBodyElem) {
+                if (XEUtils.isNumber(scrollLeft)) {
+                    scrollBodyElem.scrollLeft = scrollLeft;
                 }
-                const childrenField = computeChildrenField.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: node,
-                            itemIndex: -1,
-                            items,
-                            parent: parent || parentNodeItem.item,
-                            nodes: parentNodes.concat(nodes),
-                            level: parentLevel + nodes.length,
-                            lineCount: 0,
-                            treeLoaded: false
-                        };
-                    }, { children: childrenField });
-                    node[childrenField] = nodeList;
-                    if (transform) {
-                        node[childrenField] = nodeList;
-                    }
-                    updateNodeLine(node);
-                    return nodeList;
-                });
-            },
-            isExpandByNode,
-            isCheckedByRadioNodeId,
-            isCheckedByRadioNode,
-            isCheckedByCheckboxNodeId,
-            isIndeterminateByCheckboxNode,
-            isCheckedByCheckboxNode,
-            getCheckboxIndeterminateNodes() {
-                const { nodeMaps, indeterminateRowMaps } = internalData;
-                const list = [];
-                XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
-                    const nodeItem = nodeMaps[nodeid];
-                    if (nodeItem) {
-                        list.push(nodeItem.item);
-                    }
+                if (XEUtils.isNumber(scrollTop)) {
+                    scrollBodyElem.scrollTop = scrollTop;
+                }
+            }
+            if (reactData.scrollYLoad) {
+                return new Promise(resolve => {
+                    setTimeout(() => {
+                        nextTick(() => {
+                            resolve();
+                        });
+                    }, 50);
                 });
-                return list;
             }
+            return nextTick();
         };
-        const cacheNodeMap = () => {
-            const { transform } = props;
-            const { treeList } = reactData;
-            const valueField = computeValueField.value;
-            const childrenField = computeChildrenField.value;
-            const mapChildrenField = computeMapChildrenField.value;
-            const keyMaps = {};
-            XEUtils.eachTree(treeList, (item, itemIndex, items, path, parent, nodes) => {
-                let nodeid = getNodeId(item);
-                if (!nodeid) {
-                    nodeid = getNodeUniqueId();
-                    XEUtils.set(item, valueField, nodeid);
+        /**
+         * 刷新滚动条
+         */
+        const refreshScroll = () => {
+            const { lastScrollLeft, lastScrollTop } = internalData;
+            return clearScroll().then(() => {
+                if (lastScrollLeft || lastScrollTop) {
+                    internalData.lastScrollLeft = 0;
+                    internalData.lastScrollTop = 0;
+                    return scrollTo(lastScrollLeft, lastScrollTop);
                 }
-                keyMaps[nodeid] = {
-                    item,
-                    itemIndex,
-                    items,
-                    parent,
-                    nodes,
-                    level: nodes.length,
-                    lineCount: 0,
-                    treeLoaded: false
-                };
-            }, { children: transform ? mapChildrenField : childrenField });
-            internalData.nodeMaps = keyMaps;
+            });
         };
-        const loadTreeData = (list) => {
-            const { expandAll, transform } = props;
-            const { initialized } = internalData;
-            const keyField = computeKeyField.value;
-            const parentField = computeParentField.value;
-            const mapChildrenField = computeMapChildrenField.value;
-            if (transform) {
-                reactData.treeList = XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: mapChildrenField });
-            }
-            else {
-                reactData.treeList = list ? list.slice(0) : [];
+        /**
+         * 重新计算列表
+         */
+        const recalculate = () => {
+            const { scrollYStore } = internalData;
+            const { rowHeight } = scrollYStore;
+            const el = refElem.value;
+            if (el && el.clientWidth && el.clientHeight) {
+                const parentEl = getParentElem();
+                const headerWrapperEl = refHeaderWrapperElem.value;
+                const footerWrapperEl = refFooterWrapperElem.value;
+                const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0;
+                const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0;
+                if (parentEl) {
+                    const parentPaddingSize = getPaddingTopBottomSize(parentEl);
+                    reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
+                }
+                updateHeight();
+                return computeScrollLoad();
             }
-            cacheNodeMap();
-            if (!initialized) {
-                if (list && list.length) {
-                    internalData.initialized = true;
-                    if (expandAll) {
-                        $xeTree.setAllExpandNode(true);
-                    }
-                    $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
+            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 handleCountLine = (item, isRoot, nodeItem) => {
-            const { treeExpandedMaps } = internalData;
-            const childrenField = computeChildrenField.value;
-            const nodeid = getNodeId(item);
-            nodeItem.lineCount++;
-            if (treeExpandedMaps[nodeid]) {
-                XEUtils.arrayEach(item[childrenField], (childItem, childIndex, childList) => {
-                    if (!isRoot || childIndex < childList.length - 1) {
-                        handleCountLine(childItem, false, nodeItem);
-                    }
-                });
+        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);
             }
+            internalData.lastScrollTime = Date.now();
+            dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt);
         };
-        const updateNodeLine = (node) => {
-            const { nodeMaps } = internalData;
-            if (node) {
-                const nodeid = getNodeId(node);
-                const nodeItem = nodeMaps[nodeid];
-                if (nodeItem) {
-                    XEUtils.lastArrayEach(nodeItem.nodes, childItem => {
-                        const nodeid = getNodeId(childItem);
-                        const nodeItem = nodeMaps[nodeid];
-                        if (nodeItem) {
-                            nodeItem.lineCount = 0;
-                            handleCountLine(childItem, true, nodeItem);
-                        }
-                    });
-                }
+        const clearScroll = () => {
+            const scrollBodyElem = refVirtualWrapper.value;
+            if (scrollBodyElem) {
+                scrollBodyElem.scrollTop = 0;
+                scrollBodyElem.scrollLeft = 0;
             }
+            internalData.lastScrollTop = 0;
+            internalData.lastScrollLeft = 0;
+            return nextTick();
         };
         const handleNodeClickEvent = (evnt, node) => {
             const { showRadio, showCheckbox, trigger } = props;
@@ -763,13 +863,11 @@ export default defineVxeComponent({
                                 if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
                                     handleCheckedCheckboxNode(childRows, true);
                                 }
-                                updateNodeLine(node);
                                 dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
                                 return nextTick();
                             });
                         }
                         else {
-                            updateNodeLine(node);
                             dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
                         }
                     }).catch((e) => {
@@ -778,10 +876,11 @@ export default defineVxeComponent({
                         if (treeExpandLazyLoadedMaps[nodeid]) {
                             treeExpandLazyLoadedMaps[nodeid] = false;
                         }
-                        updateNodeLine(node);
                         dispatchEvent('load-error', { node, data: e }, new Event('load-error'));
                     }).finally(() => {
-                        return nextTick();
+                        handleTreeToList();
+                        handleData();
+                        return recalculate();
                     });
                 }
                 else {
@@ -847,8 +946,9 @@ export default defineVxeComponent({
                 });
             }
             reactData.updateExpandedFlag++;
-            expandNodes.forEach(updateNodeLine);
-            return Promise.all(result);
+            handleTreeToList();
+            handleData();
+            return Promise.all(result).then(() => recalculate());
         };
         const toggleExpandEvent = (evnt, node) => {
             const { lazy } = props;
@@ -862,8 +962,7 @@ export default defineVxeComponent({
         };
         const updateCheckboxStatus = () => {
             const { transform } = props;
-            const { treeList } = reactData;
-            const { selectCheckboxMaps, indeterminateRowMaps } = internalData;
+            const { selectCheckboxMaps, indeterminateRowMaps, afterTreeList } = internalData;
             const childrenField = computeChildrenField.value;
             const mapChildrenField = computeMapChildrenField.value;
             const checkboxOpts = computeCheckboxOpts.value;
@@ -871,7 +970,7 @@ export default defineVxeComponent({
             if (!checkStrictly) {
                 const childRowMaps = {};
                 const childRowList = [];
-                XEUtils.eachTree(treeList, (node) => {
+                XEUtils.eachTree(afterTreeList, (node) => {
                     const nodeid = getNodeId(node);
                     const childList = node[childrenField];
                     if (childList && childList.length && !childRowMaps[nodeid]) {
@@ -885,12 +984,13 @@ export default defineVxeComponent({
                     const childList = vals[2];
                     let sLen = 0; // 已选
                     let hLen = 0; // 半选
-                    let vLen = 0; // 有效行
+                    let vLen = 0; // 有效子行
+                    const cLen = childList.length; // 子行
                     childList.forEach(checkMethod
                         ? (item) => {
                             const childNodeid = getNodeId(item);
                             const isSelect = selectCheckboxMaps[childNodeid];
-                            if (checkMethod({ node: item })) {
+                            if (checkMethod({ $tree: $xeTree, node: item })) {
                                 if (isSelect) {
                                     sLen++;
                                 }
@@ -919,8 +1019,29 @@ export default defineVxeComponent({
                             }
                             vLen++;
                         });
-                    const isSelected = sLen >= vLen;
-                    const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
+                    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 {
+                        // 如果无子项
+                        isSelected = selectCheckboxMaps[nodeid];
+                    }
+                    const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
                     if (isSelected) {
                         selectCheckboxMaps[nodeid] = node;
                         if (indeterminateRowMaps[nodeid]) {
@@ -955,7 +1076,7 @@ export default defineVxeComponent({
             const { checkStrictly, checkMethod } = checkboxOpts;
             let isDisabled = !!checkMethod;
             if (checkMethod) {
-                isDisabled = !checkMethod({ node });
+                isDisabled = !checkMethod({ $tree: $xeTree, node });
             }
             if (isDisabled) {
                 return;
@@ -970,7 +1091,7 @@ export default defineVxeComponent({
                 selectCheckboxMaps[nodeid] = node;
             }
             if (!checkStrictly) {
-                XEUtils.eachTree(XEUtils.get(node, childrenField), (childNode) => {
+                XEUtils.eachTree(XEUtils.get(node, transform ? mapChildrenField : childrenField), (childNode) => {
                     const childNodeid = getNodeId(childNode);
                     if (isChecked) {
                         if (!selectCheckboxMaps[childNodeid]) {
@@ -1025,7 +1146,7 @@ export default defineVxeComponent({
             const { checkMethod } = radioOpts;
             let isDisabled = !!checkMethod;
             if (checkMethod) {
-                isDisabled = !checkMethod({ node });
+                isDisabled = !checkMethod({ $tree: $xeTree, node });
             }
             if (isDisabled) {
                 return;
@@ -1036,17 +1157,322 @@ export default defineVxeComponent({
             emitRadioMode(value);
             dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
         };
+        const handleGlobalResizeEvent = () => {
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return;
+            }
+            recalculate();
+        };
+        const treeMethods = {
+            dispatchEvent,
+            getNodeId,
+            loadData(data) {
+                return loadData(data || []);
+            },
+            reloadData(data) {
+                return loadData(data || []);
+            },
+            clearCurrentNode() {
+                reactData.currentNode = null;
+                return nextTick();
+            },
+            getCurrentNodeId() {
+                const { currentNode } = reactData;
+                if (currentNode) {
+                    return getNodeId(currentNode);
+                }
+                return null;
+            },
+            getCurrentNode() {
+                const { currentNode } = reactData;
+                const { nodeMaps } = internalData;
+                if (currentNode) {
+                    const nodeItem = nodeMaps[getNodeId(currentNode)];
+                    if (nodeItem) {
+                        return nodeItem.item;
+                    }
+                }
+                return null;
+            },
+            setCurrentNodeId(nodeKey) {
+                const { nodeMaps } = internalData;
+                const nodeItem = nodeMaps[nodeKey];
+                reactData.currentNode = nodeItem ? nodeItem.item : null;
+                return nextTick();
+            },
+            setCurrentNode(node) {
+                reactData.currentNode = node;
+                return nextTick();
+            },
+            clearRadioNode() {
+                reactData.selectRadioKey = null;
+                return nextTick();
+            },
+            getRadioNodeId() {
+                return reactData.selectRadioKey || null;
+            },
+            getRadioNode() {
+                const { selectRadioKey } = reactData;
+                const { nodeMaps } = internalData;
+                if (selectRadioKey) {
+                    const nodeItem = nodeMaps[selectRadioKey];
+                    if (nodeItem) {
+                        return nodeItem.item;
+                    }
+                }
+                return null;
+            },
+            setRadioNodeId(nodeKey) {
+                reactData.selectRadioKey = nodeKey;
+                return nextTick();
+            },
+            setRadioNode,
+            setCheckboxNode,
+            setCheckboxByNodeId,
+            getCheckboxNodeIds() {
+                const { selectCheckboxMaps } = internalData;
+                return Object.keys(selectCheckboxMaps);
+            },
+            getCheckboxNodes() {
+                const { nodeMaps, selectCheckboxMaps } = internalData;
+                const list = [];
+                XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        list.push(nodeItem.item);
+                    }
+                });
+                return list;
+            },
+            clearCheckboxNode() {
+                internalData.selectCheckboxMaps = {};
+                reactData.updateCheckboxFlag++;
+                return nextTick().then(() => {
+                    return { checkNodeKeys: [] };
+                });
+            },
+            setAllCheckboxNode(checked) {
+                const { transform } = props;
+                const selectMaps = {};
+                const childrenField = computeChildrenField.value;
+                const mapChildrenField = computeMapChildrenField.value;
+                const checkKeys = [];
+                if (checked) {
+                    XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                        const nodeid = getNodeId(node);
+                        checkKeys.push(nodeid);
+                        selectMaps[nodeid] = true;
+                    }, { children: transform ? mapChildrenField : childrenField });
+                }
+                internalData.selectCheckboxMaps = selectMaps;
+                reactData.updateCheckboxFlag++;
+                return nextTick().then(() => {
+                    return { checkNodeKeys: checkKeys };
+                });
+            },
+            clearExpandNode() {
+                return treeMethods.clearAllExpandNode();
+            },
+            clearAllExpandNode() {
+                const { nodeMaps } = internalData;
+                XEUtils.each(nodeMaps, (nodeItem) => {
+                    nodeItem.treeLoaded = false;
+                });
+                internalData.treeExpandedMaps = {};
+                reactData.updateExpandedFlag++;
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            setExpandByNodeId(nodeids, expanded) {
+                const { treeExpandedMaps } = internalData;
+                if (nodeids) {
+                    if (!XEUtils.isArray(nodeids)) {
+                        nodeids = [nodeids];
+                    }
+                    nodeids.forEach((nodeid) => {
+                        handleSetExpand(nodeid, expanded, treeExpandedMaps);
+                    });
+                    reactData.updateExpandedFlag++;
+                }
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            getExpandNodeIds() {
+                const { treeExpandedMaps } = internalData;
+                return XEUtils.keys(treeExpandedMaps);
+            },
+            getExpandNodes() {
+                const { nodeMaps, treeExpandedMaps } = internalData;
+                const list = [];
+                XEUtils.each(treeExpandedMaps, (item, nodeid) => {
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        list.push(nodeItem.item);
+                    }
+                });
+                return list;
+            },
+            setExpandNode(nodes, expanded) {
+                const { treeExpandedMaps } = internalData;
+                if (nodes) {
+                    if (!XEUtils.isArray(nodes)) {
+                        nodes = [nodes];
+                    }
+                    nodes.forEach((node) => {
+                        const nodeid = getNodeId(node);
+                        handleSetExpand(nodeid, expanded, treeExpandedMaps);
+                    });
+                    reactData.updateExpandedFlag++;
+                }
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            toggleExpandByNodeId(nodeids) {
+                const { treeExpandedMaps } = internalData;
+                if (nodeids) {
+                    if (!XEUtils.isArray(nodeids)) {
+                        nodeids = [nodeids];
+                    }
+                    nodeids.forEach((nodeid) => {
+                        handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+                    });
+                    reactData.updateExpandedFlag++;
+                }
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            toggleExpandNode(nodes) {
+                const { treeExpandedMaps } = internalData;
+                if (nodes) {
+                    if (!XEUtils.isArray(nodes)) {
+                        nodes = [nodes];
+                    }
+                    nodes.forEach((node) => {
+                        const nodeid = getNodeId(node);
+                        handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+                    });
+                    reactData.updateExpandedFlag++;
+                }
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            setAllExpandNode(expanded) {
+                const { transform } = props;
+                const { treeExpandedMaps } = internalData;
+                const childrenField = computeChildrenField.value;
+                const mapChildrenField = computeMapChildrenField.value;
+                if (expanded) {
+                    XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                        const childList = XEUtils.get(node, childrenField);
+                        const hasChild = childList && childList.length;
+                        if (hasChild) {
+                            const nodeid = getNodeId(node);
+                            treeExpandedMaps[nodeid] = true;
+                        }
+                    }, { children: transform ? mapChildrenField : childrenField });
+                }
+                else {
+                    internalData.treeExpandedMaps = {};
+                }
+                reactData.updateExpandedFlag++;
+                handleTreeToList();
+                handleData();
+                return recalculate();
+            },
+            reloadExpandNode(node) {
+                const { lazy } = props;
+                if (lazy) {
+                    treeMethods.clearExpandLoaded(node);
+                    return handleAsyncTreeExpandChilds(node);
+                }
+                return recalculate();
+            },
+            clearExpandLoaded(node) {
+                const { lazy } = props;
+                const { nodeMaps } = internalData;
+                if (lazy) {
+                    const nodeItem = nodeMaps[getNodeId(node)];
+                    if (nodeItem) {
+                        nodeItem.treeLoaded = false;
+                    }
+                }
+                return recalculate();
+            },
+            /**
+             * 用于树结构，给行数据加载子节点
+             */
+            loadChildrenNode(node, childRecords) {
+                const { lazy, transform } = props;
+                const { nodeMaps } = internalData;
+                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: node,
+                            index: -1,
+                            items,
+                            parent: parent || parentNodeItem.item,
+                            nodes: parentNodes.concat(nodes),
+                            level: parentLevel + nodes.length,
+                            treeIndex: -1,
+                            lineCount: 0,
+                            treeLoaded: false
+                        };
+                    }, { children: childrenField });
+                    node[childrenField] = nodeList;
+                    if (transform) {
+                        node[mapChildrenField] = nodeList;
+                    }
+                    updateAfterDataIndex();
+                    return nodeList;
+                });
+            },
+            isExpandByNode,
+            isCheckedByRadioNodeId,
+            isCheckedByRadioNode,
+            isCheckedByCheckboxNodeId,
+            isIndeterminateByCheckboxNode,
+            isCheckedByCheckboxNode,
+            getCheckboxIndeterminateNodes() {
+                const { nodeMaps, indeterminateRowMaps } = internalData;
+                const list = [];
+                XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        list.push(nodeItem.item);
+                    }
+                });
+                return list;
+            },
+            recalculate,
+            scrollTo,
+            clearScroll
+        };
         const treePrivateMethods = {};
         Object.assign($xeTree, treeMethods, treePrivateMethods);
         const renderRadio = (node, nodeid, isChecked) => {
             const { showRadio } = props;
             const radioOpts = computeRadioOpts.value;
             const { showIcon, checkMethod, visibleMethod } = radioOpts;
-            const isVisible = !visibleMethod || visibleMethod({ node });
+            const isVisible = !visibleMethod || visibleMethod({ $tree: $xeTree, node });
             let isDisabled = !!checkMethod;
             if (showRadio && showIcon && isVisible) {
                 if (checkMethod) {
-                    isDisabled = !checkMethod({ node });
+                    isDisabled = !checkMethod({ $tree: $xeTree, node });
                 }
                 return h('div', {
                     class: ['vxe-tree--radio-option', {
@@ -1071,11 +1497,11 @@ export default defineVxeComponent({
             const checkboxOpts = computeCheckboxOpts.value;
             const { showIcon, checkMethod, visibleMethod } = checkboxOpts;
             const isIndeterminate = isIndeterminateByCheckboxNodeid(nodeid);
-            const isVisible = !visibleMethod || visibleMethod({ node });
+            const isVisible = !visibleMethod || visibleMethod({ $tree: $xeTree, node });
             let isDisabled = !!checkMethod;
             if (showCheckbox && showIcon && isVisible) {
                 if (checkMethod) {
-                    isDisabled = !checkMethod({ node });
+                    isDisabled = !checkMethod({ $tree: $xeTree, node });
                 }
                 return h('div', {
                     class: ['vxe-tree--checkbox-option', {
@@ -1096,10 +1522,10 @@ export default defineVxeComponent({
             }
             return renderEmptyElement($xeTree);
         };
-        const renderNode = (node) => {
+        const renderNode = (node, nodeid) => {
             const { lazy, showRadio, showCheckbox, showLine, indent, iconOpen, iconClose, iconLoaded, showIcon } = props;
             const { currentNode, selectRadioKey, updateExpandedFlag } = reactData;
-            const { nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
+            const { afterTreeList, nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
             const childrenField = computeChildrenField.value;
             const titleField = computeTitleField.value;
             const hasChildField = computeHasChildField.value;
@@ -1108,30 +1534,13 @@ export default defineVxeComponent({
             const iconSlot = slots.icon;
             const titleSlot = slots.title;
             const extraSlot = slots.extra;
-            const nodeid = getNodeId(node);
             const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
             const nodeItem = nodeMaps[nodeid];
             const nodeValue = XEUtils.get(node, titleField);
-            const childVns = [];
-            if (hasChild && treeExpandedMaps[nodeid]) {
-                if (showLine) {
-                    childVns.push(h('div', {
-                        key: 'line',
-                        class: 'vxe-tree--node-child-line',
-                        style: {
-                            height: `calc(${nodeItem.lineCount} * var(--vxe-ui-tree-node-height) - var(--vxe-ui-tree-node-height) / 2)`,
-                            left: `${(nodeItem.level + 1) * (indent || 1)}px`
-                        }
-                    }));
-                }
-                childList.forEach(childItem => {
-                    childVns.push(renderNode(childItem));
-                });
-            }
+            const nLevel = nodeItem.level;
             let isRadioChecked = false;
             if (showRadio) {
-                // eslint-disable-next-line eqeqeq
-                isRadioChecked = nodeid == selectRadioKey;
+                isRadioChecked = nodeid === String(selectRadioKey);
             }
             let isCheckboxChecked = false;
             if (showCheckbox) {
@@ -1145,8 +1554,11 @@ export default defineVxeComponent({
                 hasLazyChilds = node[hasChildField];
                 isLazyLoaded = !!nodeItem.treeLoaded;
             }
+            const prevNode = nodeItem.items[nodeItem.treeIndex - 1];
+            const nParams = { node, isExpand };
             return h('div', {
-                class: ['vxe-tree--node-wrapper', `node--level-${nodeItem.level}`],
+                key: nodeid,
+                class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
                 nodeid
             }, [
                 h('div', {
@@ -1156,7 +1568,7 @@ export default defineVxeComponent({
                             'is-checkbox--checked': isCheckboxChecked
                         }],
                     style: {
-                        paddingLeft: `${(nodeItem.level - 1) * (indent || 1)}px`
+                        paddingLeft: `${(nLevel - 1) * (indent || 1)}px`
                     },
                     onClick(evnt) {
                         handleNodeClickEvent(evnt, node);
@@ -1165,26 +1577,36 @@ export default defineVxeComponent({
                         handleNodeDblclickEvent(evnt, node);
                     }
                 }, [
-                    showIcon || showLine
+                    showLine
                         ? h('div', {
-                            class: 'vxe-tree--node-item-switcher'
-                        }, showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
-                            ? [
-                                h('div', {
-                                    class: 'vxe-tree--node-item-icon',
-                                    onClick(evnt) {
-                                        toggleExpandEvent(evnt, node);
-                                    }
-                                }, iconSlot
-                                    ? iconSlot({ node, isExpand })
-                                    : [
-                                        h('i', {
-                                            class: isLazyLoading ? (iconLoaded || getIcon().TREE_NODE_LOADED) : (isExpand ? (iconOpen || getIcon().TREE_NODE_OPEN) : (iconClose || getIcon().TREE_NODE_CLOSE))
-                                        })
-                                    ])
-                            ]
-                            : [])
+                            class: 'vxe-tree--node-line-wrapper'
+                        }, [
+                            h('div', {
+                                class: 'vxe-tree--node-line',
+                                style: {
+                                    height: `${getNodeId(afterTreeList[0]) === nodeid ? 1 : calcTreeLine($xeTree, node, prevNode)}px`
+                                }
+                            })
+                        ])
                         : renderEmptyElement($xeTree),
+                    h('div', {
+                        class: 'vxe-tree--node-item-switcher'
+                    }, showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
+                        ? [
+                            h('div', {
+                                class: 'vxe-tree--node-item-icon',
+                                onClick(evnt) {
+                                    toggleExpandEvent(evnt, node);
+                                }
+                            }, iconSlot
+                                ? getSlotVNs(iconSlot(nParams))
+                                : [
+                                    h('i', {
+                                        class: isLazyLoading ? (iconLoaded || getIcon().TREE_NODE_LOADED) : (isExpand ? (iconOpen || getIcon().TREE_NODE_OPEN) : (iconClose || getIcon().TREE_NODE_CLOSE))
+                                    })
+                                ])
+                        ]
+                        : []),
                     renderRadio(node, nodeid, isRadioChecked),
                     renderCheckbox(node, nodeid, isCheckboxChecked),
                     h('div', {
@@ -1192,36 +1614,56 @@ export default defineVxeComponent({
                     }, [
                         h('div', {
                             class: 'vxe-tree--node-item-title'
-                        }, titleSlot ? getSlotVNs(titleSlot({ node, isExpand })) : `${nodeValue}`),
+                        }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeValue}`),
                         extraSlot
                             ? h('div', {
                                 class: 'vxe-tree--node-item-extra'
-                            }, getSlotVNs(extraSlot({ node, isExpand })))
+                            }, getSlotVNs(extraSlot(nParams)))
                             : renderEmptyElement($xeTree)
                     ])
-                ]),
-                hasChild && treeExpandedMaps[nodeid]
-                    ? h('div', {
-                        class: 'vxe-tree--node-child-wrapper'
-                    }, childVns)
-                    : renderEmptyElement($xeTree)
+                ])
             ]);
         };
-        const renderNodeList = () => {
-            const { treeList } = reactData;
-            return h('div', {
-                class: 'vxe-tree--node-list-wrapper'
-            }, treeList.map(node => renderNode(node)));
+        const renderList = (treeList) => {
+            const { transform } = props;
+            const { treeExpandedMaps } = internalData;
+            const childrenField = computeChildrenField.value;
+            if (!treeList.length) {
+                return [
+                    h('div', {
+                        class: 'vxe-tree--empty-placeholder'
+                    }, getI18n('vxe.tree.searchEmpty'))
+                ];
+            }
+            const nodeVNs = [];
+            treeList.forEach(transform
+                ? (node) => {
+                    const nodeid = getNodeId(node);
+                    nodeVNs.push(renderNode(node, nodeid));
+                }
+                : (node) => {
+                    const nodeid = getNodeId(node);
+                    nodeVNs.push(renderNode(node, nodeid));
+                    const childList = XEUtils.get(node, childrenField);
+                    const hasChild = childList && childList.length;
+                    if (hasChild && treeExpandedMaps[nodeid]) {
+                        nodeVNs.push(...renderList(childList));
+                    }
+                });
+            return nodeVNs;
         };
         const renderVN = () => {
             const { loading, trigger, showLine } = props;
+            const { bodyHeight, topSpaceHeight, treeList } = reactData;
             const vSize = computeSize.value;
             const radioOpts = computeRadioOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
-            const treeStyle = computeTreeStyle.value;
             const loadingOpts = computeLoadingOpts.value;
             const isRowHover = computeIsRowHover.value;
+            const treeStyle = computeTreeStyle.value;
             const loadingSlot = slots.loading;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-tree', {
@@ -1232,10 +1674,40 @@ export default defineVxeComponent({
                         'node--hover': isRowHover,
                         'node--trigger': trigger === 'node',
                         'is--loading': loading
-                    }],
-                style: treeStyle
+                    }]
             }, [
-                renderNodeList(),
+                headerSlot
+                    ? h('div', {
+                        ref: refHeaderWrapperElem,
+                        class: 'vxe-tree--header-wrapper'
+                    }, headerSlot({ $tree: $xeTree }))
+                    : renderEmptyElement($xeTree),
+                h('div', {
+                    ref: refVirtualWrapper,
+                    class: 'vxe-tree--node-list-wrapper',
+                    style: treeStyle,
+                    onScroll: scrollEvent
+                }, [
+                    h('div', {
+                        class: 'vxe-select--y-space',
+                        style: {
+                            height: bodyHeight ? `${bodyHeight}px` : ''
+                        }
+                    }),
+                    h('div', {
+                        ref: refVirtualBody,
+                        class: 'vxe-tree--node-list-body',
+                        style: {
+                            transform: `translateY(${topSpaceHeight}px)`
+                        }
+                    }, renderList(treeList))
+                ]),
+                footerSlot
+                    ? h('div', {
+                        ref: refFooterWrapperElem,
+                        class: 'vxe-tree--footer-wrapper'
+                    }, footerSlot({ $tree: $xeTree }))
+                    : renderEmptyElement($xeTree),
                 /**
                  * 加载中
                  */
@@ -1259,7 +1731,7 @@ export default defineVxeComponent({
             dataFlag.value++;
         });
         watch(dataFlag, () => {
-            loadTreeData(props.data || []);
+            loadData(props.data || []);
         });
         watch(() => props.checkNodeKey, (val) => {
             reactData.selectRadioKey = val;
@@ -1274,13 +1746,52 @@ export default defineVxeComponent({
         watch(checkboxFlag, () => {
             updateCheckboxChecked(props.checkNodeKeys || []);
         });
+        watch(() => props.filterValue, () => {
+            triggerSearchEvent(new Event('filter'));
+        });
+        const hFlag = ref(0);
+        watch(() => props.height, () => {
+            hFlag.value++;
+        });
+        watch(() => props.minHeight, () => {
+            hFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            hFlag.value++;
+        });
+        watch(hFlag, () => {
+            recalculate();
+        });
+        onMounted(() => {
+            if (props.autoResize) {
+                const el = refElem.value;
+                const parentEl = getParentElem();
+                const resizeObserver = globalResize.create(() => {
+                    if (props.autoResize) {
+                        recalculate();
+                    }
+                });
+                if (el) {
+                    resizeObserver.observe(el);
+                }
+                if (parentEl) {
+                    resizeObserver.observe(parentEl);
+                }
+                internalData.resizeObserver = resizeObserver;
+            }
+            globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+        });
         onUnmounted(() => {
-            reactData.treeList = [];
+            const { resizeObserver } = internalData;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
             internalData.treeExpandedMaps = {};
             internalData.indeterminateRowMaps = {};
             internalData.nodeMaps = {};
+            globalEvents.off($xeTree, 'resize');
         });
-        loadTreeData(props.data || []);
+        loadData(props.data || []);
         $xeTree.renderVN = renderVN;
         return $xeTree;
     },