vxe-pc-ui 3.7.4 → 3.7.6

package/es/tree/src/tree.js

@@ -1,8 +1,10 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { createEvent, getIcon, getConfig, renderEmptyElement, globalMixins } from '../../ui';
+import { getI18n, createEvent, getIcon, getConfig, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui';
+import { calcTreeLine } from './util';
+import { errLog } from '../../ui/src/log';
 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';
 /**
  * 生成节点的唯一主键
@@ -29,7 +31,15 @@ export default {
     ],
     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
@@ -121,15 +131,25 @@ export default {
             type: String,
             default: () => getConfig().tree.iconLoaded
         },
+        filterValue: [String, Number],
+        filterConfig: Object,
         size: {
             type: String,
             default: () => getConfig().tree.size || getConfig().size
-        }
+        },
+        virtualYConfig: Object
     },
     data() {
         const xID = XEUtils.uniqueId();
         const reactData = {
+            parentHeight: 0,
+            customHeight: 0,
+            customMinHeight: 0,
+            customMaxHeight: 0,
             currentNode: null,
+            scrollYLoad: false,
+            bodyHeight: 0,
+            topSpaceHeight: 0,
             selectRadioKey: null,
             treeList: [],
             updateExpandedFlag: 1,
@@ -137,11 +157,26 @@ export default {
         };
         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
         };
         return {
             xID,
@@ -185,6 +220,11 @@ export default {
             const props = $xeTree;
             return props.hasChildField || 'hasChild';
         },
+        computeVirtualYOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.virtualYConfig, props.virtualYConfig);
+        },
         computeIsRowCurrent() {
             const $xeTree = this;
             const props = $xeTree;
@@ -227,16 +267,24 @@ export default {
         },
         computeTreeStyle() {
             const $xeTree = this;
-            const props = $xeTree;
-            const { height, minHeight } = props;
+            const reactData = $xeTree.reactData;
+            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;
+        },
+        computeFilterOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
         } }),
     methods: {
         //
@@ -246,458 +294,187 @@ export default {
             const $xeTree = this;
             $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params));
         },
-        clearCurrentNode() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            reactData.currentNode = null;
-            return $xeTree.$nextTick();
-        },
-        getCurrentNodeId() {
+        getNodeId(node) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const { currentNode } = reactData;
-            if (currentNode) {
-                return $xeTree.getNodeId(currentNode);
-            }
-            return null;
+            const valueField = $xeTree.computeValueField;
+            const nodeid = XEUtils.get(node, valueField);
+            return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(nodeid);
         },
-        getCurrentNode() {
+        isExpandByNode(node) {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const { currentNode } = reactData;
-            const { nodeMaps } = internalData;
-            if (currentNode) {
-                const nodeItem = nodeMaps[$xeTree.getNodeId(currentNode)];
-                if (nodeItem) {
-                    return nodeItem.item;
-                }
-            }
-            return null;
+            const { updateExpandedFlag } = reactData;
+            const { treeExpandedMaps } = internalData;
+            const nodeid = $xeTree.getNodeId(node);
+            return !!(updateExpandedFlag && treeExpandedMaps[nodeid]);
         },
-        setCurrentNodeId(nodeKey) {
+        isCheckedByRadioNodeId(nodeid) {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { nodeMaps } = internalData;
-            const nodeItem = nodeMaps[nodeKey];
-            reactData.currentNode = nodeItem ? nodeItem.item : null;
-            return $xeTree.$nextTick();
+            const { selectRadioKey } = reactData;
+            return selectRadioKey === nodeid;
         },
-        setCurrentNode(node) {
+        isCheckedByRadioNode(node) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            reactData.currentNode = node;
-            return $xeTree.$nextTick();
+            return $xeTree.isCheckedByRadioNodeId($xeTree.getNodeId(node));
         },
-        clearRadioNode() {
+        isCheckedByCheckboxNodeId(nodeid) {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
-            reactData.selectRadioKey = null;
-            return $xeTree.$nextTick();
-        },
-        getCheckboxNodeIds() {
-            const $xeTree = this;
             const internalData = $xeTree.internalData;
+            const { updateCheckboxFlag } = reactData;
             const { selectCheckboxMaps } = internalData;
-            return Object.keys(selectCheckboxMaps);
-        },
-        getCheckboxNodes() {
-            const $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const { nodeMaps, selectCheckboxMaps } = internalData;
-            const list = [];
-            XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
-                const nodeItem = nodeMaps[nodeid];
-                if (nodeItem) {
-                    list.push(nodeItem.item);
-                }
-            });
-            return list;
-        },
-        clearCheckboxNode() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            internalData.selectCheckboxMaps = {};
-            reactData.updateCheckboxFlag++;
-            return $xeTree.$nextTick();
-        },
-        setAllCheckboxNode(checked) {
-            const $xeTree = this;
-            const props = $xeTree;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { transform } = props;
-            const selectMaps = {};
-            const childrenField = $xeTree.computeChildrenField;
-            const mapChildrenField = $xeTree.computeMapChildrenField;
-            if (checked) {
-                XEUtils.eachTree(reactData.treeList, (node) => {
-                    const nodeid = $xeTree.getNodeId(node);
-                    selectMaps[nodeid] = true;
-                }, { children: transform ? mapChildrenField : childrenField });
-            }
-            internalData.selectCheckboxMaps = selectMaps;
-            reactData.updateCheckboxFlag++;
-            return $xeTree.$nextTick();
+            return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
         },
-        clearExpandNode() {
+        isCheckedByCheckboxNode(node) {
             const $xeTree = this;
-            return $xeTree.clearAllExpandNode();
+            return $xeTree.isCheckedByCheckboxNodeId($xeTree.getNodeId(node));
         },
-        clearAllExpandNode() {
+        isIndeterminateByCheckboxNodeid(nodeid) {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const { nodeMaps } = internalData;
-            XEUtils.each(nodeMaps, (nodeItem) => {
-                nodeItem.treeLoaded = false;
-            });
-            internalData.treeExpandedMaps = {};
-            reactData.updateExpandedFlag++;
-            return $xeTree.$nextTick();
+            const { updateCheckboxFlag } = reactData;
+            const { indeterminateRowMaps } = internalData;
+            return !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
         },
-        setExpandByNodeId(nodeids, expanded) {
+        isIndeterminateByCheckboxNode(node) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
-            if (nodeids) {
-                if (!XEUtils.isArray(nodeids)) {
-                    nodeids = [nodeids];
-                }
-                nodeids.forEach((nodeid) => {
-                    handleSetExpand(nodeid, expanded, treeExpandedMaps);
-                });
-                reactData.updateExpandedFlag++;
-            }
-            return $xeTree.$nextTick();
+            return $xeTree.isIndeterminateByCheckboxNodeid($xeTree.getNodeId(node));
         },
-        getExpandNodeIds() {
+        emitCheckboxMode(value) {
             const $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
-            return XEUtils.keys(treeExpandedMaps);
+            $xeTree.$emit('update:checkNodeKeys', value);
         },
-        getExpandNodes() {
+        emitRadioMode(value) {
             const $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const { nodeMaps, treeExpandedMaps } = internalData;
-            const list = [];
-            XEUtils.each(treeExpandedMaps, (item, nodeid) => {
-                const nodeItem = nodeMaps[nodeid];
-                if (nodeItem) {
-                    list.push(nodeItem.item);
-                }
-            });
-            return list;
+            $xeTree.$emit('update:checkNodeKey', value);
         },
-        setExpandNode(nodes, expanded) {
+        setRadioNode(node) {
             const $xeTree = this;
             const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
-            if (nodes) {
-                if (!XEUtils.isArray(nodes)) {
-                    nodes = [nodes];
-                }
-                nodes.forEach((node) => {
-                    const nodeid = $xeTree.getNodeId(node);
-                    handleSetExpand(nodeid, expanded, treeExpandedMaps);
-                });
-                reactData.updateExpandedFlag++;
+            if (node) {
+                reactData.selectRadioKey = $xeTree.getNodeId(node);
             }
             return $xeTree.$nextTick();
         },
-        toggleExpandByNodeId(nodeids) {
+        setCheckboxNode(nodeList, checked) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
-            if (nodeids) {
-                if (!XEUtils.isArray(nodeids)) {
-                    nodeids = [nodeids];
+            if (nodeList) {
+                if (!XEUtils.isArray(nodeList)) {
+                    nodeList = [nodeList];
                 }
-                nodeids.forEach((nodeid) => {
-                    handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
-                });
-                reactData.updateExpandedFlag++;
+                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
             }
             return $xeTree.$nextTick();
         },
-        toggleExpandNode(nodes) {
+        setCheckboxByNodeId(nodeIds, checked) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
-            if (nodes) {
-                if (!XEUtils.isArray(nodes)) {
-                    nodes = [nodes];
+            const { nodeMaps } = internalData;
+            if (nodeIds) {
+                if (!XEUtils.isArray(nodeIds)) {
+                    nodeIds = [nodeIds];
                 }
-                nodes.forEach((node) => {
-                    const nodeid = $xeTree.getNodeId(node);
-                    handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+                const nodeList = [];
+                nodeIds.forEach((nodeid) => {
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        nodeList.push(nodeItem.item);
+                    }
                 });
-                reactData.updateExpandedFlag++;
+                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
             }
             return $xeTree.$nextTick();
         },
-        setAllExpandNode(expanded) {
+        handleCheckedCheckboxNode(nodeList, checked) {
             const $xeTree = this;
             const props = $xeTree;
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
             const { transform } = props;
-            const { treeExpandedMaps } = internalData;
-            const childrenField = $xeTree.computeChildrenField;
+            const { selectCheckboxMaps } = internalData;
             const mapChildrenField = $xeTree.computeMapChildrenField;
-            if (expanded) {
-                XEUtils.eachTree(reactData.treeList, (node) => {
-                    const childList = XEUtils.get(node, childrenField);
-                    const hasChild = childList && childList.length;
-                    if (hasChild) {
-                        const nodeid = $xeTree.getNodeId(node);
-                        treeExpandedMaps[nodeid] = true;
+            const childrenField = $xeTree.computeChildrenField;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { checkStrictly } = checkboxOpts;
+            const handleSelect = (node) => {
+                const nodeid = $xeTree.getNodeId(node);
+                if (checked) {
+                    if (!selectCheckboxMaps[nodeid]) {
+                        selectCheckboxMaps[nodeid] = node;
                     }
-                }, { children: transform ? mapChildrenField : childrenField });
+                }
+                else {
+                    if (selectCheckboxMaps[nodeid]) {
+                        delete selectCheckboxMaps[nodeid];
+                    }
+                }
+            };
+            if (checkStrictly) {
+                nodeList.forEach(handleSelect);
             }
             else {
-                internalData.treeExpandedMaps = {};
+                XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
             }
-            reactData.updateExpandedFlag++;
-            return $xeTree.$nextTick();
+            reactData.updateCheckboxFlag++;
+            $xeTree.updateCheckboxStatus();
         },
-        reloadExpandNode(node) {
+        updateCheckboxChecked(nodeIds) {
             const $xeTree = this;
-            const props = $xeTree;
-            const { lazy } = props;
-            if (lazy) {
-                $xeTree.clearExpandLoaded(node);
-                return $xeTree.handleAsyncTreeExpandChilds(node);
-            }
-            return $xeTree.$nextTick();
-        },
-        clearExpandLoaded(node) {
-            const $xeTree = this;
-            const props = $xeTree;
-            const internalData = $xeTree.internalData;
-            const { lazy } = props;
-            const { nodeMaps } = internalData;
-            if (lazy) {
-                const nodeItem = nodeMaps[$xeTree.getNodeId(node)];
-                if (nodeItem) {
-                    nodeItem.treeLoaded = false;
-                }
-            }
-            return $xeTree.$nextTick();
-        },
-        /**
-         * 用于树结构，给行数据加载子节点
-         */
-        loadChildrenNode(node, childRecords) {
-            const $xeTree = this;
-            const props = $xeTree;
-            const internalData = $xeTree.internalData;
-            const { lazy, transform } = props;
-            const { nodeMaps } = internalData;
-            if (!lazy) {
-                return Promise.resolve([]);
-            }
-            const childrenField = $xeTree.computeChildrenField;
-            const parentNodeItem = nodeMaps[$xeTree.getNodeId(node)];
-            const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
-            const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
-            return $xeTree.createNode(childRecords).then((nodeList) => {
-                XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
-                    const itemNodeId = $xeTree.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;
-                }
-                $xeTree.updateNodeLine(node);
-                return nodeList;
-            });
-        },
-        getNodeId(node) {
-            const $xeTree = this;
-            const valueField = $xeTree.computeValueField;
-            const nodeid = XEUtils.get(node, valueField);
-            return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(nodeid);
-        },
-        isExpandByNode(node) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { updateExpandedFlag } = reactData;
-            const { treeExpandedMaps } = internalData;
-            const nodeid = $xeTree.getNodeId(node);
-            return !!(updateExpandedFlag && treeExpandedMaps[nodeid]);
-        },
-        isCheckedByRadioNodeId(nodeid) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const { selectRadioKey } = reactData;
-            return selectRadioKey === nodeid;
-        },
-        isCheckedByRadioNode(node) {
-            const $xeTree = this;
-            return $xeTree.isCheckedByRadioNodeId($xeTree.getNodeId(node));
-        },
-        isCheckedByCheckboxNodeId(nodeid) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { updateCheckboxFlag } = reactData;
-            const { selectCheckboxMaps } = internalData;
-            return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
-        },
-        isCheckedByCheckboxNode(node) {
-            const $xeTree = this;
-            return $xeTree.isCheckedByCheckboxNodeId($xeTree.getNodeId(node));
-        },
-        isIndeterminateByCheckboxNodeid(nodeid) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { updateCheckboxFlag } = reactData;
-            const { indeterminateRowMaps } = internalData;
-            return !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
-        },
-        isIndeterminateByCheckboxNode(node) {
-            const $xeTree = this;
-            return $xeTree.isIndeterminateByCheckboxNodeid($xeTree.getNodeId(node));
-        },
-        getCheckboxIndeterminateNodes() {
-            const $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const { nodeMaps, indeterminateRowMaps } = internalData;
-            const list = [];
-            XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
-                const nodeItem = nodeMaps[nodeid];
-                if (nodeItem) {
-                    list.push(nodeItem.item);
-                }
-            });
-            return list;
-        },
-        emitCheckboxMode(value) {
-            const $xeTree = this;
-            $xeTree.$emit('update:checkNodeKeys', value);
-        },
-        emitRadioMode(value) {
-            const $xeTree = this;
-            $xeTree.$emit('update:checkNodeKey', value);
-        },
-        getRadioNodeId() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            return reactData.selectRadioKey || null;
-        },
-        setRadioNodeId(nodeKey) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            reactData.selectRadioKey = nodeKey;
-            return $xeTree.$nextTick();
+            $xeTree.setCheckboxByNodeId(nodeIds, true);
         },
