vxe-pc-ui 3.16.0 → 3.16.2

package/es/tree/src/tree.js

@@ -0,0 +1,3699 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { VxeUI, createEvent, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui';
+import { calcTreeLine, getItemCacheObj } from './util';
+import { createComponentLog } from '../../ui/src/log';
+import { getSlotVNs } from '../../ui/src/vn';
+import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store';
+import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode } from '../../ui/src/dom';
+import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils';
+import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
+import VxeLoadingComponent from '../../loading';
+import VxeTooltipComponent from '../../tooltip';
+const { warnLog, errLog } = createComponentLog('tree');
+const { menus, getConfig, getI18n, getIcon } = VxeUI;
+let crossTreeDragNodeObj = null;
+/**
+ * 生成节点的唯一主键
+ */
+function getNodeUniqueId() {
+    return XEUtils.uniqueId('node_');
+}
+function handleSetExpand(nodeid, expanded, expandedMaps) {
+    if (expanded) {
+        if (!expandedMaps[nodeid]) {
+            expandedMaps[nodeid] = true;
+        }
+    }
+    else {
+        if (expandedMaps[nodeid]) {
+            delete expandedMaps[nodeid];
+        }
+    }
+}
+function handleScrollTo($xeTree, scrollLeft, scrollTop) {
+    const reactData = $xeTree.reactData;
+    const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+    if (scrollLeft) {
+        if (!XEUtils.isNumber(scrollLeft)) {
+            scrollTop = scrollLeft.top;
+            scrollLeft = scrollLeft.left;
+        }
+    }
+    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();
+}
+function handleNodeDragEndClearStatus($xeTree) {
+    clearNodeDragData($xeTree);
+    clearCrossTreeDragStatus($xeTree);
+    $xeTree.recalculate();
+}
+function clearNodeDropOrigin($xeTree) {
+    const el = $xeTree.$refs.refElem;
+    if (el) {
+        const clss = 'node--drag-origin';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            elem.draggable = false;
+            removeClass(elem, clss);
+        });
+    }
+}
+function updateNodeDropOrigin($xeTree, node) {
+    const el = $xeTree.$refs.refElem;
+    if (el) {
+        const clss = 'node--drag-origin';
+        const nodeid = $xeTree.getNodeId(node);
+        XEUtils.arrayEach(el.querySelectorAll(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`), (elem) => {
+            addClass(elem, clss);
+        });
+    }
+}
+function updateNodeDropTipContent($xeTree, itemEl) {
+    const reactData = $xeTree.reactData;
+    const { dragNode } = reactData;
+    const dragOpts = $xeTree.computeDragOpts;
+    const { tooltipMethod } = dragOpts;
+    const rTooltipMethod = tooltipMethod;
+    let tipContent = '';
+    if (rTooltipMethod) {
+        const rtParams = {
+            $tree: $xeTree,
+            node: dragNode
+        };
+        tipContent = `${rTooltipMethod(rtParams) || ''}`;
+    }
+    else {
+        tipContent = getI18n('vxe.tree.dragTip', [itemEl.textContent || '']);
+    }
+    reactData.dragTipText = tipContent;
+}
+function hideDropTip($xeTree) {
+    const rdTipEl = $xeTree.$refs.refDragTipElem;
+    const rdLineEl = $xeTree.$refs.refDragNodeLineElem;
+    if (rdTipEl) {
+        rdTipEl.style.display = '';
+    }
+    if (rdLineEl) {
+        rdLineEl.style.display = '';
+    }
+}
+function clearCrossTreeDragStatus($xeTree) {
+    const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo($xeTree);
+    crossTreeDragNodeObj = null;
+    crossTreeDragNodeInfo.node = null;
+}
+function clearDragStatus($xeTree) {
+    const reactData = $xeTree.reactData;
+    const { dragNode } = reactData;
+    if (dragNode) {
+        hideDropTip($xeTree);
+        clearNodeDropOrigin($xeTree);
+        clearCrossTreeDragStatus($xeTree);
+        reactData.dragNode = null;
+    }
+}
+function showDropTip($xeTree, evnt, itemEl, showLine, dragPos) {
+    const internalData = $xeTree.internalData;
+    const wrapperEl = $xeTree.$refs.refElem;
+    if (!wrapperEl) {
+        return;
+    }
+    const { prevDragToChild } = internalData;
+    const wrapperRect = wrapperEl.getBoundingClientRect();
+    const wrapperHeight = wrapperEl.clientHeight;
+    if (itemEl) {
+        const rdLineEl = $xeTree.$refs.refDragNodeLineElem;
+        if (rdLineEl) {
+            if (showLine) {
+                const trRect = itemEl.getBoundingClientRect();
+                let itemHeight = itemEl.clientHeight;
+                const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+                if (offsetTop + itemHeight > wrapperHeight) {
+                    itemHeight = wrapperHeight - offsetTop;
+                }
+                rdLineEl.style.display = 'block';
+                rdLineEl.style.top = `${offsetTop}px`;
+                rdLineEl.style.height = `${itemHeight}px`;
+                rdLineEl.setAttribute('drag-pos', dragPos);
+                rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
+            }
+            else {
+                rdLineEl.style.display = '';
+            }
+        }
+    }
+    const rdTipEl = $xeTree.$refs.refDragTipElem;
+    if (rdTipEl) {
+        rdTipEl.style.display = 'block';
+        rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+        rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 1, evnt.clientX - wrapperRect.x)}px`;
+        rdTipEl.setAttribute('drag-status', showLine ? (prevDragToChild ? 'sub' : 'normal') : 'disabled');
+    }
+}
+function clearNodeDragData($xeTree) {
+    const reactData = $xeTree.reactData;
+    const internalData = $xeTree.internalData;
+    const wrapperEl = $xeTree.$refs.refElem;
+    const dtClss = ['.vxe-tree--node-wrapper'];
+    hideDropTip($xeTree);
+    clearNodeDropOrigin($xeTree);
+    clearRowAnimate(wrapperEl, dtClss);
+    internalData.prevDragToChild = false;
+    reactData.dragNode = null;
+}
+function handleNodeDragSwapEvent($xeTree, evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild) {
+    const props = $xeTree;
+    const reactData = $xeTree.reactData;
+    const internalData = $xeTree.internalData;
+    const { transform } = props;
+    const { nodeMaps, treeFullData, afterVisibleList } = internalData;
+    const dragConfig = $xeTree.computeDragOpts;
+    const { animation, isCrossDrag, isPeerDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = dragConfig;
+    const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+    const keyField = $xeTree.computeKeyField;
+    const parentField = $xeTree.computeParentField;
+    const childrenField = $xeTree.computeChildrenField;
+    const mapChildrenField = $xeTree.computeMapChildrenField;
+    const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+    const el = $xeTree.$refs.refElem;
+    const errRest = {
+        status: false
+    };
+    if (!(el && prevDragNode && dragNode)) {
+        handleNodeDragEndClearStatus($xeTree);
+        return Promise.resolve(errRest);
+    }
+    // 判断是否有拖动
+    if (prevDragNode !== dragNode) {
+        const dragParams = {
+            oldNode: dragNode,
+            newNode: prevDragNode,
+            dragNode,
+            dragPos: prevDragPos,
+            dragToChild: !!prevDragToChild,
+            offsetIndex: dragOffsetIndex
+        };
+        const dragNodeid = $xeTree.getNodeId(dragNode);
+        const dragNodeRest = nodeMaps[dragNodeid] || {};
+        const _dragNodeIndex = dragNodeRest._index;
+        const newNodeid = $xeTree.getNodeId(prevDragNode);
+        let dragNodeHeight = 0;
+        let dragOffsetTop = -1;
+        if (animation) {
+            const prevItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${newNodeid}"]`);
+            const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`);
+            const targetItemEl = prevItemEl || oldItemEl;
+            if (targetItemEl) {
+                dragNodeHeight = targetItemEl.offsetHeight;
+            }
+            if (oldItemEl) {
+                dragOffsetTop = oldItemEl.offsetTop;
+            }
+        }
+        let oafIndex = -1;
+        let nafIndex = -1;
+        const oldAllMaps = {};
+        let isSelfToChildStatus = false;
+        const oldRest = dragNodeRest;
+        const newRest = nodeMaps[newNodeid];
+        if (transform) {
+            if (oldRest && newRest) {
+                const { level: oldLevel } = oldRest;
+                const { level: newLevel } = newRest;
+                XEUtils.eachTree([dragNode], item => {
+                    oldAllMaps[$xeTree.getNodeId(item)] = item;
+                }, { children: mapChildrenField });
+                if (oldLevel && newLevel) {
+                    // 子到子
+                    if (isPeerDrag && !isCrossDrag) {
+                        if (oldRest.item[parentField] !== newRest.item[parentField]) {
+                            // 非同级
+                            handleNodeDragEndClearStatus($xeTree);
+                            return errRest;
+                        }
+                    }
+                    else {
+                        if (!isCrossDrag) {
+                            handleNodeDragEndClearStatus($xeTree);
+                            return errRest;
+                        }
+                        if (oldAllMaps[newNodeid]) {
+                            isSelfToChildStatus = true;
+                            if (!(isCrossDrag && isSelfToChildDrag)) {
+                                if (VxeUI.modal) {
+                                    VxeUI.modal.message({
+                                        status: 'error',
+                                        content: getI18n('vxe.error.treeDragChild')
+                                    });
+                                }
+                                handleNodeDragEndClearStatus($xeTree);
+                                return errRest;
+                            }
+                        }
+                    }
+                }
+                else if (oldLevel) {
+                    // 子到根
+                    if (!isCrossDrag) {
+                        handleNodeDragEndClearStatus($xeTree);
+                        return errRest;
+                    }
+                }
+                else if (newLevel) {
+                    // 根到子
+                    if (!isCrossDrag) {
+                        handleNodeDragEndClearStatus($xeTree);
+                        return errRest;
+                    }
+                    if (oldAllMaps[newNodeid]) {
+                        isSelfToChildStatus = true;
+                        if (!(isCrossDrag && isSelfToChildDrag)) {
+                            if (VxeUI.modal) {
+                                VxeUI.modal.message({
+                                    status: 'error',
+                                    content: getI18n('vxe.error.treeDragChild')
+                                });
+                            }
+                            handleNodeDragEndClearStatus($xeTree);
+                            return errRest;
+                        }
+                    }
+                }
+                else {
+                    // 根到根
+                }
+            }
+        }
+        const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+        return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
+            if (!status) {
+                return errRest;
+            }
+            if (transform) {
+                // 移出源位置
+                if (oldRest && newRest) {
+                    const fullList = XEUtils.toTreeArray(internalData.afterTreeList, {
+                        updated: false,
+                        key: keyField,
+                        parentKey: parentField,
+                        children: mapChildrenField
+                    });
+                    // 移出
+                    const otfIndex = $xeTree.findNodeIndexOf(fullList, dragNode);
+                    fullList.splice(otfIndex, 1);
+                    // 插入
+                    const ptfIndex = $xeTree.findNodeIndexOf(fullList, prevDragNode);
+                    const ntfIndex = ptfIndex + dragOffsetIndex;
+                    fullList.splice(ntfIndex, 0, dragNode);
+                    // 改变层级
+                    if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
+                        XEUtils.each(dragNode[childrenField], childNode => {
+                            childNode[parentField] = dragNode[parentField];
+                        });
+                    }
+                    dragNode[parentField] = isDragToChildFlag ? prevDragNode[keyField] : prevDragNode[parentField];
+                    internalData.treeFullData = XEUtils.toArrayTree(fullList, {
+                        key: keyField,
+                        parentKey: parentField,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                }
+            }
+            else {
+                // 移出
+                oafIndex = $xeTree.findNodeIndexOf(afterVisibleList, dragNode);
+                const otfIndex = $xeTree.findNodeIndexOf(treeFullData, dragNode);
+                afterVisibleList.splice(oafIndex, 1);
+                treeFullData.splice(otfIndex, 1);
+                // 插入
+                const pafIndex = $xeTree.findNodeIndexOf(afterVisibleList, prevDragNode);
+                const ptfIndex = $xeTree.findNodeIndexOf(treeFullData, prevDragNode);
+                nafIndex = pafIndex + dragOffsetIndex;
+                const ntfIndex = ptfIndex + dragOffsetIndex;
+                afterVisibleList.splice(nafIndex, 0, dragNode);
+                treeFullData.splice(ntfIndex, 0, dragNode);
+            }
+            $xeTree.cacheNodeMap();
+            $xeTree.handleData(transform);
+            if (!(transform)) {
+                $xeTree.updateAfterDataIndex();
+            }
+            $xeTree.updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                $xeTree.updateYSpace();
+            }
+            if (evnt) {
+                $xeTree.dispatchEvent('node-dragend', {
+                    oldNode: dragNode,
+                    newNode: prevDragNode,
+                    dragNode,
+                    dragPos: prevDragPos,
+                    dragToChild: isDragToChildFlag,
+                    offsetIndex: dragOffsetIndex,
+                    _index: {
+                        newIndex: nafIndex,
+                        oldIndex: oafIndex
+                    }
+                }, evnt);
+            }
+            return $xeTree.$nextTick().then(() => {
+                if (animation) {
+                    const { treeList } = reactData;
+                    const { nodeMaps } = internalData;
+                    const dragNodeRest = nodeMaps[dragNodeid];
+                    const _newNodeIndex = dragNodeRest._index;
+                    const firstNode = treeList[0];
+                    const firstNodeRest = nodeMaps[$xeTree.getNodeId(firstNode)];
+                    const wrapperEl = el;
+                    if (firstNodeRest) {
+                        const _firstNodeIndex = firstNodeRest._index;
+                        const _lastNodeIndex = _firstNodeIndex + treeList.length;
+                        let rsIndex = -1;
+                        let reIndex = -1;
+                        let offsetRate = 1;
+                        if (_dragNodeIndex < _firstNodeIndex) {
+                            // 从上往下虚拟拖拽
+                            rsIndex = 0;
+                            reIndex = _newNodeIndex - _firstNodeIndex;
+                        }
+                        else if (_dragNodeIndex > _lastNodeIndex) {
+                            // 从下往上虚拟拖拽
+                            const $newNodeIndex = dragNodeRest.$index;
+                            rsIndex = $newNodeIndex + 1;
+                            reIndex = treeList.length;
+                            offsetRate = -1;
+                        }
+                        else {
+                            if (_newNodeIndex > _dragNodeIndex) {
+                                // 从上往下拖拽
+                                rsIndex = _dragNodeIndex - _firstNodeIndex;
+                                reIndex = rsIndex + _newNodeIndex - _dragNodeIndex;
+                            }
+                            else {
+                                // 从下往上拖拽
+                                rsIndex = _newNodeIndex - _firstNodeIndex;
+                                reIndex = rsIndex + _dragNodeIndex - _newNodeIndex + 1;
+                                offsetRate = -1;
+                            }
+                        }
+                        const dragRangeList = treeList.slice(rsIndex, reIndex);
+                        if (dragRangeList.length) {
+                            const dtClss = [];
+                            dragRangeList.forEach(item => {
+                                const nodeid = $xeTree.getNodeId(item);
+                                dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                            });
+                            const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                            moveRowAnimateToTb(dtTrList, offsetRate * dragNodeHeight);
+                        }
+                    }
+                    const drClss = [`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`];
+                    const newDtTrList = wrapperEl.querySelectorAll(drClss.join(','));
+                    const newTrEl = newDtTrList[0];
+                    if (dragOffsetTop > -1 && newTrEl) {
+                        moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
+                    }
+                }
+                $xeTree.recalculate();
+            }).then(() => {
+                return {
+                    status: true
+                };
+            });
+        }).catch(() => {
+            return errRest;
+        }).then((rest) => {
+            handleNodeDragEndClearStatus($xeTree);
+            return rest;
+        });
+    }
+    handleNodeDragEndClearStatus($xeTree);
+    return Promise.resolve(errRest);
+}
+function handleVisibleOrCheckMode(mode, isExistChild, nLevel) {
+    if (mode) {
+        if (mode === 'first') {
+            return !nLevel;
+        }
+        if (mode === 'last') {
+            return !isExistChild;
+        }
+    }
+    return true;
+}
+function insertTreeNode($xeTree, newRecords, isAppend) {
+    const internalData = $xeTree.internalData;
+    const { treeFullData, nodeMaps } = internalData;
+    const keyField = $xeTree.computeKeyField;
+    const parentField = $xeTree.computeParentField;
+    const childrenField = $xeTree.computeChildrenField;
+    const mapChildrenField = $xeTree.computeMapChildrenField;
+    const funcName = isAppend ? 'push' : 'unshift';
+    newRecords.forEach((item) => {
+        const parentNodeId = item[parentField];
+        const nodeid = $xeTree.getNodeId(item);
+        const matchObj = parentNodeId ? XEUtils.findTree(treeFullData, (item) => parentNodeId === item[keyField], { children: mapChildrenField }) : null;
+        const itemRest = getItemCacheObj(item);
+        if (matchObj) {
+            const { item: parentItem } = matchObj;
+            const parentRest = nodeMaps[$xeTree.getNodeId(parentItem)];
+            const parentLevel = parentRest ? parentRest.level : 0;
+            let pChilds = parentItem[childrenField];
+            let pMapChilds = parentItem[mapChildrenField];
+            if (!XEUtils.isArray(pChilds)) {
+                pChilds = parentItem[childrenField] = [];
+            }
+            if (!XEUtils.isArray(pMapChilds)) {
+                pMapChilds = parentItem[mapChildrenField] = [];
+            }
+            itemRest.parent = parentItem;
+            itemRest.items = pChilds;
+            itemRest.level = parentLevel;
+            pChilds[funcName](item);
+            pMapChilds[funcName](item);
+        }
+        else {
+            if (parentNodeId) {
+                warnLog('vxe.error.unableInsert');
+            }
+            treeFullData[funcName](item);
+        }
+        nodeMaps[nodeid] = itemRest;
+    });
+}
+function createInternalData() {
+    return {
+        // initialized: false,
+        // lastFilterValue: '',
+        treeFullData: [],
+        afterTreeList: [],
+        afterVisibleList: [],
+        nodeMaps: {},
+        selectCheckboxMaps: {},
+        indeterminateNodeMaps: {},
+        treeExpandedMaps: {},
+        treeExpandLazyLoadedMaps: {},
+        lastScrollLeft: 0,
+        lastScrollTop: 0,
+        scrollYStore: {
+            startIndex: 0,
+            endIndex: 0,
+            visibleSize: 0,
+            offsetSize: 0,
+            rowHeight: 0
+        },
+        removeNodeMaps: {},
+        insertNodeMaps: {},
+        // prevDragNode: null,
+        // prevDragToChild: false,
+        // prevDragPos: ''
+        lastScrollTime: 0
+        // hpTimeout: undefined
+    };
+}
+function createReactData() {
+    return {
+        parentHeight: 0,
+        customHeight: 0,
+        customMinHeight: 0,
+        customMaxHeight: 0,
+        currentNode: null,
+        scrollYLoad: false,
+        bodyHeight: 0,
+        topSpaceHeight: 0,
+        selectRadioKey: null,
+        treeList: [],
+        updateExpandedFlag: 1,
+        updateCheckboxFlag: 1,
+        insertNodeFlag: 1,
+        removeNodeFlag: 1,
+        dragNode: null,
+        dragTipText: '',
+        isCrossDragNode: false,
+        tooltipStore: {
+            visible: false,
+            node: null
+        }
+    };
+}
+export default {
+    name: 'VxeTree',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    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
+        },
+        loading: Boolean,
+        loadingConfig: Object,
+        accordion: {
+            type: Boolean,
+            default: () => getConfig().tree.accordion
+        },
+        childrenField: {
+            type: String,
+            default: () => getConfig().tree.childrenField
+        },
+        valueField: {
+            type: String,
+            default: () => getConfig().tree.valueField
+        },
+        keyField: {
+            type: String,
+            default: () => getConfig().tree.keyField
+        },
+        parentField: {
+            type: String,
+            default: () => getConfig().tree.parentField
+        },
+        titleField: {
+            type: String,
+            default: () => getConfig().tree.titleField
+        },
+        hasChildField: {
+            type: String,
+            default: () => getConfig().tree.hasChildField
+        },
+        mapChildrenField: {
+            type: String,
+            default: () => getConfig().tree.mapChildrenField
+        },
+        transform: Boolean,
+        // 已废弃
+        isCurrent: Boolean,
+        // 已废弃
+        isHover: Boolean,
+        expandAll: Boolean,
+        expandNodeKeys: Array,
+        showLine: {
+            type: Boolean,
+            default: () => getConfig().tree.showLine
+        },
+        trigger: String,
+        indent: {
+            type: Number,
+            default: () => getConfig().tree.indent
+        },
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig().tree.showRadio
+        },
+        checkNodeKey: [String, Number],
+        radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig().tree.showCheckbox
+        },
+        checkNodeKeys: Array,
+        checkboxConfig: Object,
+        nodeConfig: Object,
+        lazy: Boolean,
+        visibleMethod: Function,
+        toggleMethod: Function,
+        loadMethod: Function,
+        showOverflow: {
+            type: Boolean,
+            default: () => getConfig().tree.showOverflow
+        },
+        tooltipConfig: Object,
+        drag: {
+            type: Boolean,
+            default: () => getConfig().tree.drag
+        },
+        dragConfig: Object,
+        menuConfig: Object,
+        showIcon: {
+            type: Boolean,
+            default: true
+        },
+        iconOpen: {
+            type: String,
+            default: () => getConfig().tree.iconOpen
+        },
+        iconClose: {
+            type: String,
+            default: () => getConfig().tree.iconClose
+        },
+        iconLoaded: {
+            type: String,
+            default: () => getConfig().tree.iconLoaded
+        },
+        rootParentValue: {
+            type: [String, Number],
+            default: () => getConfig().tree.rootParentValue
+        },
+        rootValues: {
+            type: Array,
+            default: () => getConfig().tree.rootValues
+        },
+        filterValue: [String, Number],
+        filterConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig().tree.size || getConfig().size
+        },
+        virtualYConfig: Object
+    },
+    provide() {
+        const $xeTree = this;
+        return {
+            $xeTree
+        };
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID,
+            reactData, crossTreeDragNodeInfo: crossTreeDragNodeGlobal, hFlag: 0, dataFlag: 0 });
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeTitleField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.titleField || 'title';
+        },
+        computeKeyField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.keyField || 'id';
+        },
+        computeValueField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const keyField = $xeTree.computeKeyField;
+            return props.valueField || keyField;
+        },
+        computeParentField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.parentField || 'parentId';
+        },
+        computeChildrenField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.childrenField || 'children';
+        },
+        computeMapChildrenField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.mapChildrenField || 'mapChildren';
+        },
+        computeHasChildField() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return props.hasChildField || 'hasChild';
+        },
+        computeVirtualYOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.virtualYConfig, props.virtualYConfig);
+        },
+        computeIsNodeCurrent() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const nodeOpts = $xeTree.computeNodeOpts;
+            const { isCurrent } = nodeOpts;
+            if (XEUtils.isBoolean(isCurrent)) {
+                return isCurrent;
+            }
+            return props.isCurrent;
+        },
+        computeIsNodeHover() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const nodeOpts = $xeTree.computeNodeOpts;
+            const { isHover } = nodeOpts;
+            if (XEUtils.isBoolean(isHover)) {
+                return isHover;
+            }
+            return props.isHover;
+        },
+        computeRadioOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({ showIcon: true }, getConfig().tree.radioConfig, props.radioConfig);
+        },
+        computeCheckboxOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({ showIcon: true }, getConfig().tree.checkboxConfig, props.checkboxConfig);
+        },
+        computeNodeOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.nodeConfig, props.nodeConfig);
+        },
+        computeLoadingOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.loadingConfig, props.loadingConfig);
+        },
+        computeDragOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.dragConfig, props.dragConfig);
+        },
+        computeTooltipOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.tooltipConfig, props.tooltipConfig);
+        },
+        computeMenuOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
+        },
+        computeTreeStyle() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const { indent } = props;
+            const { customHeight, customMinHeight, customMaxHeight } = reactData;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { nodeStyle } = checkboxOpts;
+            const stys = {};
+            if (customHeight) {
+                stys.height = toCssUnit(customHeight);
+            }
+            if (customMinHeight) {
+                stys.minHeight = toCssUnit(customMinHeight);
+            }
+            if (customMaxHeight) {
+                stys.maxHeight = toCssUnit(customMaxHeight);
+            }
+            if (indent) {
+                stys['--vxe-ui-tree-node-indent'] = toCssUnit(indent);
+            }
+            if (nodeStyle) {
+                const { indeterminateColor, checkedColor } = nodeStyle;
+                if (indeterminateColor) {
+                    stys['--vxe-ui-tree-node-checkbox-indeterminate-color'] = indeterminateColor;
+                }
+                if (checkedColor) {
+                    stys['--vxe-ui-tree-node-checkbox-checked-color'] = checkedColor;
+                }
+            }
+            return stys;
+        },
+        computeFilterOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeTree = this;
+            $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params));
+        },
+        getNodeId(node) {
+            const $xeTree = this;
+            if (!node) {
+                return '';
+            }
+            const valueField = $xeTree.computeValueField;
+            const nodeKey = XEUtils.get(node, valueField);
+            return enModelValue(nodeKey);
+        },
+        getNodeById(nodeid) {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps } = internalData;
+            if (nodeid) {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    return nodeItem.item;
+                }
+            }
+            return null;
+        },
+        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 { indeterminateNodeMaps } = internalData;
+            return !!(updateCheckboxFlag && indeterminateNodeMaps[nodeid]);
+        },
+        isIndeterminateByCheckboxNode(node) {
+            const $xeTree = this;
+            return $xeTree.isIndeterminateByCheckboxNodeid($xeTree.getNodeId(node));
+        },
+        emitCheckboxMode(value) {
+            const $xeTree = this;
+            $xeTree.$emit('update:checkNodeKeys', value);
+        },
+        emitRadioMode(value) {
+            const $xeTree = this;
+            $xeTree.$emit('update:checkNodeKey', value);
+        },
+        setRadioNode(node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            if (node) {
+                const nodeid = $xeTree.getNodeId(node);
+                reactData.selectRadioKey = nodeid;
+                $xeTree.emitRadioMode(deModelValue(nodeid));
+            }
+            else {
+                $xeTree.emitRadioMode(null);
+            }
+            return $xeTree.$nextTick();
+        },
+        setCheckboxNode(nodeList, checked) {
+            const $xeTree = this;
+            if (nodeList) {
+                if (!XEUtils.isArray(nodeList)) {
+                    nodeList = [nodeList];
+                }
+                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
+            }
+            $xeTree.emitCheckboxMode($xeTree.getCheckboxNodeIds());
+            return $xeTree.$nextTick();
+        },
+        setCheckboxByNodeId(nodeKeys, checked) {
+            const $xeTree = this;
+            $xeTree.handleSetCheckboxByNodeId(nodeKeys, checked);
+            $xeTree.emitCheckboxMode($xeTree.getCheckboxNodeIds());
+            return $xeTree.$nextTick();
+        },
+        handleSetCheckboxByNodeId(nodeKeys, checked) {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps } = internalData;
+            if (nodeKeys) {
+                if (!XEUtils.isArray(nodeKeys)) {
+                    nodeKeys = [nodeKeys];
+                }
+                const nodeList = [];
+                nodeKeys.forEach((nodeKey) => {
+                    const nodeid = enModelValue(nodeKey);
+                    const nodeItem = nodeMaps[nodeid];
+                    if (nodeItem) {
+                        nodeList.push(nodeItem.item);
+                    }
+                });
+                $xeTree.handleCheckedCheckboxNode(nodeList, checked);
+            }
+            return $xeTree.$nextTick();
+        },
+        handleCheckedCheckboxNode(nodeList, checked) {
+            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;
+                    }
+                }
+                else {
+                    if (selectCheckboxMaps[nodeid]) {
+                        delete selectCheckboxMaps[nodeid];
+                    }
+                }
+            };
+            if (checkStrictly) {
+                nodeList.forEach(handleSelect);
+            }
+            else {
+                XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
+            }
+            reactData.updateCheckboxFlag++;
+            $xeTree.updateCheckboxStatus();
+        },
+        updateCheckboxChecked(nodeKeys) {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            internalData.selectCheckboxMaps = {};
+            $xeTree.handleSetCheckboxByNodeId(nodeKeys, true);
+        },
+        handleSetExpand(nodeid, expanded, expandedMaps) {
+            if (expanded) {
+                if (!expandedMaps[nodeid]) {
+                    expandedMaps[nodeid] = true;
+                }
+            }
+            else {
+                if (expandedMaps[nodeid]) {
+                    delete expandedMaps[nodeid];
+                }
+            }
+        },
+        getParentElem() {
+            const $xeTree = this;
+            const el = $xeTree.$refs.refElem;
+            return el ? el.parentElement : null;
+        },
+        calcTreeHeight(key) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const { parentHeight } = reactData;
+            const val = props[key];
+            let num = 0;
+            if (val) {
+                if (val === '100%' || val === 'auto') {
+                    num = parentHeight;
+                }
+                else {
+                    if (isScale(val)) {
+                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
+                    }
+                    else {
+                        num = XEUtils.toNumber(val);
+                    }
+                    num = Math.max(40, num);
+                }
+            }
+            return num;
+        },
+        updateHeight() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.customHeight = $xeTree.calcTreeHeight('height');
+            reactData.customMinHeight = $xeTree.calcTreeHeight('minHeight');
+            reactData.customMaxHeight = $xeTree.calcTreeHeight('maxHeight');
+            // 如果启用虚拟滚动，默认高度
+            if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
+                reactData.customHeight = 300;
+            }
+        },
+        createNode(records) {
+            const $xeTree = this;
+            const valueField = $xeTree.computeValueField;
+            return Promise.resolve(records.map(obj => {
+                const item = Object.assign({}, obj);
+                let nodeid = $xeTree.getNodeId(item);
+                if (!nodeid) {
+                    nodeid = getNodeUniqueId();
+                    XEUtils.set(item, valueField, nodeid);
+                }
+                return item;
+            }));
+        },
+        cacheNodeMap() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { treeFullData } = internalData;
+            const valueField = $xeTree.computeValueField;
+            const childrenField = $xeTree.computeChildrenField;
+            const keyMaps = {};
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
+                let nodeid = $xeTree.getNodeId(item);
+                if (!nodeid) {
+                    nodeid = getNodeUniqueId();
+                    XEUtils.set(item, valueField, nodeid);
+                }
+                keyMaps[nodeid] = {
+                    item,
+                    index,
+                    $index: -1,
+                    _index: -1,
+                    items,
+                    parent: parenItem,
+                    nodes,
+                    level: nodes.length - 1,
+                    treeIndex: index,
+                    lineCount: 0,
+                    treeLoaded: false
+                };
+            }, { children: childrenField });
+            internalData.nodeMaps = keyMaps;
+        },
+        updateAfterDataIndex() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { afterTreeList, nodeMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            let vtIndex = 0;
+            XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
+                const nodeid = $xeTree.getNodeId(item);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items = items;
+                    nodeItem.treeIndex = index;
+                    nodeItem._index = vtIndex;
+                }
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        $index: -1,
+                        _index: vtIndex,
+                        items,
+                        parent: parenItem,
+                        nodes,
+                        level: nodes.length - 1,
+                        treeIndex: index,
+                        lineCount: 0,
+                        treeLoaded: false
+                    };
+                    nodeMaps[nodeid] = rest;
+                }
+                vtIndex++;
+            }, { children: transform ? mapChildrenField : childrenField });
+        },
+        updateAfterFullData() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { transform, filterValue } = props;
+            const { treeFullData, lastFilterValue } = internalData;
+            const titleField = $xeTree.computeTitleField;
+            const childrenField = $xeTree.computeChildrenField;
+            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.toLowerCase()) > -1;
+                    };
+                const bafParams = { $tree: $xeTree, filterValue: filterStr };
+                if (beforeFilterMethod) {
+                    beforeFilterMethod(bafParams);
+                }
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, handleSearch, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                    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);
+                        }
+                    }
+                });
+            }
+            else {
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, () => true, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                    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 { transform } = props;
+            const { afterTreeList, treeExpandedMaps } = internalData;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const expandMaps = {};
+            if (transform) {
+                const fullData = [];
+                XEUtils.eachTree(afterTreeList, (item, index, items, path, parentNode) => {
+                    const nodeid = $xeTree.getNodeId(item);
+                    const parentNodeid = $xeTree.getNodeId(parentNode);
+                    if (!parentNode || (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, nodeMaps } = internalData;
+            let fullList = internalData.afterVisibleList;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                $xeTree.updateAfterFullData();
+                // 如果为虚拟树，将树结构拍平
+                fullList = $xeTree.handleTreeToList();
+            }
+            const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0);
+            treeList.forEach((item, $index) => {
+                const nodeid = $xeTree.getNodeId(item);
+                const itemRest = nodeMaps[nodeid];
+                if (itemRest) {
+                    itemRest.$index = $index;
+                }
+            });
+            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 reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { expandAll, expandNodeKeys, transform, rootParentValue, rootValues } = 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,
+                    rootParentValue,
+                    rootValues
+                })
+                : list ? list.slice(0) : [];
+            internalData.treeFullData = fullData;
+            internalData.insertNodeMaps = {};
+            reactData.insertNodeFlag++;
+            internalData.removeNodeMaps = {};
+            reactData.removeNodeFlag++;
+            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);
+                        }
+                        else if (expandNodeKeys && expandNodeKeys.length) {
+                            $xeTree.setExpandByNodeId(expandNodeKeys, true);
+                        }
+                        $xeTree.handleSetCheckboxByNodeId(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();
+                }
+            });
+        },
+        /**
+         * 如果有滚动条，则滚动到对应的位置
+         */
+        scrollTo(scrollLeft, scrollTop) {
+            const $xeTree = this;
+            return handleScrollTo($xeTree, scrollLeft, scrollTop);
+        },
+        scrollToNode(node) {
+            const $xeTree = this;
+            return $xeTree.scrollToNodeId($xeTree.getNodeId(node));
+        },
+        scrollToNodeId(nodeid) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { scrollYStore, afterTreeList } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+            if (nodeid && scrollBodyElem) {
+                if (transform) {
+                    const matchObj = XEUtils.findTree(afterTreeList, item => $xeTree.getNodeId(item) === nodeid, { children: transform ? mapChildrenField : childrenField });
+                    if (matchObj) {
+                        return $xeTree.setExpandNode(matchObj.nodes, true).then(() => {
+                            const itemIndex = XEUtils.findIndexOf(internalData.afterVisibleList, item => $xeTree.getNodeId(item) === nodeid);
+                            if (itemIndex > -1) {
+                                const targetTop = Math.max(0, (itemIndex - 1) * scrollYStore.rowHeight);
+                                return handleScrollTo($xeTree, scrollBodyElem.scrollLeft, targetTop);
+                            }
+                        });
+                    }
+                }
+                else {
+                    const itemEl = scrollBodyElem.querySelector(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                    if (itemEl) {
+                        return handleScrollTo($xeTree, scrollBodyElem.scrollLeft, itemEl.offsetTop);
+                    }
+                }
+            }
+            return $xeTree.recalculate();
+        },
+        /**
+         * 刷新滚动条
+         */
+        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().then(() => {
+                    $xeTree.updateHeight();
+                    $xeTree.updateYSpace();
+                });
+            }
+            return $xeTree.$nextTick();
+        },
+        getFullData() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { treeFullData } = internalData;
+            return treeFullData.slice(0);
+        },
+        loadYData() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { scrollYStore } = internalData;
+            const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
+            const scrollBodyElem = $xeTree.$refs.refVirtualWrapper;
+            if (!scrollBodyElem) {
+                return;
+            }
+            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();
+            }
+            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();
+        },
+        handleInsertNodeAt(records, targetNodeOrNodeid, isInsertNextNode) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { treeFullData, nodeMaps, removeNodeMaps, insertNodeMaps } = internalData;
+            const keyField = $xeTree.computeKeyField;
+            const parentField = $xeTree.computeParentField;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            if (!transform) {
+                errLog('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'transform']);
+                return Promise.resolve({ node: null, nodes: [] });
+            }
+            if (!XEUtils.isArray(records)) {
+                records = [records];
+            }
+            let targetNode = targetNodeOrNodeid;
+            if (XEUtils.isString(targetNodeOrNodeid) || XEUtils.isNumber(targetNodeOrNodeid)) {
+                const nodeRest = nodeMaps[targetNodeOrNodeid];
+                if (nodeRest) {
+                    targetNode = nodeRest.item;
+                }
+            }
+            if (!records.length) {
+                return Promise.resolve({ node: null, nodes: [] });
+            }
+            const newRecords = records.map(record => XEUtils.assign({ [mapChildrenField]: [], [childrenField]: [] }, record));
+            const treeRecords = XEUtils.toArrayTree(newRecords, { key: keyField, parentKey: parentField, children: childrenField });
+            if (XEUtils.eqNull(targetNode)) {
+                insertTreeNode($xeTree, newRecords, false);
+            }
+            else {
+                if (targetNode === -1) {
+                    insertTreeNode($xeTree, newRecords, true);
+                }
+                else {
+                    const matchMapObj = XEUtils.findTree(treeFullData, item => targetNode[keyField] === item[keyField], { children: mapChildrenField });
+                    if (matchMapObj) {
+                        const { parent: parentNode } = matchMapObj;
+                        const parentMapChilds = parentNode ? parentNode[mapChildrenField] : treeFullData;
+                        const parentRest = nodeMaps[$xeTree.getNodeId(parentNode)];
+                        const parentLevel = parentRest ? parentRest.level : 0;
+                        treeRecords.forEach((item, i) => {
+                            if (parentNode) {
+                                if (item[parentField] !== parentNode[keyField]) {
+                                    errLog('vxe.error.errProp', [`${parentField}=${item[parentField]}`, `${parentField}=${parentNode[keyField]}`]);
+                                    item[parentField] = parentNode[keyField];
+                                }
+                            }
+                            else {
+                                if (item[parentField] !== null) {
+                                    if (!XEUtils.eqNull(item[parentField])) {
+                                        errLog('vxe.error.errProp', [`${parentField}=${item[parentField]}`, 'null']);
+                                    }
+                                    item[parentField] = null;
+                                }
+                            }
+                            let targetIndex = matchMapObj.index + i;
+                            if (isInsertNextNode) {
+                                targetIndex = targetIndex + 1;
+                            }
+                            parentMapChilds.splice(targetIndex, 0, item);
+                        });
+                        XEUtils.eachTree(treeRecords, (item) => {
+                            const nodeid = $xeTree.getNodeId(item);
+                            const nodeRest = getItemCacheObj(item);
+                            nodeRest.level = parentLevel;
+                            if (item[childrenField]) {
+                                item[mapChildrenField] = item[childrenField];
+                            }
+                            nodeMaps[nodeid] = nodeRest;
+                        }, { children: childrenField });
+                        // 源
+                        if (parentNode) {
+                            const matchObj = XEUtils.findTree(treeFullData, item => targetNode[keyField] === item[keyField], { children: childrenField });
+                            if (matchObj) {
+                                const parentChilds = matchObj.items;
+                                let targetIndex = matchObj.index;
+                                if (isInsertNextNode) {
+                                    targetIndex = targetIndex + 1;
+                                }
+                                parentChilds.splice(targetIndex, 0, ...treeRecords);
+                            }
+                        }
+                    }
+                    else {
+                        warnLog('vxe.error.unableInsert');
+                        insertTreeNode($xeTree, newRecords, true);
+                    }
+                }
+            }
+            const handleStatus = (newItem) => {
+                const nodeid = $xeTree.getNodeId(newItem);
+                // 如果是被删除的数据，则还原状态
+                if (removeNodeMaps[nodeid]) {
+                    delete removeNodeMaps[nodeid];
+                    if (insertNodeMaps[nodeid]) {
+                        delete insertNodeMaps[nodeid];
+                    }
+                }
+                else {
+                    insertNodeMaps[nodeid] = newItem;
+                }
+            };
+            XEUtils.eachTree(treeRecords, handleStatus, { children: mapChildrenField });
+            reactData.removeNodeFlag++;
+            reactData.insertNodeFlag++;
+            $xeTree.cacheNodeMap();
+            $xeTree.handleData(true);
+            $xeTree.updateAfterDataIndex();
+            $xeTree.updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                $xeTree.updateYSpace();
+            }
+            return $xeTree.$nextTick().then(() => {
+                return {
+                    node: newRecords.length ? newRecords[newRecords.length - 1] : null,
+                    nodes: newRecords
+                };
+            });
+        },
+        insert(records) {
+            const $xeTree = this;
+            return $xeTree.handleInsertNodeAt(records, null);
+        },
+        insertAt(records, targetNodeOrNodeid) {
+            const $xeTree = this;
+            return $xeTree.handleInsertNodeAt(records, targetNodeOrNodeid);
+        },
+        insertNextAt(records, targetNodeOrNodeid) {
+            const $xeTree = this;
+            return $xeTree.handleInsertNodeAt(records, targetNodeOrNodeid, true);
+        },
+        handleInsertChildNodeAt(records, parentNodeOrParentId, targetNodeOrNodeid, isInsertNextNode) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { nodeMaps } = internalData;
+            const keyField = $xeTree.computeKeyField;
+            const parentField = $xeTree.computeParentField;
+            if (!transform) {
+                errLog('vxe.error.reqSupportProp', ['insertChild() | insertChildAt() | insertChildNextAt()', 'transform']);
+                return Promise.resolve({ node: null, nodes: [] });
+            }
+            if (!XEUtils.isArray(records)) {
+                records = [records];
+            }
+            let parentNode = parentNodeOrParentId;
+            if (XEUtils.isString(parentNodeOrParentId) || XEUtils.isNumber(parentNodeOrParentId)) {
+                const nodeRest = nodeMaps[parentNodeOrParentId];
+                if (nodeRest) {
+                    parentNode = nodeRest.item;
+                }
+            }
+            return $xeTree.handleInsertNodeAt(records.map((item) => Object.assign({}, item, { [parentField]: parentNode[keyField] })), targetNodeOrNodeid, isInsertNextNode);
+        },
+        insertChild(records, parentNodeOrParentId) {
+            const $xeTree = this;
+            return $xeTree.handleInsertChildNodeAt(records, parentNodeOrParentId, null);
+        },
+        insertChildAt(records, parentNodeOrParentId, targetNode) {
+            const $xeTree = this;
+            return $xeTree.handleInsertChildNodeAt(records, parentNodeOrParentId, targetNode);
+        },
+        insertChildNextAt(records, parentNodeOrParentId, targetNode) {
+            const $xeTree = this;
+            return $xeTree.handleInsertChildNodeAt(records, parentNodeOrParentId, targetNode, true);
+        },
+        getInsertRecords() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { insertNodeMaps } = internalData;
+            const insertRecords = [];
+            XEUtils.each(insertNodeMaps, (item) => {
+                insertRecords.push(item);
+            });
+            return insertRecords;
+        },
+        isInsertByNode(node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const nodeid = $xeTree.getNodeId(node);
+            return !!reactData.insertNodeFlag && !!internalData.insertNodeMaps[nodeid];
+        },
+        remove(nodes) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { treeFullData, insertNodeMaps, removeNodeMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            if (!transform) {
+                errLog('vxe.error.reqSupportProp', ['remove()', 'transform']);
+                return Promise.resolve({ node: null, nodes: [] });
+            }
+            let delList = [];
+            if (!nodes) {
+                nodes = treeFullData;
+            }
+            else if (!XEUtils.isArray(nodes)) {
+                nodes = [nodes];
+            }
+            if (!nodes.length) {
+                return Promise.resolve({ node: null, nodes: [] });
+            }
+            // 如果是新增，则保存记录
+            nodes.forEach((item) => {
+                if (!$xeTree.isInsertByNode(item)) {
+                    const nodeid = $xeTree.getNodeId(item);
+                    removeNodeMaps[nodeid] = item;
+                }
+            });
+            // 从数据源中移除
+            if (treeFullData === nodes) {
+                nodes = delList = treeFullData.slice(0);
+                internalData.treeFullData = [];
+            }
+            else {
+                nodes.forEach((item) => {
+                    const nodeid = $xeTree.getNodeId(item);
+                    const matchMapObj = XEUtils.findTree(treeFullData, item => nodeid === $xeTree.getNodeId(item), { children: mapChildrenField });
+                    if (matchMapObj) {
+                        const rItems = matchMapObj.items.splice(matchMapObj.index, 1);
+                        delList.push(rItems[0]);
+                    }
+                    const matchObj = XEUtils.findTree(treeFullData, item => nodeid === $xeTree.getNodeId(item), { children: childrenField });
+                    if (matchObj) {
+                        const rItems = matchObj.items.splice(matchObj.index, 1);
+                        delList.push(rItems[0]);
+                    }
+                });
+            }
+            // 从新增中移除已删除的数据
+            nodes.forEach((item) => {
+                const nodeid = $xeTree.getNodeId(item);
+                if (insertNodeMaps[nodeid]) {
+                    delete insertNodeMaps[nodeid];
+                }
+            });
+            reactData.removeNodeFlag++;
+            reactData.insertNodeFlag++;
+            $xeTree.cacheNodeMap();
+            $xeTree.handleData(true);
+            $xeTree.updateAfterDataIndex();
+            $xeTree.updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                $xeTree.updateYSpace();
+            }
+            return $xeTree.$nextTick().then(() => {
+                return $xeTree.recalculate();
+            }).then(() => {
+                return { node: delList.length ? delList[delList.length - 1] : null, nodes: delList };
+            });
+        },
+        getRemoveRecords() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { removeNodeMaps } = internalData;
+            const removeRecords = [];
+            XEUtils.each(removeNodeMaps, (item) => {
+                removeRecords.push(item);
+            });
+            return removeRecords;
+        },
+        isRemoveByNode(node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const nodeid = $xeTree.getNodeId(node);
+            return !!reactData.removeNodeFlag && !!internalData.removeNodeMaps[nodeid];
+        },
+        handleNodeMousedownEvent(evnt, node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { drag } = props;
+            const { nodeMaps } = internalData;
+            const targetEl = evnt.currentTarget;
+            const dragConfig = $xeTree.computeDragOpts;
+            const { trigger, isCrossDrag, isPeerDrag, disabledMethod } = dragConfig;
+            const nodeid = $xeTree.getNodeId(node);
+            const triggerTreeNode = getEventTargetNode(evnt, targetEl, 'vxe-tree--node-item-switcher').flag;
+            let isNodeDrag = false;
+            if (drag) {
+                isNodeDrag = trigger === 'node';
+            }
+            if (!triggerTreeNode) {
+                const params = { node, $tree: $xeTree };
+                const itemRest = nodeMaps[nodeid];
+                if (isNodeDrag && (isCrossDrag || isPeerDrag || (itemRest && !itemRest.level)) && !(disabledMethod && disabledMethod(params))) {
+                    $xeTree.handleNodeDragMousedownEvent(evnt, { node });
+                }
+            }
+        },
+        handleNodeClickEvent(evnt, node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const { showRadio, showCheckbox, trigger } = props;
+            const radioOpts = $xeTree.computeRadioOpts;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const isNodeCurrent = $xeTree.computeIsNodeCurrent;
+            let triggerCurrent = false;
+            let triggerRadio = false;
+            let triggerCheckbox = false;
+            let triggerExpand = false;
+            if (isNodeCurrent) {
+                triggerCurrent = true;
+                $xeTree.changeCurrentEvent(evnt, node);
+            }
+            else if (reactData.currentNode) {
+                reactData.currentNode = null;
+            }
+            if (trigger === 'node') {
+                triggerExpand = true;
+                $xeTree.toggleExpandEvent(evnt, node);
+            }
+            if (showRadio && radioOpts.trigger === 'node') {
+                triggerRadio = true;
+                $xeTree.changeRadioEvent(evnt, node);
+            }
+            if (showCheckbox && checkboxOpts.trigger === 'node') {
+                triggerCheckbox = true;
+                $xeTree.changeCheckboxEvent(evnt, node);
+            }
+            $xeTree.dispatchEvent('node-click', { node, triggerCurrent, triggerRadio, triggerCheckbox, triggerExpand }, evnt);
+        },
+        handleNodeDblclickEvent(evnt, node) {
+            const $xeTree = this;
+            $xeTree.dispatchEvent('node-dblclick', { node }, evnt);
+        },
+        handleNodeMouseenterEvent(evnt, node) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const $tooltip = $xeTree.$refs.refTooltip;
+            if (!$tooltip) {
+                return;
+            }
+            const { tooltipStore } = reactData;
+            const { tipTimeout } = internalData;
+            const nodeEl = evnt.currentTarget;
+            const tooltipOpts = $xeTree.computeTooltipOpts;
+            const { showAll, contentMethod } = tooltipOpts;
+            if (tipTimeout) {
+                clearTimeout(tipTimeout);
+                internalData.tipTimeout = undefined;
+            }
+            const titleEl = nodeEl.querySelector('.vxe-tree--node-item-title');
+            const tipOverEl = nodeEl.querySelector('.vxe-tree--node-item-wrapper');
+            if (!tipOverEl) {
+                return;
+            }
+            const cellText = XEUtils.toString(tipOverEl.textContent).trim();
+            const isOver = tipOverEl.scrollWidth > tipOverEl.clientWidth;
+            let isShow = false;
+            let customContent = null;
+            let content = '';
+            if (contentMethod) {
+                customContent = contentMethod({ node, $event: evnt, $tree: $xeTree });
+            }
+            // 是否全部展示
+            if (showAll) {
+                // 如果为 null 默认显示
+                if (XEUtils.eqNull(customContent)) {
+                    isShow = true;
+                    content = cellText;
+                }
+                else if (customContent !== '' && customContent !== false) {
+                    // 如果为 '' | false 则不显示
+                    isShow = true;
+                    content = '' + customContent;
+                }
+            }
+            else {
+                // 如果为 null 使用默认逻辑
+                if (XEUtils.eqNull(customContent)) {
+                    isShow = isOver;
+                    content = cellText;
+                }
+                else if (customContent !== '' && customContent !== false) {
+                    // 如果为 '' | false 则不显示
+                    isShow = true;
+                    content = '' + customContent;
+                }
+                else {
+                    content = cellText;
+                }
+            }
+            if (isShow && content) {
+                const tipContent = getText(content);
+                tooltipStore.visible = true;
+                tooltipStore.node = node;
+                if ($tooltip.open) {
+                    $tooltip.open((isOver ? tipOverEl : titleEl) || tipOverEl, tipContent);
+                }
+            }
+        },
+        handleNodeMouseleaveEvent() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            let $tooltip = $xeTree.$refs.refTooltip;
+            const tooltipOpts = $xeTree.computeTooltipOpts;
+            if ($tooltip && $tooltip.setActived) {
+                $tooltip.setActived(false);
+            }
+            if (tooltipOpts.enterable) {
+                internalData.tipTimeout = setTimeout(() => {
+                    $tooltip = $xeTree.$refs.refTooltip;
+                    if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
+                        $xeTree.closeTooltip();
+                    }
+                    internalData.tipTimeout = undefined;
+                }, tooltipOpts.leaveDelay);
+            }
+            else {
+                $xeTree.closeTooltip();
+            }
+        },
+        closeTooltip() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const { tooltipStore } = reactData;
+            if (tooltipStore.visible) {
+                tooltipStore.visible = false;
+                tooltipStore.node = null;
+                const $tooltip = $xeTree.$refs.refTooltip;
+                if ($tooltip) {
+                    $tooltip.close();
+                }
+            }
+            return $xeTree.$nextTick();
+        },
+        handleContextmenuEvent(evnt, node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const { menuConfig } = props;
+            const isNodeCurrent = $xeTree.computeIsNodeCurrent;
+            const menuOpts = $xeTree.computeMenuOpts;
+            if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+                const { options, visibleMethod } = menuOpts;
+                if (!visibleMethod || visibleMethod({ $tree: $xeTree, options, node })) {
+                    if (isNodeCurrent) {
+                        $xeTree.changeCurrentEvent(evnt, node);
+                    }
+                    else if (reactData.currentNode) {
+                        reactData.currentNode = null;
+                    }
+                    if (VxeUI.contextMenu) {
+                        VxeUI.contextMenu.openByEvent(evnt, {
+                            options,
+                            events: {
+                                optionClick(eventParams) {
+                                    const { option } = eventParams;
+                                    const gMenuOpts = menus.get(option.code);
+                                    const tmMethod = gMenuOpts ? gMenuOpts.treeMenuMethod : null;
+                                    const params = {
+                                        menu: option,
+                                        node,
+                                        $event: evnt,
+                                        $tree: $xeTree,
+                                        /**
+                                         * @@deprecated
+                                         */
+                                        option
+                                    };
+                                    if (tmMethod) {
+                                        tmMethod(params, evnt);
+                                    }
+                                    $xeTree.dispatchEvent('menu-click', params, eventParams.$event);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+            $xeTree.dispatchEvent('node-menu', { node }, evnt);
+        },
+        handleAsyncTreeExpandChilds(node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { loadMethod } = props;
+            const { checkStrictly } = checkboxOpts;
+            return new Promise(resolve => {
+                if (loadMethod) {
+                    const { nodeMaps } = internalData;
+                    const nodeid = $xeTree.getNodeId(node);
+                    const nodeItem = nodeMaps[nodeid];
+                    internalData.treeExpandLazyLoadedMaps[nodeid] = true;
+                    Promise.resolve(loadMethod({ $tree: $xeTree, node })).then((childRecords) => {
+                        const { treeExpandLazyLoadedMaps } = internalData;
+                        nodeItem.treeLoaded = true;
+                        if (treeExpandLazyLoadedMaps[nodeid]) {
+                            treeExpandLazyLoadedMaps[nodeid] = false;
+                        }
+                        if (!XEUtils.isArray(childRecords)) {
+                            childRecords = [];
+                        }
+                        if (childRecords) {
+                            return $xeTree.loadChildrenNode(node, childRecords).then(childNodes => {
+                                const { treeExpandedMaps } = internalData;
+                                if (childNodes.length && !treeExpandedMaps[nodeid]) {
+                                    treeExpandedMaps[nodeid] = true;
+                                }
+                                reactData.updateExpandedFlag++;
+                                // 如果当前节点已选中，则展开后子节点也被选中
+                                if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
+                                    $xeTree.handleCheckedCheckboxNode(childNodes, true);
+                                }
+                                $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                                return $xeTree.$nextTick();
+                            });
+                        }
+                        else {
+                            $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                        }
+                    }).catch((e) => {
+                        const { treeExpandLazyLoadedMaps } = internalData;
+                        nodeItem.treeLoaded = false;
+                        if (treeExpandLazyLoadedMaps[nodeid]) {
+                            treeExpandLazyLoadedMaps[nodeid] = false;
+                        }
+                        $xeTree.dispatchEvent('load-error', { node, data: e }, new Event('load-error'));
+                    }).finally(() => {
+                        $xeTree.handleTreeToList();
+                        $xeTree.handleData();
+                        return $xeTree.recalculate();
+                    });
+                }
+                else {
+                    resolve();
+                }
+            });
+        },
+        /**
+         * 展开与收起树节点
+         * @param nodeList
+         * @param expanded
+         * @returns
+         */
+        handleBaseTreeExpand(nodeList, expanded) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { lazy, accordion, toggleMethod } = props;
+            const { treeExpandLazyLoadedMaps, treeExpandedMaps } = internalData;
+            const { nodeMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const hasChildField = $xeTree.computeHasChildField;
+            const result = [];
+            let validNodes = toggleMethod ? nodeList.filter((node) => toggleMethod({ $tree: $xeTree, expanded, node })) : nodeList;
+            if (accordion) {
+                validNodes = validNodes.length ? [validNodes[validNodes.length - 1]] : [];
+                // 同一级只能展开一个
+                const nodeid = $xeTree.getNodeId(validNodes[0]);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items.forEach(item => {
+                        const itemNodeId = $xeTree.getNodeId(item);
+                        if (treeExpandedMaps[itemNodeId]) {
+                            delete treeExpandedMaps[itemNodeId];
+                        }
+                    });
+                }
+            }
+            const expandNodes = [];
+            if (expanded) {
+                validNodes.forEach((item) => {
+                    const itemNodeId = $xeTree.getNodeId(item);
+                    if (!treeExpandedMaps[itemNodeId]) {
+                        const nodeItem = nodeMaps[itemNodeId];
+                        const isLoad = lazy && item[hasChildField] && !nodeItem.treeLoaded && !treeExpandLazyLoadedMaps[itemNodeId];
+                        // 是否使用懒加载
+                        if (isLoad) {
+                            result.push($xeTree.handleAsyncTreeExpandChilds(item));
+                        }
+                        else {
+                            if (item[childrenField] && item[childrenField].length) {
+                                treeExpandedMaps[itemNodeId] = true;
+                                expandNodes.push(item);
+                            }
+                        }
+                    }
+                });
+            }
+            else {
+                validNodes.forEach(item => {
+                    const itemNodeId = $xeTree.getNodeId(item);
+                    if (treeExpandedMaps[itemNodeId]) {
+                        delete treeExpandedMaps[itemNodeId];
+                        expandNodes.push(item);
+                    }
+                });
+            }
+            reactData.updateExpandedFlag++;
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return Promise.all(result).then(() => $xeTree.recalculate());
+        },
+        toggleExpandEvent(evnt, node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { lazy } = props;
+            const { treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
+            const nodeid = $xeTree.getNodeId(node);
+            const expanded = !treeExpandedMaps[nodeid];
+            evnt.stopPropagation();
+            if (!lazy || !treeExpandLazyLoadedMaps[nodeid]) {
+                $xeTree.handleBaseTreeExpand([node], expanded);
+            }
+            $xeTree.dispatchEvent('node-expand', { node, expanded }, evnt);
+        },
+        updateCheckboxStatus() {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { transform } = props;
+            const { selectCheckboxMaps, indeterminateNodeMaps, afterTreeList } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { checkStrictly, checkMethod } = checkboxOpts;
+            if (!checkStrictly) {
+                const childNodeMaps = {};
+                const childNodeList = [];
+                XEUtils.eachTree(afterTreeList, (node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    const childList = node[childrenField];
+                    if (childList && childList.length && !childNodeMaps[nodeid]) {
+                        childNodeMaps[nodeid] = 1;
+                        childNodeList.unshift([node, nodeid, childList]);
+                    }
+                }, { children: transform ? mapChildrenField : childrenField });
+                childNodeList.forEach(vals => {
+                    const node = vals[0];
+                    const nodeid = vals[1];
+                    const childList = vals[2];
+                    let sLen = 0; // 已选
+                    let hLen = 0; // 半选
+                    let vLen = 0; // 有效子行
+                    const cLen = childList.length; // 子行
+                    childList.forEach(checkMethod
+                        ? (item) => {
+                            const childNodeid = $xeTree.getNodeId(item);
+                            const isSelect = selectCheckboxMaps[childNodeid];
+                            if (checkMethod({ $tree: $xeTree, node: item })) {
+                                if (isSelect) {
+                                    sLen++;
+                                }
+                                else if (indeterminateNodeMaps[childNodeid]) {
+                                    hLen++;
+                                }
+                                vLen++;
+                            }
+                            else {
+                                if (isSelect) {
+                                    sLen++;
+                                }
+                                else if (indeterminateNodeMaps[childNodeid]) {
+                                    hLen++;
+                                }
+                            }
+                        }
+                        : item => {
+                            const childNodeid = $xeTree.getNodeId(item);
+                            const isSelect = selectCheckboxMaps[childNodeid];
+                            if (isSelect) {
+                                sLen++;
+                            }
+                            else if (indeterminateNodeMaps[childNodeid]) {
+                                hLen++;
+                            }
+                            vLen++;
+                        });
+                    let isSelected = false;
+                    if (cLen > 0) {
+                        if (vLen > 0) {
+                            isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
+                        }
+                        else {
+                            // 如果存在子项禁用
+                            if ((sLen > 0 && sLen >= vLen)) {
+                                isSelected = true;
+                            }
+                            else if (selectCheckboxMaps[nodeid]) {
+                                isSelected = true;
+                            }
+                            else {
+                                isSelected = false;
+                            }
+                        }
+                    }
+                    else {
+                        // 如果无子项
+                        isSelected = selectCheckboxMaps[nodeid];
+                    }
+                    const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
+                    if (isSelected) {
+                        selectCheckboxMaps[nodeid] = node;
+                        if (indeterminateNodeMaps[nodeid]) {
+                            delete indeterminateNodeMaps[nodeid];
+                        }
+                    }
+                    else {
+                        if (selectCheckboxMaps[nodeid]) {
+                            delete selectCheckboxMaps[nodeid];
+                        }
+                        if (halfSelect) {
+                            indeterminateNodeMaps[nodeid] = node;
+                        }
+                        else {
+                            if (indeterminateNodeMaps[nodeid]) {
+                                delete indeterminateNodeMaps[nodeid];
+                            }
+                        }
+                    }
+                });
+                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, nodeMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { checkStrictly, checkMode, checkMethod } = checkboxOpts;
+            const nodeid = $xeTree.getNodeId(node);
+            const childList = XEUtils.get(node, childrenField);
+            const isExistChild = childList && childList.length > 0;
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nLevel = nodeItem.level;
+            const isDisabled = checkMethod ? !checkMethod({ $tree: $xeTree, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+            if (isDisabled) {
+                return;
+            }
+            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 nodeids = XEUtils.keys(selectCheckboxMaps);
+            const value = nodeids.map(deModelValue);
+            $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;
+            const internalData = $xeTree.internalData;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { nodeMaps } = internalData;
+            const radioOpts = $xeTree.computeRadioOpts;
+            const childrenField = $xeTree.computeChildrenField;
+            const { checkMode, checkMethod } = radioOpts;
+            const nodeid = $xeTree.getNodeId(node);
+            const childList = XEUtils.get(node, childrenField);
+            const isExistChild = childList && childList.length > 0;
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nLevel = nodeItem.level;
+            const isDisabled = checkMethod ? !checkMethod({ $tree: $xeTree, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+            if (isDisabled) {
+                return;
+            }
+            const isChecked = true;
+            const value = deModelValue(nodeid);
+            reactData.selectRadioKey = nodeid;
+            $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 deModelValue($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[enModelValue(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;
+            $xeTree.emitRadioMode(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 = enModelValue(nodeKey);
+            $xeTree.emitRadioMode(nodeKey);
+            return $xeTree.$nextTick();
+        },
+        getCheckboxNodeIds() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { selectCheckboxMaps } = internalData;
+            const nodeKeys = [];
+            XEUtils.each(selectCheckboxMaps, (item, nodeId) => {
+                nodeKeys.push(deModelValue(nodeId));
+            });
+            return nodeKeys;
+        },
+        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.indeterminateNodeMaps = {};
+            internalData.selectCheckboxMaps = {};
+            reactData.updateCheckboxFlag++;
+            $xeTree.updateCheckboxStatus();
+            $xeTree.emitCheckboxMode([]);
+            return $xeTree.$nextTick().then(() => {
+                return { checkNodeKeys: [], checkNodes: [] };
+            });
+        },
+        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 = [];
+            const checkNodes = [];
+            if (checked) {
+                XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                    const nodeid = $xeTree.getNodeId(node);
+                    checkKeys.push(nodeid);
+                    checkNodes.push(node);
+                    selectMaps[nodeid] = true;
+                }, { children: transform ? mapChildrenField : childrenField });
+            }
+            internalData.indeterminateNodeMaps = {};
+            internalData.selectCheckboxMaps = selectMaps;
+            reactData.updateCheckboxFlag++;
+            $xeTree.updateCheckboxStatus();
+            return $xeTree.$nextTick().then(() => {
+                return { checkNodeKeys: checkKeys, checkNodes };
+            });
+        },
+        clearExpandNode() {
+            const $xeTree = this;
+            return $xeTree.clearAllExpandNode();
+        },
+        clearAllExpandNode() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { scrollYLoad } = reactData;
+            const { nodeMaps, scrollYStore } = internalData;
+            XEUtils.each(nodeMaps, (nodeItem) => {
+                nodeItem.treeLoaded = false;
+            });
+            internalData.treeExpandedMaps = {};
+            reactData.updateExpandedFlag++;
+            reactData.topSpaceHeight = 0;
+            scrollYStore.startIndex = 0;
+            scrollYStore.endIndex = 1;
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate().then(() => {
+                if (scrollYLoad) {
+                    $xeTree.loadYData();
+                }
+                return $xeTree.recalculate();
+            });
+        },
+        setExpandByNodeId(nodeKeys, expanded) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodeKeys) {
+                if (!XEUtils.isArray(nodeKeys)) {
+                    nodeKeys = [nodeKeys];
+                }
+                nodeKeys.forEach((nodeKey) => {
+                    const nodeid = enModelValue(nodeKey);
+                    handleSetExpand(nodeid, expanded, treeExpandedMaps);
+                });
+                reactData.updateExpandedFlag++;
+            }
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate();
+        },
+        getExpandNodeIds() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            const nodeKeys = [];
+            XEUtils.each(treeExpandedMaps, (item, nodeId) => {
+                nodeKeys.push(deModelValue(nodeId));
+            });
+            return nodeKeys;
+        },
+        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();
+        },
+        toggleExpandByNodeId(nodeKeys) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeExpandedMaps } = internalData;
+            if (nodeKeys) {
+                if (!XEUtils.isArray(nodeKeys)) {
+                    nodeKeys = [nodeKeys];
+                }
+                nodeKeys.forEach((nodeKey) => {
+                    const nodeid = enModelValue(nodeKey);
+                    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;
+            const { transform } = props;
+            const { scrollYLoad } = reactData;
+            const { scrollYStore, treeExpandedMaps } = internalData;
+            const childrenField = $xeTree.computeChildrenField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            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 });
+            }
+            else {
+                internalData.treeExpandedMaps = {};
+            }
+            reactData.updateExpandedFlag++;
+            reactData.topSpaceHeight = 0;
+            scrollYStore.startIndex = 0;
+            scrollYStore.endIndex = 1;
+            $xeTree.handleTreeToList();
+            $xeTree.handleData();
+            return $xeTree.recalculate().then(() => {
+                if (scrollYLoad) {
+                    $xeTree.loadYData();
+                }
+                return $xeTree.recalculate();
+            });
+        },
+        reloadExpandNode(node) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const { lazy } = props;
+            if (lazy) {
+                $xeTree.clearExpandLoaded(node);
+                return $xeTree.handleAsyncTreeExpandChilds(node);
+            }
+            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;
+                }
+            }
+            return $xeTree.recalculate();
+        },
+        /**
+         * 用于树结构，给行数据加载子节点
+         */
+        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 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, (childNode, index, items, path, parent, nodes) => {
+                    const itemNodeId = $xeTree.getNodeId(childNode);
+                    nodeMaps[itemNodeId] = {
+                        item: childNode,
+                        index: -1,
+                        $index: -1,
+                        _index: -1,
+                        items,
+                        parent: parent || parentNodeItem.item,
+                        nodes: parentNodes.concat(nodes),
+                        level: parentLevel + nodes.length,
+                        treeIndex: -1,
+                        lineCount: 0,
+                        treeLoaded: false
+                    };
+                }, { children: childrenField });
+                node[childrenField] = nodeList;
+                if (transform) {
+                    node[mapChildrenField] = nodeList;
+                }
+                $xeTree.updateAfterDataIndex();
+                return nodeList;
+            });
+        },
+        findNodeIndexOf(list, node) {
+            const $xeTree = this;
+            return node ? XEUtils.findIndexOf(list, item => $xeTree.eqNode(item, node)) : -1;
+        },
+        eqNode(node1, node2) {
+            const $xeTree = this;
+            if (node1 && node2) {
+                if (node1 === node2) {
+                    return true;
+                }
+                return $xeTree.getNodeId(node1) === $xeTree.getNodeId(node2);
+            }
+            return false;
+        },
+        handleCrossTreeNodeDragCancelEvent() {
+            const $xeTree = this;
+            clearNodeDragData($xeTree);
+            clearCrossTreeDragStatus($xeTree);
+        },
+        /**
+           * 处理跨树拖拽完成
+           */
+        handleCrossTreeNodeDragFinishEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo($xeTree);
+            const { treeList } = reactData;
+            const { nodeMaps } = internalData;
+            const dragOpts = $xeTree.computeDragOpts;
+            const { animation, isCrossTreeDrag } = dragOpts;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const el = $xeTree.$refs.refElem;
+            if (!el) {
+                return;
+            }
+            if (isCrossTreeDrag && crossTreeDragNodeObj && crossTreeDragNodeInfo) {
+                const { node: dragNode } = crossTreeDragNodeInfo;
+                if (dragNode) {
+                    const dragNodeid = $xeTree.getNodeId(dragNode);
+                    const dragNodeRest = nodeMaps[dragNodeid];
+                    let dragNodeHeight = 0;
+                    let rsIndex = -1;
+                    if (dragNodeRest) {
+                        if (animation) {
+                            const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`);
+                            const targetItemEl = oldItemEl;
+                            if (targetItemEl) {
+                                dragNodeHeight = targetItemEl.offsetHeight;
+                            }
+                        }
+                        rsIndex = dragNodeRest.$index;
+                    }
+                    const dragRangeList = rsIndex > -1 && rsIndex < treeList.length - 1 ? treeList.slice(rsIndex + 1) : [];
+                    const dragList = XEUtils.toTreeArray([dragNode], {
+                        updated: true,
+                        children: mapChildrenField
+                    });
+                    $xeTree.remove(dragList).then(() => {
+                        if (animation && dragNodeHeight && dragRangeList.length) {
+                            const wrapperEl = el;
+                            const dtClss = [];
+                            dragRangeList.forEach(item => {
+                                const nodeid = $xeTree.getNodeId(item);
+                                dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                            });
+                            const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                            moveRowAnimateToTb(dtTrList, dragNodeHeight);
+                        }
+                    });
+                    $xeTree.dispatchEvent('node-remove-dragend', {
+                        node: dragNode
+                    }, evnt);
+                    handleNodeDragEndClearStatus($xeTree);
+                }
+            }
+        },
+        /**
+         * 处理跨树拖至新的空树
+         */
+        handleCrossTreeNodeDragoverEmptyEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { treeList } = reactData;
+            const dragOpts = $xeTree.computeDragOpts;
+            const { isCrossTreeDrag } = dragOpts;
+            if (isCrossTreeDrag && crossTreeDragNodeObj && !treeList.length) {
+                const { $oldTree, $newTree } = crossTreeDragNodeObj;
+                if ($oldTree) {
+                    const oldTreeReactData = $oldTree;
+                    if ($oldTree.xID !== $xeTree.xID) {
+                        if ($newTree && $newTree.xID !== $xeTree.xID) {
+                            $newTree.hideCrossTreeNodeDropClearStatus();
+                        }
+                        evnt.preventDefault();
+                        $oldTree.hideCrossTreeNodeDropClearStatus();
+                        crossTreeDragNodeObj.$newTree = $xeTree;
+                        internalData.prevDragNode = null;
+                        reactData.dragTipText = oldTreeReactData.dragTipText;
+                        showDropTip($xeTree, evnt, evnt.currentTarget, true, '');
+                    }
+                }
+            }
+        },
+        /**
+         * 处理跨树拖插入
+         */
+        handleCrossTreeNodeDragInsertEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo($xeTree);
+            const { prevDragNode, prevDragPos, prevDragToChild } = internalData;
+            const dragOpts = $xeTree.computeDragOpts;
+            const { animation, isSelfToChildDrag, isCrossTreeDrag, dragEndMethod, dragToChildMethod } = dragOpts;
+            const parentField = $xeTree.computeParentField;
+            const mapChildrenField = $xeTree.computeMapChildrenField;
+            const childrenField = $xeTree.computeChildrenField;
+            // 跨表拖拽
+            if (isCrossTreeDrag && crossTreeDragNodeObj && crossTreeDragNodeInfo) {
+                const { node: oldNode } = crossTreeDragNodeInfo;
+                const { $oldTree } = crossTreeDragNodeObj;
+                const el = $xeTree.$refs.refElem;
+                if (!el) {
+                    return;
+                }
+                if ($oldTree && oldNode) {
+                    const dragNode = oldNode;
+                    let dragOffsetIndex = -1;
+                    if (prevDragNode) {
+                        dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+                    }
+                    const dragParams = {
+                        oldNode: dragNode,
+                        newNode: prevDragNode,
+                        dragNode,
+                        dragPos: prevDragPos,
+                        dragToChild: !!prevDragToChild,
+                        offsetIndex: dragOffsetIndex
+                    };
+                    const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+                    const errRest = {
+                        status: false
+                    };
+                    Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
+                        if (!status) {
+                            if ($oldTree) {
+                                if ($oldTree.xID !== $xeTree.xID) {
+                                    $oldTree.handleCrossTreeNodeDragCancelEvent(evnt);
+                                }
+                            }
+                            handleNodeDragEndClearStatus($xeTree);
+                            return errRest;
+                        }
+                        let insertRest = Promise.resolve();
+                        const dragList = XEUtils.toTreeArray([dragNode], {
+                            updated: true,
+                            children: mapChildrenField
+                        });
+                        $oldTree.handleCrossTreeNodeDragFinishEvent(evnt);
+                        if (prevDragNode) {
+                            dragNode[parentField] = prevDragNode[parentField];
+                        }
+                        else {
+                            dragNode[parentField] = null;
+                        }
+                        dragList.forEach(item => {
+                            item[childrenField] = undefined;
+                            item[mapChildrenField] = undefined;
+                        });
+                        if (prevDragNode) {
+                            if (prevDragPos === 'bottom') {
+                                insertRest = $xeTree.insertNextAt(dragList, prevDragNode);
+                            }
+                            else {
+                                insertRest = $xeTree.insertAt(dragList, prevDragNode);
+                            }
+                        }
+                        else {
+                            insertRest = $xeTree.insert(dragList);
+                        }
+                        $xeTree.dispatchEvent('node-insert-dragend', {
+                            oldNode,
+                            newNode: prevDragNode,
+                            dragNode,
+                            dragPos: prevDragPos,
+                            dragToChild: isDragToChildFlag,
+                            offsetIndex: dragOffsetIndex
+                        }, evnt);
+                        clearNodeDragData($xeTree);
+                        insertRest.then(() => {
+                            const { treeList } = reactData;
+                            const { nodeMaps } = internalData;
+                            const oldNodeid = $xeTree.getNodeId(dragNode);
+                            const oldNodeRest = nodeMaps[oldNodeid];
+                            let dragNodeHeight = 0;
+                            let rsIndex = -1;
+                            if (oldNodeRest) {
+                                if (animation) {
+                                    const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${oldNodeid}"]`);
+                                    const targetItemEl = oldItemEl;
+                                    if (targetItemEl) {
+                                        dragNodeHeight = targetItemEl.offsetHeight;
+                                    }
+                                }
+                                rsIndex = oldNodeRest.$index;
+                            }
+                            const dragRangeList = rsIndex > -1 ? treeList.slice(rsIndex) : [];
+                            if (animation && dragNodeHeight && dragRangeList.length) {
+                                const wrapperEl = el;
+                                const dtClss = [];
+                                dragRangeList.forEach(item => {
+                                    const nodeid = $xeTree.getNodeId(item);
+                                    dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                                });
+                                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                moveRowAnimateToTb(dtTrList, -dragNodeHeight);
+                            }
+                        });
+                    });
+                }
+            }
+        },
+        hideCrossTreeNodeDropClearStatus() {
+            const $xeTree = this;
+            hideDropTip($xeTree);
+        },
+        getCheckboxIndeterminateNodes() {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const { nodeMaps, indeterminateNodeMaps } = internalData;
+            const list = [];
+            XEUtils.each(indeterminateNodeMaps, (item, nodeid) => {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    list.push(nodeItem.item);
+                }
+            });
+            return list;
+        },
+        handleNodeDragMousedownEvent(evnt, params) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo($xeTree);
+            evnt.stopPropagation();
+            const { node } = params;
+            const dragConfig = $xeTree.computeDragOpts;
+            const { isCrossTreeDrag, trigger, dragStartMethod } = dragConfig;
+            const dragEl = evnt.currentTarget;
+            const itemEl = trigger === 'node' ? dragEl : dragEl.parentElement.parentElement;
+            clearNodeDropOrigin($xeTree);
+            if (dragStartMethod && !dragStartMethod(params)) {
+                itemEl.draggable = false;
+                reactData.dragNode = null;
+                hideDropTip($xeTree);
+                return;
+            }
+            if (isCrossTreeDrag) {
+                crossTreeDragNodeInfo.node = node;
+                crossTreeDragNodeObj = { $oldTree: $xeTree, $newTree: null };
+            }
+            reactData.dragNode = node;
+            reactData.isCrossDragNode = false;
+            itemEl.draggable = true;
+            updateNodeDropOrigin($xeTree, node);
+            updateNodeDropTipContent($xeTree, itemEl);
+            $xeTree.dispatchEvent('node-dragstart', params, evnt);
+        },
+        handleNodeDragMouseupEvent() {
+            const $xeTree = this;
+            clearDragStatus($xeTree);
+        },
+        handleNodeDragDragstartEvent(evnt) {
+            if (evnt.dataTransfer) {
+                evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
+            }
+        },
+        handleNodeDragDragendEvent(evnt) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { lazy } = props;
+            const { dragNode } = reactData;
+            const { nodeMaps, prevDragNode, prevDragPos, prevDragToChild } = internalData;
+            const hasChildField = $xeTree.computeHasChildField;
+            const dragConfig = $xeTree.computeDragOpts;
+            const { isCrossDrag, isCrossTreeDrag } = dragConfig;
+            // 跨树拖拽
+            if (isCrossTreeDrag && crossTreeDragNodeObj) {
+                const { $newTree } = crossTreeDragNodeObj;
+                if ($newTree && $newTree.xID !== $xeTree.xID) {
+                    if (isCrossDrag) {
+                        $newTree.handleCrossTreeNodeDragInsertEvent(evnt);
+                    }
+                    return;
+                }
+            }
+            if (lazy && prevDragToChild) {
+                // 懒加载
+                const newNodeid = $xeTree.getNodeId(prevDragNode);
+                const nodeRest = nodeMaps[newNodeid];
+                if (prevDragNode[hasChildField]) {
+                    if (nodeRest && nodeRest.treeLoaded) {
+                        handleNodeDragSwapEvent($xeTree, evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+                    }
+                }
+                else {
+                    handleNodeDragSwapEvent($xeTree, evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+                }
+            }
+            else {
+                handleNodeDragSwapEvent($xeTree, evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+            }
+        },
+        handleNodeDragDragoverEvent(evnt) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { lazy, transform } = props;
+            const { dragNode } = reactData;
+            const { nodeMaps } = internalData;
+            const dragConfig = $xeTree.computeDragOpts;
+            const parentField = $xeTree.computeParentField;
+            const hasChildField = $xeTree.computeHasChildField;
+            const { isCrossTreeDrag, isCrossDrag, isPeerDrag, isToChildDrag } = dragConfig;
+            if (!dragNode && !isCrossDrag) {
+                evnt.preventDefault();
+            }
+            const isControlKey = hasControlKey(evnt);
+            const itemEl = evnt.currentTarget;
+            const nodeid = itemEl.getAttribute('nodeid') || '';
+            const nodeItem = nodeMaps[nodeid];
+            if (nodeItem) {
+                evnt.preventDefault();
+                const node = nodeItem.item;
+                const offsetY = evnt.clientY - itemEl.getBoundingClientRect().y;
+                const dragPos = offsetY < itemEl.clientHeight / 2 ? 'top' : 'bottom';
+                internalData.prevDragToChild = !!(transform && (isCrossDrag && isToChildDrag) && isControlKey);
+                internalData.prevDragNode = node;
+                internalData.prevDragPos = dragPos;
+                // 跨树拖拽
+                if (isCrossTreeDrag && isCrossDrag && crossTreeDragNodeObj) {
+                    const { $oldTree, $newTree } = crossTreeDragNodeObj;
+                    if ($oldTree) {
+                        const oldTreeReactData = $oldTree.reactData;
+                        if ($oldTree.xID === $xeTree.xID) {
+                            if ($newTree) {
+                                $newTree.hideCrossTreeNodeDropClearStatus();
+                            }
+                            reactData.isCrossDragNode = false;
+                            oldTreeReactData.isCrossDragNode = false;
+                            crossTreeDragNodeObj.$newTree = null;
+                        }
+                        else if (isCrossDrag) {
+                            if ($newTree && $newTree.xID !== $xeTree.xID) {
+                                $newTree.hideCrossTreeNodeDropClearStatus();
+                            }
+                            $oldTree.hideCrossTreeNodeDropClearStatus();
+                            oldTreeReactData.isCrossDragNode = true;
+                            reactData.dragTipText = oldTreeReactData.dragTipText;
+                            crossTreeDragNodeObj.$newTree = $xeTree;
+                            showDropTip($xeTree, evnt, itemEl, true, dragPos);
+                            return;
+                        }
+                    }
+                }
+                if ((dragNode && $xeTree.getNodeId(dragNode) === nodeid) ||
+                    (isControlKey && lazy && node[hasChildField] && nodeItem && !nodeItem.treeLoaded) ||
+                    (!isCrossDrag && transform && (isPeerDrag ? dragNode[parentField] !== node[parentField] : nodeItem.level))) {
+                    showDropTip($xeTree, evnt, itemEl, false, dragPos);
+                    return;
+                }
+                showDropTip($xeTree, evnt, itemEl, true, dragPos);
+                $xeTree.dispatchEvent('node-dragover', {
+                    oldRNode: dragNode,
+                    targetNode: node,
+                    dragPos
+                }, evnt);
+            }
+        },
+        //
+        // Render
+        //
+        renderDragIcon(h, node, nodeid) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const internalData = $xeTree.internalData;
+            const { drag, transform } = props;
+            const { nodeMaps } = internalData;
+            const dragOpts = $xeTree.computeDragOpts;
+            const { showIcon, isPeerDrag, isCrossDrag, visibleMethod } = dragOpts;
+            const params = { node, $tree: $xeTree };
+            if (drag && showIcon && transform && (!visibleMethod || visibleMethod(params))) {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem && (isPeerDrag || isCrossDrag || !nodeItem.level)) {
+                    const dragConfig = $xeTree.computeDragOpts;
+                    const { icon, trigger, disabledMethod } = dragConfig;
+                    const isDisabled = disabledMethod && disabledMethod(params);
+                    const ons = {};
+                    if (trigger !== 'node') {
+                        ons.mousedown = (evnt) => {
+                            if (!isDisabled) {
+                                $xeTree.handleNodeDragMousedownEvent(evnt, params);
+                            }
+                        };
+                        ons.mouseup = $xeTree.handleNodeDragMouseupEvent;
+                    }
+                    return h('div', {
+                        class: ['vxe-tree--drag-handle', {
+                                'is--disabled': isDisabled
+                            }],
+                        on: ons
+                    }, [
+                        h('i', {
+                            class: icon || getIcon().TREE_DRAG
+                        })
+                    ]);
+                }
+            }
+            return renderEmptyElement($xeTree);
+        },
+        renderRadio(h, node, nodeid, isExistChild, nLevel, isChecked) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const { showRadio } = props;
+            const radioOpts = $xeTree.computeRadioOpts;
+            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = radioOpts;
+            const isVisible = visibleMethod ? visibleMethod({ $tree: $xeTree, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+            if (showRadio && showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $tree: $xeTree, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+                return h('div', {
+                    class: ['vxe-tree--radio-option', {
+                            'is--checked': isChecked,
+                            'is--disabled': isDisabled
+                        }],
+                    on: {
+                        click: (evnt) => {
+                            if (!isDisabled) {
+                                $xeTree.changeRadioEvent(evnt, node);
+                            }
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : getIcon().RADIO_UNCHECKED]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeTree);
+        },
+        renderCheckbox(h, node, nodeid, isExistChild, nLevel, isChecked, isIndeterminate) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const { showCheckbox } = props;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const { showIcon, checkMode, checkMethod, visibleMode, visibleMethod } = checkboxOpts;
+            const isVisible = visibleMethod ? visibleMethod({ $tree: $xeTree, node }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+            if (showCheckbox && showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $tree: $xeTree, node }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+                return h('div', {
+                    class: ['vxe-tree--checkbox-option', {
+                            'is--checked': isChecked,
+                            'is--indeterminate': isIndeterminate,
+                            'is--disabled': isDisabled
+                        }],
+                    on: {
+                        click: (evnt) => {
+                            if (!isDisabled) {
+                                $xeTree.changeCheckboxEvent(evnt, node);
+                            }
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : (isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED)]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeTree);
+        },
+        renderNode(h, node, nodeid) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const slots = $xeTree.$scopedSlots;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const { lazy, drag, transform, showRadio, showCheckbox, showLine, visibleMethod, iconOpen, iconClose, iconLoaded, showIcon } = props;
+            const { currentNode, selectRadioKey, updateExpandedFlag } = reactData;
+            const { afterTreeList, nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
+            const tooltipOpts = $xeTree.computeTooltipOpts;
+            const { mode: tipMode } = tooltipOpts;
+            const childrenField = $xeTree.computeChildrenField;
+            const titleField = $xeTree.computeTitleField;
+            const hasChildField = $xeTree.computeHasChildField;
+            const childList = XEUtils.get(node, childrenField);
+            const isExistChild = childList && childList.length > 0;
+            const iconSlot = slots.icon;
+            const titleSlot = slots.title;
+            const extraSlot = slots.extra;
+            const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
+            const nodeItem = nodeMaps[nodeid] || {};
+            const nodeTitle = getText(XEUtils.get(node, titleField));
+            const nLevel = nodeItem.level;
+            let isRadioChecked = false;
+            if (showRadio) {
+                isRadioChecked = nodeid === String(selectRadioKey);
+            }
+            let isCheckboxChecked = false;
+            let isIndeterminate = false;
+            if (showCheckbox) {
+                isCheckboxChecked = $xeTree.isCheckedByCheckboxNodeId(nodeid);
+                isIndeterminate = $xeTree.isIndeterminateByCheckboxNodeid(nodeid);
+            }
+            let hasLazyChilds = false;
+            let isLazyLoading = false;
+            let isLazyLoaded = false;
+            if (lazy) {
+                isLazyLoading = !!treeExpandLazyLoadedMaps[nodeid];
+                hasLazyChilds = node[hasChildField];
+                isLazyLoaded = !!nodeItem.treeLoaded;
+            }
+            const prevNode = nodeItem.items[nodeItem.treeIndex - 1];
+            const nParams = { node, isExpand, $tree: $xeTree };
+            const itemOns = {
+                mousedown(evnt) {
+                    $xeTree.handleNodeMousedownEvent(evnt, node);
+                },
+                mouseup: $xeTree.handleNodeDragMouseupEvent,
+                click(evnt) {
+                    $xeTree.handleNodeClickEvent(evnt, node);
+                },
+                dblclick(evnt) {
+                    $xeTree.handleNodeDblclickEvent(evnt, node);
+                },
+                contextmenu(evnt) {
+                    $xeTree.handleContextmenuEvent(evnt, node);
+                }
+            };
+            if (tipMode === 'tooltip') {
+                itemOns.mouseenter = (evnt) => {
+                    $xeTree.handleNodeMouseenterEvent(evnt, node);
+                };
+                itemOns.mouseleave = $xeTree.handleNodeMouseleaveEvent;
+            }
+            // 拖拽行事件
+            if (drag && transform) {
+                itemOns.dragstart = $xeTree.handleNodeDragDragstartEvent;
+                itemOns.dragend = $xeTree.handleNodeDragDragendEvent;
+                itemOns.dragover = $xeTree.handleNodeDragDragoverEvent;
+            }
+            return h('div', {
+                key: nodeid,
+                class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
+                attrs: {
+                    nodeid,
+                    title: tipMode === 'title' ? nodeTitle : ''
+                },
+                on: itemOns
+            }, [
+                h('div', {
+                    class: ['vxe-tree--node-item', {
+                            'is--current': currentNode && nodeid === $xeTree.getNodeId(currentNode),
+                            'is-radio--checked': isRadioChecked,
+                            'is-checkbox--checked': isCheckboxChecked,
+                            'is-checkbox--indeterminate': isIndeterminate
+                        }]
+                }, [
+                    showLine
+                        ? h('div', {
+                            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 ? isExistChild : hasLazyChilds) : isExistChild) && (!visibleMethod || visibleMethod(nParams))
+                        ? [
+                            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.renderDragIcon(h, node, nodeid),
+                    $xeTree.renderRadio(h, node, nodeid, isExistChild, nLevel, isRadioChecked),
+                    $xeTree.renderCheckbox(h, node, nodeid, isExistChild, nLevel, isCheckboxChecked, isIndeterminate),
+                    h('div', {
+                        class: 'vxe-tree--node-item-inner'
+                    }, [
+                        h('div', {
+                            class: 'vxe-tree--node-item-wrapper'
+                        }, [
+                            h('span', {
+                                class: 'vxe-tree--node-item-title'
+                            }, titleSlot ? getSlotVNs(titleSlot(nParams)) : nodeTitle)
+                        ]),
+                        extraSlot
+                            ? h('div', {
+                                class: 'vxe-tree--node-item-extra'
+                            }, getSlotVNs(extraSlot(nParams)))
+                            : renderEmptyElement($xeTree)
+                    ])
+                ])
+            ]);
+        },
+        renderList(h, treeList) {
+            const $xeTree = this;
+            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;
+        },
+        renderDragTip(h) {
+            const $xeTree = this;
+            const props = $xeTree;
+            const reactData = $xeTree.reactData;
+            const { drag } = props;
+            const { dragNode, dragTipText } = reactData;
+            const dragOpts = $xeTree.computeDragOpts;
+            const dNode = dragNode;
+            if (drag) {
+                return h('div', {
+                    class: 'vxe-tree--drag-wrapper'
+                }, [
+                    h('div', {
+                        ref: 'refDragNodeLineElem',
+                        class: ['vxe-tree--drag-node-line', {
+                                'is--guides': dragOpts.showGuidesStatus
+                            }]
+                    }),
+                    dNode && dragOpts.showDragTip
+                        ? h('div', {
+                            ref: 'refDragTipElem',
+                            class: 'vxe-tree--drag-sort-tip'
+                        }, [
+                            h('div', {
+                                class: 'vxe-tree--drag-sort-tip-wrapper'
+                            }, [
+                                h('div', {
+                                    class: 'vxe-tree--drag-sort-tip-status'
+                                }, [
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-normal-status', getIcon().TREE_DRAG_STATUS_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-sub-status', getIcon().TREE_DRAG_STATUS_SUB_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-disabled-status', getIcon().TREE_DRAG_DISABLED]
+                                    })
+                                ]),
+                                h('div', {
+                                    class: 'vxe-tree--drag-sort-tip-content'
+                                }, dragTipText)
+                            ])
+                        ])
+                        : renderEmptyElement($xeTree)
+                ]);
+            }
+            return renderEmptyElement($xeTree);
+        },
+        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, tooltipStore } = reactData;
+            const vSize = $xeTree.computeSize;
+            const radioOpts = $xeTree.computeRadioOpts;
+            const checkboxOpts = $xeTree.computeCheckboxOpts;
+            const loadingOpts = $xeTree.computeLoadingOpts;
+            const isNodeHover = $xeTree.computeIsNodeHover;
+            const treeStyle = $xeTree.computeTreeStyle;
+            const dragOpts = $xeTree.computeDragOpts;
+            const tooltipOpts = $xeTree.computeTooltipOpts;
+            const loadingSlot = slots.loading;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
+            const tooltipSlot = slots.tooltip;
+            const teOns = {};
+            if (dragOpts.isCrossTreeDrag && !treeList.length) {
+                teOns.dragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
+            }
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-tree', {
+                        [`size--${vSize}`]: vSize,
+                        'show--line': showLine,
+                        'checkbox--highlight': checkboxOpts.highlight,
+                        'radio--highlight': radioOpts.highlight,
+                        'node--hover': isNodeHover,
+                        'node--trigger': trigger === 'node',
+                        'is--loading': loading
+                    }],
+                on: teOns
+            }, [
+                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-tree--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),
+                /**
+                 * 拖拽提示
+                 */
+                $xeTree.renderDragTip(h),
+                /**
+                  * 工具提示
+                  */
+                tooltipOpts.mode === 'tooltip'
+                    ? h(VxeTooltipComponent, {
+                        ref: 'refTooltip',
+                        props: {
+                            theme: tooltipOpts.theme,
+                            enterable: tooltipOpts.enterable,
+                            enterDelay: tooltipOpts.enterDelay,
+                            leaveDelay: tooltipOpts.leaveDelay,
+                            useHtml: tooltipOpts.useHtml,
+                            width: tooltipOpts.width,
+                            height: tooltipOpts.height,
+                            minWidth: tooltipOpts.minWidth,
+                            minHeight: tooltipOpts.minHeight,
+                            maxWidth: tooltipOpts.maxWidth,
+                            maxHeight: tooltipOpts.maxHeight,
+                            placement: tooltipOpts.placement,
+                            defaultPlacement: tooltipOpts.defaultPlacement,
+                            popupClassName: tooltipOpts.popupClassName
+                        },
+                        scopedSlots: tooltipSlot
+                            ? {
+                                content: () => {
+                                    const { node } = tooltipStore;
+                                    return tooltipSlot({ node, $tree: $xeTree });
+                                }
+                            }
+                            : undefined
+                    })
+                    : renderEmptyElement($xeTree),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoadingComponent, {
+                    class: 'vxe-tree--loading',
+                    props: {
+                        value: loading,
+                        icon: loadingOpts.icon,
+                        text: loadingOpts.text
+                    },
+                    scopedSlots: loadingSlot
+                        ? {
+                            default: () => loadingSlot({ $tree: $xeTree })
+                        }
+                        : undefined
+                })
+            ]);
+        }
+    },
+    watch: {
+        data() {
+            const $xeTree = this;
+            $xeTree.dataFlag++;
+        },
+        rootParentValue() {
+            const $xeTree = this;
+            $xeTree.dataFlag++;
+        },
+        rootValues() {
+            const $xeTree = this;
+            $xeTree.dataFlag++;
+        },
+        dataFlag() {
+            const $xeTree = this;
+            const props = $xeTree;
+            $xeTree.loadData(props.data || []);
+        },
+        checkNodeKey(nodeKey) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            reactData.selectRadioKey = enModelValue(nodeKey);
+        },
+        checkNodeKeys() {
+            const $xeTree = this;
+            const props = $xeTree;
+            $xeTree.updateCheckboxChecked(props.checkNodeKeys || []);
+        },
+        filterValue() {
+            const $xeTree = this;
+            $xeTree.triggerSearchEvent(new Event('filter'));
+        },
+        height() {
+            const $xeTree = this;
+            $xeTree.hFlag++;
+        },
+        minHeight() {
+            const $xeTree = this;
+            $xeTree.hFlag++;
+        },
+        maxHeight() {
+            const $xeTree = this;
+            $xeTree.hFlag++;
+        },
+        hFlag() {
+            const $xeTree = this;
+            $xeTree.recalculate();
+        }
+    },
+    created() {
+        const $xeTree = this;
+        const props = $xeTree;
+        const reactData = $xeTree.reactData;
+        $xeTree.internalData = createInternalData();
+        reactData.selectRadioKey = enModelValue(props.checkNodeKey);
+        $xeTree.loadData(props.data || []);
+    },
+    mounted() {
+        const $xeTree = this;
+        const props = $xeTree;
+        const internalData = $xeTree.internalData;
+        const { transform, drag, menuConfig, showOverflow } = props;
+        const dragOpts = $xeTree.computeDragOpts;
+        if (!showOverflow) {
+            errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
+        }
+        if (drag && !transform) {
+            errLog('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true']);
+        }
+        if (dragOpts.isCrossTreeDrag && !dragOpts.isCrossDrag) {
+            errLog('vxe.error.reqSupportProp', ['drag-config.isCrossTreeDrag', 'drag-config.isCrossDrag']);
+        }
+        // if (valueField) {
+        //   errLog('vxe.error.delProp', ['value-field', 'value-field'])
+        // }
+        const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
+        if (menuConfig && !VxeUIContextMenu) {
+            errLog('vxe.error.reqComp', ['vxe-context-menu']);
+        }
+        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;
+        const { resizeObserver } = internalData;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+        globalEvents.off($xeTree, 'resize');
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};