-        getRadioNode() {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { selectRadioKey } = reactData;
-            const { nodeMaps } = internalData;
-            if (selectRadioKey) {
-                const nodeItem = nodeMaps[selectRadioKey];
-                if (nodeItem) {
-                    return nodeItem.item;
+        handleSetExpand(nodeid, expanded, expandedMaps) {
+            if (expanded) {
+                if (!expandedMaps[nodeid]) {
+                    expandedMaps[nodeid] = true;
                 }
             }
-            return null;
-        },
-        setRadioNode(node) {
-            const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            if (node) {
-                reactData.selectRadioKey = $xeTree.getNodeId(node);
-            }
-            return $xeTree.$nextTick();
-        },
-        setCheckboxNode(nodeList, checked) {
-            const $xeTree = this;
-            if (nodeList) {
-                if (!XEUtils.isArray(nodeList)) {
-                    nodeList = [nodeList];
+            else {
+                if (expandedMaps[nodeid]) {
+                    delete expandedMaps[nodeid];
                 }
-                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
             }
-            return $xeTree.$nextTick();
         },
-        setCheckboxByNodeId(nodeIds, checked) {
+        getParentElem() {
             const $xeTree = this;
-            const internalData = $xeTree.internalData;
-            const { nodeMaps } = internalData;
-            if (nodeIds) {
-                if (!XEUtils.isArray(nodeIds)) {
-                    nodeIds = [nodeIds];
-                }
-                const nodeList = [];
-                nodeIds.forEach((nodeid) => {
-                    const nodeItem = nodeMaps[nodeid];
-                    if (nodeItem) {
-                        nodeList.push(nodeItem.item);
-                    }
-                });
-                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
-            }
-            return $xeTree.$nextTick();
+            const el = $xeTree.$refs.refElem;
+            return el ? el.parentElement : null;
         },
-        handleCheckedCheckboxNode(nodeList, checked) {
+        calcTableHeight(key) {
             const $xeTree = this;
             const props = $xeTree;
             const reactData = $xeTree.reactData;
-            const internalData = $xeTree.internalData;
-            const { transform } = props;
-            const { selectCheckboxMaps } = internalData;
-            const mapChildrenField = $xeTree.computeMapChildrenField;
-            const childrenField = $xeTree.computeChildrenField;
-            const checkboxOpts = $xeTree.computeCheckboxOpts;
-            const { checkStrictly } = checkboxOpts;
-            const handleSelect = (node) => {
-                const nodeid = $xeTree.getNodeId(node);
-                if (checked) {
-                    if (!selectCheckboxMaps[nodeid]) {
-                        selectCheckboxMaps[nodeid] = node;
-                    }
+            const { parentHeight } = reactData;
+            const val = props[key];
+            let num = 0;
+            if (val) {
+                if (val === '100%' || val === 'auto') {
+                    num = parentHeight;
                 }
                 else {
-                    if (selectCheckboxMaps[nodeid]) {
-                        delete selectCheckboxMaps[nodeid];
+                    if (isScale(val)) {
+                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
                     }
+                    else {
+                        num = XEUtils.toNumber(val);
+                    }
+                    num = Math.max(40, num);
                 }
-            };
-            if (checkStrictly) {
-                nodeList.forEach(handleSelect);
-            }
-            else {
-                XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
             }
-            reactData.updateCheckboxFlag++;
-            $xeTree.updateCheckboxStatus();
+            return num;
         },
-        updateCheckboxChecked(nodeIds) {
+        updateHeight() {
             const $xeTree = this;
-            $xeTree.setCheckboxByNodeId(nodeIds, true);
+            const reactData = $xeTree.reactData;
+            reactData.customHeight = $xeTree.calcTableHeight('height');
+            reactData.customMinHeight = $xeTree.calcTableHeight('minHeight');
+            reactData.customMaxHeight = $xeTree.calcTableHeight('maxHeight');
+            // 如果启用虚拟滚动，默认高度
+            if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
+                reactData.customHeight = 300;
+            }
         },
         createNode(records) {
             const $xeTree = this;
@@ -714,16 +491,12 @@ export default {
         },
         cacheNodeMap() {
             const $xeTree = this;
-            const props = $xeTree;
-            const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const { transform } = props;
-            const { treeList } = reactData;
+            const { treeFullData } = internalData;
             const valueField = $xeTree.computeValueField;
             const childrenField = $xeTree.computeChildrenField;
-            const mapChildrenField = $xeTree.computeMapChildrenField;
             const keyMaps = {};
-            XEUtils.eachTree(treeList, (item, itemIndex, items, path, parent, nodes) => {
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
                 let nodeid = $xeTree.getNodeId(item);
                 if (!nodeid) {
                     nodeid = getNodeUniqueId();
@@ -731,78 +504,399 @@ export default {
                 }
                 keyMaps[nodeid] = {
                     item,
-                    itemIndex,
+                    index,
                     items,
                     parent,
                     nodes,
                     level: nodes.length,
+                    treeIndex: index,
                     lineCount: 0,
                     treeLoaded: false
                 };
-            }, { children: transform ? mapChildrenField : childrenField });
+            }, { children: childrenField });
             internalData.nodeMaps = keyMaps;
         },
-        loadTreeData(list) {
+        updateAfterDataIndex() {
             const $xeTree = this;
             const props = $xeTree;
-            const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            const { expandAll, transform } = props;
-            const { initialized } = internalData;
-            const keyField = $xeTree.computeKeyField;
-            const parentField = $xeTree.computeParentField;
+            const { transform } = props;
+            const { afterTreeList, nodeMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
             const mapChildrenField = $xeTree.computeMapChildrenField;
-            if (transform) {
-                reactData.treeList = XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: mapChildrenField });
-            }
-            else {
-                reactData.treeList = list ? list.slice(0) : [];
-            }
-            $xeTree.cacheNodeMap();
-            if (!initialized) {
-                if (list && list.length) {
-                    internalData.initialized = true;
-                    if (expandAll) {
-                        $xeTree.setAllExpandNode(true);
-                    }
-                    $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
+            XEUtils.eachTree(afterTreeList, (item, index, items) => {
+                const nodeid = $xeTree.getNodeId(item);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items = items;
+                    nodeItem.treeIndex = index;
                 }
-            }
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        items,
+                        parent,
+                        nodes: [],
+                        level: 0,
+                        treeIndex: index,
+                        lineCount: 0,
+                        treeLoaded: false
+                    };
+                    nodeMaps[nodeid] = rest;
+                }
+            }, { children: transform ? mapChildrenField : childrenField });
         },
-        handleCountLine(item, isRoot, nodeItem) {
+        updateAfterFullData() {
             const $xeTree = this;
+            const props = $xeTree;
             const internalData = $xeTree.internalData;
-            const { treeExpandedMaps } = internalData;
+            const { transform, filterValue } = props;
+            const { treeFullData, lastFilterValue } = internalData;
+            const titleField = $xeTree.computeTitleField;
             const childrenField = $xeTree.computeChildrenField;
-            const nodeid = $xeTree.getNodeId(item);
-            nodeItem.lineCount++;
-            if (treeExpandedMaps[nodeid]) {
-                XEUtils.arrayEach(item[childrenField], (childItem, childIndex, childList) => {
-                    if (!isRoot || childIndex < childList.length - 1) {
-                        $xeTree.handleCountLine(childItem, false, nodeItem);
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const filterOpts = $xeTree.computeFilterOpts;
+            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
+                        });
+                    }
+                    : (item) => {
+                        return String(item[titleField]).toLowerCase().indexOf(filterStr) > -1;
+                    };
+                const bafParams = { $tree: $xeTree, filterValue: filterStr };
+                if (beforeFilterMethod) {
+                    beforeFilterMethod(bafParams);
+                }
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, handleSearch, { children: childrenField, mapChildren: mapChildrenField, isEvery: true });
+                    fullList = treeList;
+                }
+                else {
+                    fullList = treeFullData.filter(handleSearch);
+                }
+                internalData.lastFilterValue = filterStr;
+                $xeTree.$nextTick(() => {
+                    // 筛选时自动展开
+                    if (autoExpandAll) {
+                        $xeTree.setAllExpandNode(true).then(() => {
+                            if (afterFilterMethod) {
+                                afterFilterMethod(bafParams);
+                            }
+                        });
+                    }
+                    else {
+                        if (afterFilterMethod) {
+                            afterFilterMethod(bafParams);
+                        }
                     }
                 });
             }
-        },
-        updateNodeLine(node) {
-            const $xeTree = this;
+            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);
+                        }
+                        // 取消筛选时自动收起
+                        $xeTree.$nextTick(() => {
+                            if (autoExpandAll) {
+                                $xeTree.clearAllExpandNode().then(() => {
+                                    if (afterFilterMethod) {
+                                        afterFilterMethod(bafParams);
+                                    }
+                                });
+                            }
+                            else {
+                                if (afterFilterMethod) {
+                                    afterFilterMethod(bafParams);
+                                }
+                            }
+                        });
+                    }
+                }
+                internalData.lastFilterValue = '';
+            }
+            internalData.afterVisibleList = fullList;
+            internalData.afterTreeList = treeList;
+            $xeTree.updateAfterDataIndex();
+        },
+        /**
+         * 如果为虚拟树、则将树结构拍平
+         */
+        handleTreeToList() {
+            const $xeTree = this;
+            const props = $xeTree;
             const internalData = $xeTree.internalData;
-            const { nodeMaps } = internalData;
-            if (node) {
-                const nodeid = $xeTree.getNodeId(node);
-                const nodeItem = nodeMaps[nodeid];
-                if (nodeItem) {
-                    XEUtils.lastArrayEach(nodeItem.nodes, childItem => {
-                        const nodeid = $xeTree.getNodeId(childItem);
-                        const nodeItem = nodeMaps[nodeid];
-                        if (nodeItem) {
-                            nodeItem.lineCount = 0;
-                            $xeTree.handleCountLine(childItem, true, nodeItem);
+            const { transform } = props;
+            const { afterTreeList, treeExpandedMaps } = internalData;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const expandMaps = {};
+            if (transform) {
+                const fullData = [];
+                XEUtils.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
+                    const nodeid = $xeTree.getNodeId(item);
+                    const parentNodeid = $xeTree.getNodeId(parentRow);
+                    if (!parentRow || (expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid])) {
+                        expandMaps[nodeid] = 1;
+                        fullData.push(item);
+                    }
+                }, { children: mapChildrenField });
+                $xeTree.updateScrollYStatus(fullData);
+                internalData.afterVisibleList = fullData;
+                return fullData;
+            }
+            return internalData.afterVisibleList;
+        },
+        handleData(force) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { scrollYLoad } = reactData;
+            const { scrollYStore } = internalData;
+            let fullList = internalData.afterVisibleList;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                $xeTree.updateAfterFullData();
+                // 如果为虚拟树，将树结构拍平
+                fullList = $xeTree.handleTreeToList();
+            }
+            const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0);
+            reactData.treeList = treeList;
+        },
+        triggerSearchEvent: XEUtils.debounce(function () {
+            const $xeSelect = this;
+            $xeSelect.handleData(true);
+        }, 350, { trailing: true }),
+        loadData(list) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { expandAll, transform } = props;
+            const { initialized, scrollYStore } = internalData;
+            const keyField = $xeTree.computeKeyField;
+            const parentField = $xeTree.computeParentField;
+            const childrenField = $xeTree.computeChildrenField;
+            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 = $xeTree.updateScrollYStatus(fullData);
+            $xeTree.cacheNodeMap();
+            $xeTree.handleData(true);
+            if (sYLoad) {
+                if (!(props.height || props.maxHeight)) {
+                    errLog('vxe.error.reqProp', ['height | max-height | virtual-y-config.enabled=false']);
+                }
+            }
+            return $xeTree.computeScrollLoad().then(() => {
+                if (!initialized) {
+                    if (list && list.length) {
+                        internalData.initialized = true;
+                        if (expandAll) {
+                            $xeTree.setAllExpandNode(true);
                         }
-                    });
+                        $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
+                    }
+                }
+                $xeTree.updateHeight();
+                $xeTree.refreshScroll();
+            });
+        },
+        updateScrollYStatus(fullData) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const virtualYOpts = $xeTree.computeVirtualYOpts;
+            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;
+        },
+        updateYSpace() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            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;
+        },
+        updateYData() {
+            const $xeTree = this;
+            $xeTree.handleData();
+            $xeTree.updateYSpace();
+        },
+        computeScrollLoad() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            return $xeTree.$nextTick().then(() => {
+                const { scrollYLoad } = reactData;
+                const { scrollYStore } = internalData;
+                const virtualBodyElem = $xeTree.$refs.refVirtualBody;
+                const virtualYOpts = $xeTree.computeVirtualYOpts;
+                let rowHeight = 0;
+                let firstItemElem;
+                if (virtualBodyElem) {
+                    if (!firstItemElem) {
+                        firstItemElem = virtualBodyElem.children[0];
+                    }
+                }
+                if (firstItemElem) {
+                    rowHeight = firstItemElem.offsetHeight;
+                }
+                rowHeight = Math.max(20, rowHeight);
+                scrollYStore.rowHeight = rowHeight;
+                // 计算 Y 逻辑
+                if (scrollYLoad) {
+                    const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+                    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);
+                    $xeTree.updateYData();
+                }
+                else {
+                    $xeTree.updateYSpace();
+                }
+            });
+        },
+        /**
+         * 如果有滚动条，则滚动到对应的位置
+         * @param {Number} scrollLeft 左距离
+         * @param {Number} scrollTop 上距离
+         */
+        scrollTo(scrollLeft, scrollTop) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+            if (scrollBodyElem) {
+                if (XEUtils.isNumber(scrollLeft)) {
+                    scrollBodyElem.scrollLeft = scrollLeft;
+                }
+                if (XEUtils.isNumber(scrollTop)) {
+                    scrollBodyElem.scrollTop = scrollTop;
+                }
+            }
+            if (reactData.scrollYLoad) {
+                return new Promise(resolve => {
+                    setTimeout(() => {
+                        $xeTree.$nextTick(() => {
+                            resolve();
+                        });
+                    }, 50);
+                });
+            }
+            return $xeTree.$nextTick();
+        },
+        /**
+         * 刷新滚动条
+         */
+        refreshScroll() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { lastScrollLeft, lastScrollTop } = internalData;
+            return $xeTree.clearScroll().then(() => {
+                if (lastScrollLeft || lastScrollTop) {
+                    internalData.lastScrollLeft = 0;
+                    internalData.lastScrollTop = 0;
+                    return scrollTo(lastScrollLeft, lastScrollTop);
+                }
+            });
+        },
+        /**
+         * 重新计算列表
+         */
+        recalculate() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { scrollYStore } = internalData;
+            const { rowHeight } = scrollYStore;
+            const el = $xeTree.$refs.refElem;
+            if (el && el.clientWidth && el.clientHeight) {
+                const parentEl = $xeTree.getParentElem();
+                const headerWrapperEl = $xeTree.$refs.refHeaderWrapperElem;
+                const footerWrapperEl = $xeTree.$refs.refFooterWrapperElem;
+                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);
+                }
+                $xeTree.updateHeight();
+                return $xeTree.computeScrollLoad();
+            }
+            return $xeTree.$nextTick();
+        },
+        loadYData(evnt) {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            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;
+                    $xeTree.updateYData();
                 }
             }
         },
+        scrollEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            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) {
+                $xeTree.loadYData(evnt);
+            }
+            internalData.lastScrollTime = Date.now();
+            $xeTree.dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt);
+        },
+        clearScroll() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+            if (scrollBodyElem) {
+                scrollBodyElem.scrollTop = 0;
+                scrollBodyElem.scrollLeft = 0;
+            }
+            internalData.lastScrollTop = 0;
+            internalData.lastScrollLeft = 0;
+            return $xeTree.$nextTick();
+        },
         handleNodeClickEvent(evnt, node) {
             const $xeTree = this;
             const props = $xeTree;
@@ -874,13 +968,11 @@ export default {
                                 if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
                                     $xeTree.handleCheckedCheckboxNode(childRows, true);
                                 }
-                                $xeTree.updateNodeLine(node);
                                 $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
                                 return $xeTree.$nextTick();
                             });
                         }
                         else {
-                            $xeTree.updateNodeLine(node);
                             $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
                         }
                     }).catch((e) => {
@@ -889,10 +981,11 @@ export default {
                         if (treeExpandLazyLoadedMaps[nodeid]) {
                             treeExpandLazyLoadedMaps[nodeid] = false;
                         }
-                        $xeTree.updateNodeLine(node);
                         $xeTree.dispatchEvent('load-error', { node, data: e }, new Event('load-error'));
                     }).finally(() => {
-                        return $xeTree.$nextTick();
+                        $xeTree.handleTreeToList();
+                        $xeTree.handleData();
+                        return $xeTree.recalculate();
                     });
                 }
                 else {
@@ -962,8 +1055,9 @@ export default {
                 });
             }
             reactData.updateExpandedFlag++;
-            expandNodes.forEach($xeTree.updateNodeLine);
-            return Promise.all(result);
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return Promise.all(result).then(() => $xeTree.recalculate());
         },
         toggleExpandEvent(evnt, node) {
             const $xeTree = this;
@@ -984,8 +1078,7 @@ export default {
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
             const { transform } = props;
-            const { treeList } = reactData;
-            const { selectCheckboxMaps, indeterminateRowMaps } = internalData;
+            const { selectCheckboxMaps, indeterminateRowMaps, afterTreeList } = internalData;
             const childrenField = $xeTree.computeChildrenField;
             const mapChildrenField = $xeTree.computeMapChildrenField;
             const checkboxOpts = $xeTree.computeCheckboxOpts;
@@ -993,7 +1086,7 @@ export default {
             if (!checkStrictly) {
                 const childRowMaps = {};
                 const childRowList = [];
-                XEUtils.eachTree(treeList, (node) => {
+                XEUtils.eachTree(afterTreeList, (node) => {
                     const nodeid = $xeTree.getNodeId(node);
                     const childList = node[childrenField];
                     if (childList && childList.length && !childRowMaps[nodeid]) {
@@ -1007,12 +1100,13 @@ export default {
                     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 = $xeTree.getNodeId(item);
                             const isSelect = selectCheckboxMaps[childNodeid];
-                            if (checkMethod({ node: item })) {
+                            if (checkMethod({ $tree: $xeTree, node: item })) {
                                 if (isSelect) {
                                     sLen++;
                                 }
@@ -1041,8 +1135,29 @@ export default {
                             }
                             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]) {
@@ -1063,108 +1178,462 @@ export default {
                         }
                     }
                 });
-                reactData.updateCheckboxFlag++;
+                reactData.updateCheckboxFlag++;
+            }
+        },
+        changeCheckboxEvent(evnt, node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { transform } = props;
+            const { selectCheckboxMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { checkStrictly, checkMethod } = checkboxOpts;
+            let isDisabled = !!checkMethod;
+            if (checkMethod) {
+                isDisabled = !checkMethod({ $tree: $xeTree, node });
+            }
+            if (isDisabled) {
+                return;
+            }
+            const nodeid = $xeTree.getNodeId(node);
+            let isChecked = false;
+            if (selectCheckboxMaps[nodeid]) {
+                delete selectCheckboxMaps[nodeid];
+            }
+            else {
+                isChecked = true;
+                selectCheckboxMaps[nodeid] = node;
+            }
+            if (!checkStrictly) {
+                XEUtils.eachTree(XEUtils.get(node, transform ? mapChildrenField : childrenField), (childNode) => {
+                    const childNodeid = $xeTree.getNodeId(childNode);
+                    if (isChecked) {
+                        if (!selectCheckboxMaps[childNodeid]) {
+                            selectCheckboxMaps[childNodeid] = true;
+                        }
+                    }
+                    else {
+                        if (selectCheckboxMaps[childNodeid]) {
+                            delete selectCheckboxMaps[childNodeid];
+                        }
+                    }
+                }, { children: transform ? mapChildrenField : childrenField });
+            }
+            reactData.updateCheckboxFlag++;
+            $xeTree.updateCheckboxStatus();
+            const value = XEUtils.keys(selectCheckboxMaps);
+            $xeTree.emitCheckboxMode(value);
+            $xeTree.dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt);
+        },
+        changeCurrentEvent(evnt, node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            evnt.preventDefault();
+            const nodeOpts = $xeTree.computeNodeOpts;
+            const { currentMethod, trigger } = nodeOpts;
+            const childrenField = $xeTree.computeChildrenField;
+            const childList = XEUtils.get(node, childrenField);
+            const hasChild = childList && childList.length;
+            let isDisabled = !!currentMethod;
+            if (trigger === 'child') {
+                if (hasChild) {
+                    return;
+                }
+            }
+            else if (trigger === 'parent') {
+                if (!hasChild) {
+                    return;
+                }
+            }
+            if (currentMethod) {
+                isDisabled = !currentMethod({ node });
+            }
+            if (isDisabled) {
+                return;
+            }
+            const isChecked = true;
+            reactData.currentNode = node;
+            $xeTree.dispatchEvent('current-change', { node, checked: isChecked }, evnt);
+        },
+        changeRadioEvent(evnt, node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const radioOpts = $xeTree.computeRadioOpts;
+            const { checkMethod } = radioOpts;
+            let isDisabled = !!checkMethod;
+            if (checkMethod) {
+                isDisabled = !checkMethod({ $tree: $xeTree, node });
+            }
+            if (isDisabled) {
+                return;
+            }
+            const isChecked = true;
+            const value = $xeTree.getNodeId(node);
+            reactData.selectRadioKey = value;
+            $xeTree.emitRadioMode(value);
+            $xeTree.dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
+        },
+        handleGlobalResizeEvent() {
+            const $xeTree = this;
+            const el = $xeTree.$refs.refElem;
+            if (!el || !el.clientWidth) {
+                return;
+            }
+            $xeTree.recalculate();
+        },
+        reloadData(data) {
+            const $xeTree = this;
+            return $xeTree.loadData(data || []);
+        },
+        clearCurrentNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.currentNode = null;
+            return $xeTree.$nextTick();
+        },
+        getCurrentNodeId() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const { currentNode } = reactData;
+            if (currentNode) {
+                return $xeTree.getNodeId(currentNode);
+            }
+            return null;
+        },
+        getCurrentNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { currentNode } = reactData;
+            const { nodeMaps } = internalData;
+            if (currentNode) {
+                const nodeItem = nodeMaps[$xeTree.getNodeId(currentNode)];
+                if (nodeItem) {
+                    return nodeItem.item;
+                }
+            }
+            return null;
+        },
+        setCurrentNodeId(nodeKey) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps } = internalData;
+            const nodeItem = nodeMaps[nodeKey];
+            reactData.currentNode = nodeItem ? nodeItem.item : null;
+            return $xeTree.$nextTick();
+        },
+        setCurrentNode(node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.currentNode = node;
+            return $xeTree.$nextTick();
+        },
+        clearRadioNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.selectRadioKey = null;
+            return $xeTree.$nextTick();
+        },
+        getRadioNodeId() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            return reactData.selectRadioKey || null;
+        },
+        getRadioNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { selectRadioKey } = reactData;
+            const { nodeMaps } = internalData;
+            if (selectRadioKey) {
+                const nodeItem = nodeMaps[selectRadioKey];
+                if (nodeItem) {
+                    return nodeItem.item;
+                }
+            }
+            return null;
+        },
+        setRadioNodeId(nodeKey) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.selectRadioKey = nodeKey;
+            return $xeTree.$nextTick();
+        },
+        getCheckboxNodeIds() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { selectCheckboxMaps } = internalData;
+            return Object.keys(selectCheckboxMaps);
+        },
+        getCheckboxNodes() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps, selectCheckboxMaps } = internalData;
+            const list = [];
+            XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    list.push(nodeItem.item);
+                }
+            });
+            return list;
+        },
+        clearCheckboxNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            internalData.selectCheckboxMaps = {};
+            reactData.updateCheckboxFlag++;
+            return $xeTree.$nextTick().then(() => {
+                return { checkNodeKeys: [] };
+            });
+        },
+        setAllCheckboxNode(checked) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const selectMaps = {};
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const checkKeys = [];
+            if (checked) {
+                XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    checkKeys.push(nodeid);
+                    selectMaps[nodeid] = true;
+                }, { children: transform ? mapChildrenField : childrenField });
+            }
+            internalData.selectCheckboxMaps = selectMaps;
+            reactData.updateCheckboxFlag++;
+            return $xeTree.$nextTick().then(() => {
+                return { checkNodeKeys: checkKeys };
+            });
+        },
+        clearExpandNode() {
+            const $xeTree = this;
+            return $xeTree.clearAllExpandNode();
+        },
+        clearAllExpandNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps } = internalData;
+            XEUtils.each(nodeMaps, (nodeItem) => {
+                nodeItem.treeLoaded = false;
+            });
+            internalData.treeExpandedMaps = {};
+            reactData.updateExpandedFlag++;
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
+        },
+        setExpandByNodeId(nodeids, expanded) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodeids) {
+                if (!XEUtils.isArray(nodeids)) {
+                    nodeids = [nodeids];
+                }
+                nodeids.forEach((nodeid) => {
+                    handleSetExpand(nodeid, expanded, treeExpandedMaps);
+                });
+                reactData.updateExpandedFlag++;
+            }
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
+        },
+        getExpandNodeIds() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            return XEUtils.keys(treeExpandedMaps);
+        },
+        getExpandNodes() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            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 $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodes) {
+                if (!XEUtils.isArray(nodes)) {
+                    nodes = [nodes];
+                }
+                nodes.forEach((node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    handleSetExpand(nodeid, expanded, treeExpandedMaps);
+                });
+                reactData.updateExpandedFlag++;
             }
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
         },
-        changeCheckboxEvent(evnt, node) {
+        toggleExpandByNodeId(nodeids) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodeids) {
+                if (!XEUtils.isArray(nodeids)) {
+                    nodeids = [nodeids];
+                }
+                nodeids.forEach((nodeid) => {
+                    handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+                });
+                reactData.updateExpandedFlag++;
+            }
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
+        },
+        toggleExpandNode(nodes) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodes) {
+                if (!XEUtils.isArray(nodes)) {
+                    nodes = [nodes];
+                }
+                nodes.forEach((node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+                });
+                reactData.updateExpandedFlag++;
+            }
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
+        },
+        setAllExpandNode(expanded) {
             const $xeTree = this;
             const props = $xeTree;
             const reactData = $xeTree.reactData;
             const internalData = $xeTree.internalData;
-            evnt.preventDefault();
-            evnt.stopPropagation();
             const { transform } = props;
-            const { selectCheckboxMaps } = internalData;
+            const { treeExpandedMaps } = internalData;
             const childrenField = $xeTree.computeChildrenField;
             const mapChildrenField = $xeTree.computeMapChildrenField;
-            const checkboxOpts = $xeTree.computeCheckboxOpts;
-            const { checkStrictly, checkMethod } = checkboxOpts;
-            let isDisabled = !!checkMethod;
-            if (checkMethod) {
-                isDisabled = !checkMethod({ node });
-            }
-            if (isDisabled) {
-                return;
-            }
-            const nodeid = $xeTree.getNodeId(node);
-            let isChecked = false;
-            if (selectCheckboxMaps[nodeid]) {
-                delete selectCheckboxMaps[nodeid];
-            }
-            else {
-                isChecked = true;
-                selectCheckboxMaps[nodeid] = node;
-            }
-            if (!checkStrictly) {
-                XEUtils.eachTree(XEUtils.get(node, childrenField), (childNode) => {
-                    const childNodeid = $xeTree.getNodeId(childNode);
-                    if (isChecked) {
-                        if (!selectCheckboxMaps[childNodeid]) {
-                            selectCheckboxMaps[childNodeid] = true;
-                        }
-                    }
-                    else {
-                        if (selectCheckboxMaps[childNodeid]) {
-                            delete selectCheckboxMaps[childNodeid];
-                        }
+            if (expanded) {
+                XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                    const childList = XEUtils.get(node, childrenField);
+                    const hasChild = childList && childList.length;
+                    if (hasChild) {
+                        const nodeid = $xeTree.getNodeId(node);
+                        treeExpandedMaps[nodeid] = true;
                     }
                 }, { children: transform ? mapChildrenField : childrenField });
             }
-            reactData.updateCheckboxFlag++;
-            $xeTree.updateCheckboxStatus();
-            const value = XEUtils.keys(selectCheckboxMaps);
-            $xeTree.emitCheckboxMode(value);
-            $xeTree.dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt);
+            else {
+                internalData.treeExpandedMaps = {};
+            }
+            reactData.updateExpandedFlag++;
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
         },
-        changeCurrentEvent(evnt, node) {
+        reloadExpandNode(node) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            evnt.preventDefault();
-            const nodeOpts = $xeTree.computeNodeOpts;
-            const { currentMethod, trigger } = nodeOpts;
-            const childrenField = $xeTree.computeChildrenField;
-            const childList = XEUtils.get(node, childrenField);
-            const hasChild = childList && childList.length;
-            let isDisabled = !!currentMethod;
-            if (trigger === 'child') {
-                if (hasChild) {
-                    return;
-                }
+            const props = $xeTree;
+            const { lazy } = props;
+            if (lazy) {
+                $xeTree.clearExpandLoaded(node);
+                return $xeTree.handleAsyncTreeExpandChilds(node);
             }
-            else if (trigger === 'parent') {
-                if (!hasChild) {
-                    return;
+            return $xeTree.recalculate();
+        },
+        clearExpandLoaded(node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { lazy } = props;
+            const { nodeMaps } = internalData;
+            if (lazy) {
+                const nodeItem = nodeMaps[$xeTree.getNodeId(node)];
+                if (nodeItem) {
+                    nodeItem.treeLoaded = false;
                 }
             }
-            if (currentMethod) {
-                isDisabled = !currentMethod({ node });
-            }
-            if (isDisabled) {
-                return;
-            }
-            const isChecked = true;
-            reactData.currentNode = node;
-            $xeTree.dispatchEvent('current-change', { node, checked: isChecked }, evnt);
+            return $xeTree.recalculate();
         },
-        changeRadioEvent(evnt, node) {
+        /**
+         * 用于树结构，给行数据加载子节点
+         */
+        loadChildrenNode(node, childRecords) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            evnt.preventDefault();
-            evnt.stopPropagation();
-            const radioOpts = $xeTree.computeRadioOpts;
-            const { checkMethod } = radioOpts;
-            let isDisabled = !!checkMethod;
-            if (checkMethod) {
-                isDisabled = !checkMethod({ node });
-            }
-            if (isDisabled) {
-                return;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { lazy, transform } = props;
+            const { nodeMaps } = internalData;
+            if (!lazy) {
+                return Promise.resolve([]);
             }
-            const isChecked = true;
-            const value = $xeTree.getNodeId(node);
-            reactData.selectRadioKey = value;
-            $xeTree.emitRadioMode(value);
-            $xeTree.dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const parentNodeItem = nodeMaps[$xeTree.getNodeId(node)];
+            const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+            const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+            return $xeTree.createNode(childRecords).then((nodeList) => {
+                XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+                    const itemNodeId = $xeTree.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;
+                }
+                $xeTree.updateAfterDataIndex();
+                return nodeList;
+            });
+        },
+        getCheckboxIndeterminateNodes() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps, indeterminateRowMaps } = internalData;
+            const list = [];
+            XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    list.push(nodeItem.item);
+                }
+            });
+            return list;
         },
         //
         // Render
@@ -1175,11 +1644,11 @@ export default {
             const { showRadio } = props;
             const radioOpts = $xeTree.computeRadioOpts;
             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', {
@@ -1208,11 +1677,11 @@ export default {
             const checkboxOpts = $xeTree.computeCheckboxOpts;
             const { showIcon, checkMethod, visibleMethod } = checkboxOpts;
             const isIndeterminate = $xeTree.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', {
@@ -1235,7 +1704,7 @@ export default {
             }
             return renderEmptyElement($xeTree);
         },
-        renderNode(h, node) {
+        renderNode(h, node, nodeid) {
             const $xeTree = this;
             const props = $xeTree;
             const slots = $xeTree.$scopedSlots;
@@ -1243,7 +1712,7 @@ export default {
             const internalData = $xeTree.internalData;
             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 = $xeTree.computeChildrenField;
             const titleField = $xeTree.computeTitleField;
             const hasChildField = $xeTree.computeHasChildField;
@@ -1252,14 +1721,12 @@ export default {
             const iconSlot = slots.icon;
             const titleSlot = slots.title;
             const extraSlot = slots.extra;
-            const nodeid = $xeTree.getNodeId(node);
             const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
             const nodeItem = nodeMaps[nodeid];
             const nodeValue = XEUtils.get(node, titleField);
             let isRadioChecked = false;
             if (showRadio) {
-                // eslint-disable-next-line eqeqeq
-                isRadioChecked = nodeid == selectRadioKey;
+                isRadioChecked = nodeid === String(selectRadioKey);
             }
             let isCheckboxChecked = false;
             if (showCheckbox) {
@@ -1273,23 +1740,10 @@ export default {
                 hasLazyChilds = node[hasChildField];
                 isLazyLoaded = !!nodeItem.treeLoaded;
             }
-            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($xeTree.renderNode(h, childItem));
-                });
-            }
+            const prevNode = nodeItem.items[nodeItem.treeIndex - 1];
+            const nParams = { node, isExpand };
             return h('div', {
+                key: nodeid,
                 class: ['vxe-tree--node-wrapper', `node--level-${nodeItem.level}`],
                 attrs: {
                     nodeid
@@ -1313,28 +1767,38 @@ export default {
                         }
                     }
                 }, [
-                    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',
-                                    on: {
-                                        click(evnt) {
-                                            $xeTree.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: `${$xeTree.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',
+                                on: {
+                                    click(evnt) {
+                                        $xeTree.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))
+                                    })
+                                ])
+                        ]
+                        : []),
                     $xeTree.renderRadio(h, node, nodeid, isRadioChecked),
                     $xeTree.renderCheckbox(h, node, nodeid, isCheckboxChecked),
                     h('div', {
@@ -1342,41 +1806,63 @@ export default {
                     }, [
                         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)
+                ])
             ]);
         },
-        renderNodeList(h) {
+        renderList(h, treeList) {
             const $xeTree = this;
-            const reactData = $xeTree.reactData;
-            const { treeList } = reactData;
-            return h('div', {
-                class: 'vxe-tree--node-list-wrapper'
-            }, treeList.map(node => $xeTree.renderNode(h, node)));
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { treeExpandedMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            if (!treeList.length) {
+                return [
+                    h('div', {
+                        class: 'vxe-tree--empty-placeholder'
+                    }, getI18n('vxe.tree.searchEmpty'))
+                ];
+            }
+            const nodeVNs = [];
+            treeList.forEach(transform
+                ? (node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    nodeVNs.push($xeTree.renderNode(h, node, nodeid));
+                }
+                : (node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    nodeVNs.push($xeTree.renderNode(h, node, nodeid));
+                    const childList = XEUtils.get(node, childrenField);
+                    const hasChild = childList && childList.length;
+                    if (hasChild && treeExpandedMaps[nodeid]) {
+                        nodeVNs.push(...$xeTree.renderList(h, childList));
+                    }
+                });
+            return nodeVNs;
         },
         renderVN(h) {
             const $xeTree = this;
             const props = $xeTree;
             const slots = $xeTree.$scopedSlots;
+            const reactData = $xeTree.reactData;
             const { loading, trigger, showLine } = props;
+            const { bodyHeight, topSpaceHeight, treeList } = reactData;
             const vSize = $xeTree.computeSize;
             const radioOpts = $xeTree.computeRadioOpts;
             const checkboxOpts = $xeTree.computeCheckboxOpts;
-            const treeStyle = $xeTree.computeTreeStyle;
             const loadingOpts = $xeTree.computeLoadingOpts;
             const isRowHover = $xeTree.computeIsRowHover;
+            const treeStyle = $xeTree.computeTreeStyle;
             const loadingSlot = slots.loading;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
             return h('div', {
                 ref: 'refElem',
                 class: ['vxe-tree', {
@@ -1387,10 +1873,42 @@ export default {
                         'node--hover': isRowHover,
                         'node--trigger': trigger === 'node',
                         'is--loading': loading
-                    }],
-                style: treeStyle
+                    }]
             }, [
-                $xeTree.renderNodeList(h),
+                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,
+                    on: {
+                        scroll: $xeTree.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)`
+                        }
+                    }, $xeTree.renderList(h, treeList))
+                ]),
+                footerSlot
+                    ? h('div', {
+                        ref: 'refFooterWrapperElem',
+                        class: 'vxe-tree--footer-wrapper'
+                    }, footerSlot({ $tree: $xeTree }))
+                    : renderEmptyElement($xeTree),
                 /**
                  * 加载中
                  */
@@ -1413,7 +1931,7 @@ export default {
     watch: {
         data(val) {
             const $xeTree = this;
-            $xeTree.loadTreeData(val || []);
+            $xeTree.loadData(val || []);
         },
         checkNodeKey(val) {
             const $xeTree = this;
@@ -1424,6 +1942,22 @@ export default {
             const $xeTree = this;
             const props = $xeTree;
             $xeTree.updateCheckboxChecked(props.checkNodeKeys || []);
+        },
+        filterValue() {
+            const $xeTree = this;
+            $xeTree.triggerSearchEvent(new Event('filter'));
+        },
+        height() {
+            const $xeTree = this;
+            $xeTree.recalculate();
+        },
+        minHeight() {
+            const $xeTree = this;
+            $xeTree.recalculate();
+        },
+        maxHeight() {
+            const $xeTree = this;
+            $xeTree.recalculate();
         }
     },
     created() {
@@ -1431,16 +1965,41 @@ export default {
         const props = $xeTree;
         const reactData = $xeTree.reactData;
         reactData.selectRadioKey = props.checkNodeKey || null;
-        $xeTree.loadTreeData(props.data || []);
+        $xeTree.loadData(props.data || []);
+    },
+    mounted() {
+        const $xeTree = this;
+        const props = $xeTree;
+        const internalData = $xeTree.internalData;
+        if (props.autoResize) {
+            const el = $xeTree.$refs.refElem;
+            const parentEl = $xeTree.getParentElem();
+            const resizeObserver = globalResize.create(() => {
+                if (props.autoResize) {
+                    $xeTree.recalculate();
+                }
+            });
+            if (el) {
+                resizeObserver.observe(el);
+            }
+            if (parentEl) {
+                resizeObserver.observe(parentEl);
+            }
+            internalData.resizeObserver = resizeObserver;
+        }
+        globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeTree = this;
-        const reactData = $xeTree.reactData;
         const internalData = $xeTree.internalData;
-        reactData.treeList = [];
+        const { resizeObserver } = internalData;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
         internalData.treeExpandedMaps = {};
         internalData.indeterminateRowMaps = {};
         internalData.nodeMaps = {};
+        globalEvents.off($xeTree, 'resize');
     },
     render(h) {
         return this.renderVN(h);