vxe-pc-ui 4.7.5 → 4.7.7

package/lib/tree/src/tree.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
+var _util = require("./util");
+var _log = require("../../ui/src/log");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _vn = require("../../ui/src/vn");
 var _dom = require("../../ui/src/dom");
@@ -22,7 +24,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeTree',
   props: {
     data: Array,
+    autoResize: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().tree.autoResize
+    },
     height: [String, Number],
+    maxHeight: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().tree.maxHeight
+    },
     minHeight: {
       type: [String, Number],
       default: () => (0, _ui.getConfig)().tree.minHeight
@@ -114,12 +124,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: String,
       default: () => (0, _ui.getConfig)().tree.iconLoaded
     },
+    filterValue: [String, Number],
+    filterConfig: Object,
     size: {
       type: String,
       default: () => (0, _ui.getConfig)().tree.size || (0, _ui.getConfig)().size
-    }
+    },
+    virtualYConfig: Object
   },
-  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error'],
+  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll'],
   setup(props, context) {
     const {
       emit,
@@ -130,8 +143,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       computeSize
     } = (0, _ui.useSize)(props);
     const refElem = (0, _vue.ref)();
+    const refHeaderWrapperElem = (0, _vue.ref)();
+    const refFooterWrapperElem = (0, _vue.ref)();
+    const refVirtualWrapper = (0, _vue.ref)();
+    const refVirtualBody = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
+      parentHeight: 0,
+      customHeight: 0,
+      customMinHeight: 0,
+      customMaxHeight: 0,
       currentNode: null,
+      scrollYLoad: false,
+      bodyHeight: 0,
+      topSpaceHeight: 0,
       selectRadioKey: props.checkNodeKey,
       treeList: [],
       updateExpandedFlag: 1,
@@ -139,11 +163,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     const internalData = {
       // initialized: false,
+      // lastFilterValue: '',
+      treeFullData: [],
+      afterTreeList: [],
+      afterVisibleList: [],
       nodeMaps: {},
       selectCheckboxMaps: {},
       indeterminateRowMaps: {},
       treeExpandedMaps: {},
-      treeExpandLazyLoadedMaps: {}
+      treeExpandLazyLoadedMaps: {},
+      lastScrollLeft: 0,
+      lastScrollTop: 0,
+      scrollYStore: {
+        startIndex: 0,
+        endIndex: 0,
+        visibleSize: 0,
+        offsetSize: 0,
+        rowHeight: 0
+      },
+      lastScrollTime: 0
+      // hpTimeout: undefined
     };
     const refMaps = {
       refElem
@@ -170,6 +209,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeHasChildField = (0, _vue.computed)(() => {
       return props.hasChildField || 'hasChild';
     });
+    const computeVirtualYOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().tree.virtualYConfig, props.virtualYConfig);
+    });
     const computeIsRowCurrent = (0, _vue.computed)(() => {
       const nodeOpts = computeNodeOpts.value;
       const {
@@ -208,19 +250,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     const computeTreeStyle = (0, _vue.computed)(() => {
       const {
-        height,
-        minHeight
-      } = props;
+        customHeight,
+        customMinHeight,
+        customMaxHeight
+      } = reactData;
       const stys = {};
-      if (height) {
-        stys.height = (0, _dom.toCssUnit)(height);
+      if (customHeight) {
+        stys.height = (0, _dom.toCssUnit)(customHeight);
+      }
+      if (customMinHeight) {
+        stys.minHeight = (0, _dom.toCssUnit)(customMinHeight);
       }
-      if (minHeight) {
-        stys.minHeight = (0, _dom.toCssUnit)(minHeight);
+      if (customMaxHeight) {
+        stys.maxHeight = (0, _dom.toCssUnit)(customMaxHeight);
       }
       return stys;
     });
+    const computeFilterOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().tree.filterConfig, props.filterConfig);
+    });
     const computeMaps = {
+      computeChildrenField,
+      computeMapChildrenField,
       computeRadioOpts,
       computeCheckboxOpts,
       computeNodeOpts
@@ -376,6 +427,39 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         $tree: $xeTree
       }, params));
     };
+    const getParentElem = () => {
+      const el = refElem.value;
+      return el ? el.parentElement : null;
+    };
+    const calcTableHeight = key => {
+      const {
+        parentHeight
+      } = reactData;
+      const val = props[key];
+      let num = 0;
+      if (val) {
+        if (val === '100%' || val === 'auto') {
+          num = parentHeight;
+        } else {
+          if ((0, _dom.isScale)(val)) {
+            num = Math.floor((_xeUtils.default.toInteger(val) || 1) / 100 * parentHeight);
+          } else {
+            num = _xeUtils.default.toNumber(val);
+          }
+          num = Math.max(40, num);
+        }
+      }
+      return num;
+    };
+    const updateHeight = () => {
+      reactData.customHeight = calcTableHeight('height');
+      reactData.customMinHeight = calcTableHeight('minHeight');
+      reactData.customMaxHeight = calcTableHeight('maxHeight');
+      // 如果启用虚拟滚动，默认高度
+      if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
+        reactData.customHeight = 300;
+      }
+    };
     const createNode = records => {
       const valueField = computeValueField.value;
       return Promise.resolve(records.map(obj => {
@@ -388,427 +472,453 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return item;
       }));
     };
-    const treeMethods = {
-      dispatchEvent,
-      clearCurrentNode() {
-        reactData.currentNode = null;
-        return (0, _vue.nextTick)();
-      },
-      getCurrentNodeId() {
-        const {
-          currentNode
-        } = reactData;
-        if (currentNode) {
-          return getNodeId(currentNode);
+    const cacheNodeMap = () => {
+      const {
+        treeFullData
+      } = internalData;
+      const valueField = computeValueField.value;
+      const childrenField = computeChildrenField.value;
+      const keyMaps = {};
+      _xeUtils.default.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
+        let nodeid = getNodeId(item);
+        if (!nodeid) {
+          nodeid = getNodeUniqueId();
+          _xeUtils.default.set(item, valueField, nodeid);
         }
-        return null;
-      },
-      getCurrentNode() {
-        const {
-          currentNode
-        } = reactData;
-        const {
-          nodeMaps
-        } = internalData;
-        if (currentNode) {
-          const nodeItem = nodeMaps[getNodeId(currentNode)];
-          if (nodeItem) {
-            return nodeItem.item;
+        keyMaps[nodeid] = {
+          item,
+          index,
+          items,
+          parent,
+          nodes,
+          level: nodes.length,
+          treeIndex: index,
+          lineCount: 0,
+          treeLoaded: false
+        };
+      }, {
+        children: childrenField
+      });
+      internalData.nodeMaps = keyMaps;
+    };
+    const updateAfterDataIndex = () => {
+      const {
+        transform
+      } = props;
+      const {
+        afterTreeList,
+        nodeMaps
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      _xeUtils.default.eachTree(afterTreeList, (item, index, items) => {
+        const nodeid = getNodeId(item);
+        const nodeItem = nodeMaps[nodeid];
+        if (nodeItem) {
+          nodeItem.items = items;
+          nodeItem.treeIndex = index;
+        } else {
+          const rest = {
+            item,
+            index,
+            items,
+            parent,
+            nodes: [],
+            level: 0,
+            treeIndex: index,
+            lineCount: 0,
+            treeLoaded: false
+          };
+          nodeMaps[nodeid] = rest;
+        }
+      }, {
+        children: transform ? mapChildrenField : childrenField
+      });
+    };
+    const updateAfterFullData = () => {
+      const {
+        transform,
+        filterValue
+      } = props;
+      const {
+        treeFullData,
+        lastFilterValue
+      } = internalData;
+      const titleField = computeTitleField.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const filterOpts = computeFilterOpts.value;
+      const {
+        autoExpandAll,
+        beforeFilterMethod,
+        filterMethod,
+        afterFilterMethod
+      } = filterOpts;
+      let fullList = treeFullData;
+      let treeList = fullList;
+      let filterStr = '';
+      if (filterValue || filterValue === 0) {
+        filterStr = `${filterValue}`;
+        const handleSearch = filterMethod ? item => {
+          return filterMethod({
+            $tree: $xeTree,
+            node: item,
+            filterValue: filterStr
+          });
+        } : item => {
+          return String(item[titleField]).toLowerCase().indexOf(filterStr) > -1;
+        };
+        const bafParams = {
+          $tree: $xeTree,
+          filterValue: filterStr
+        };
+        if (beforeFilterMethod) {
+          beforeFilterMethod(bafParams);
+        }
+        if (transform) {
+          treeList = _xeUtils.default.searchTree(treeFullData, handleSearch, {
+            children: childrenField,
+            mapChildren: mapChildrenField,
+            isEvery: true
+          });
+          fullList = treeList;
+        } else {
+          fullList = treeFullData.filter(handleSearch);
+        }
+        internalData.lastFilterValue = filterStr;
+        (0, _vue.nextTick)(() => {
+          // 筛选时自动展开
+          if (autoExpandAll) {
+            $xeTree.setAllExpandNode(true).then(() => {
+              if (afterFilterMethod) {
+                afterFilterMethod(bafParams);
+              }
+            });
+          } else {
+            if (afterFilterMethod) {
+              afterFilterMethod(bafParams);
+            }
+          }
+        });
+      } else {
+        if (transform) {
+          treeList = _xeUtils.default.searchTree(treeFullData, () => true, {
+            children: childrenField,
+            mapChildren: mapChildrenField,
+            isEvery: true
+          });
+          fullList = treeList;
+          if (lastFilterValue) {
+            const bafParams = {
+              $tree: $xeTree,
+              filterValue: filterStr
+            };
+            if (beforeFilterMethod) {
+              beforeFilterMethod(bafParams);
+            }
+            // 取消筛选时自动收起
+            (0, _vue.nextTick)(() => {
+              if (autoExpandAll) {
+                $xeTree.clearAllExpandNode().then(() => {
+                  if (afterFilterMethod) {
+                    afterFilterMethod(bafParams);
+                  }
+                });
+              } else {
+                if (afterFilterMethod) {
+                  afterFilterMethod(bafParams);
+                }
+              }
+            });
           }
         }
-        return null;
-      },
-      setCurrentNodeId(nodeKey) {
-        const {
-          nodeMaps
-        } = internalData;
-        const nodeItem = nodeMaps[nodeKey];
-        reactData.currentNode = nodeItem ? nodeItem.item : null;
-        return (0, _vue.nextTick)();
-      },
-      setCurrentNode(node) {
-        reactData.currentNode = node;
-        return (0, _vue.nextTick)();
-      },
-      clearRadioNode() {
-        reactData.selectRadioKey = null;
-        return (0, _vue.nextTick)();
-      },
-      getRadioNodeId() {
-        return reactData.selectRadioKey || null;
-      },
-      getRadioNode() {
-        const {
-          selectRadioKey
-        } = reactData;
-        const {
-          nodeMaps
-        } = internalData;
-        if (selectRadioKey) {
-          const nodeItem = nodeMaps[selectRadioKey];
-          if (nodeItem) {
-            return nodeItem.item;
+        internalData.lastFilterValue = '';
+      }
+      internalData.afterVisibleList = fullList;
+      internalData.afterTreeList = treeList;
+      updateAfterDataIndex();
+    };
+    /**
+     * 如果为虚拟树、则将树结构拍平
+     */
+    const handleTreeToList = () => {
+      const {
+        transform
+      } = props;
+      const {
+        afterTreeList,
+        treeExpandedMaps
+      } = internalData;
+      const mapChildrenField = computeMapChildrenField.value;
+      const expandMaps = {};
+      if (transform) {
+        const fullData = [];
+        _xeUtils.default.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
+          const nodeid = getNodeId(item);
+          const parentNodeid = getNodeId(parentRow);
+          if (!parentRow || expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid]) {
+            expandMaps[nodeid] = 1;
+            fullData.push(item);
           }
+        }, {
+          children: mapChildrenField
+        });
+        updateScrollYStatus(fullData);
+        internalData.afterVisibleList = fullData;
+        return fullData;
+      }
+      return internalData.afterVisibleList;
+    };
+    const handleData = force => {
+      const {
+        scrollYLoad
+      } = reactData;
+      const {
+        scrollYStore
+      } = internalData;
+      let fullList = internalData.afterVisibleList;
+      if (force) {
+        // 更新数据，处理筛选和排序
+        updateAfterFullData();
+        // 如果为虚拟树，将树结构拍平
+        fullList = handleTreeToList();
+      }
+      const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0);
+      reactData.treeList = treeList;
+    };
+    const triggerSearchEvent = _xeUtils.default.debounce(() => handleData(true), 350, {
+      trailing: true
+    });
+    const loadData = list => {
+      const {
+        expandAll,
+        transform
+      } = props;
+      const {
+        initialized,
+        scrollYStore
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const parentField = computeParentField.value;
+      const childrenField = computeChildrenField.value;
+      const fullData = transform ? _xeUtils.default.toArrayTree(list, {
+        key: keyField,
+        parentKey: parentField,
+        mapChildren: childrenField
+      }) : list ? list.slice(0) : [];
+      internalData.treeFullData = fullData;
+      Object.assign(scrollYStore, {
+        startIndex: 0,
+        endIndex: 1,
+        visibleSize: 0
+      });
+      const sYLoad = updateScrollYStatus(fullData);
+      cacheNodeMap();
+      handleData(true);
+      if (sYLoad) {
+        if (!(props.height || props.maxHeight)) {
+          (0, _log.errLog)('vxe.error.reqProp', ['height | max-height | virtual-y-config.enabled=false']);
         }
-        return null;
-      },
-      setRadioNodeId(nodeKey) {
-        reactData.selectRadioKey = nodeKey;
-        return (0, _vue.nextTick)();
-      },
-      setRadioNode,
-      setCheckboxNode,
-      setCheckboxByNodeId,
-      getCheckboxNodeIds() {
+      }
+      return computeScrollLoad().then(() => {
+        if (!initialized) {
+          if (list && list.length) {
+            internalData.initialized = true;
+            if (expandAll) {
+              $xeTree.setAllExpandNode(true);
+            }
+            $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
+          }
+        }
+        updateHeight();
+        refreshScroll();
+      });
+    };
+    const updateScrollYStatus = fullData => {
+      const {
+        transform
+      } = props;
+      const virtualYOpts = computeVirtualYOpts.value;
+      const allList = fullData || internalData.treeFullData;
+      // 如果gt为0，则总是启用
+      const scrollYLoad = !!transform && !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length);
+      reactData.scrollYLoad = scrollYLoad;
+      return scrollYLoad;
+    };
+    const updateYSpace = () => {
+      const {
+        scrollYLoad
+      } = reactData;
+      const {
+        scrollYStore,
+        afterVisibleList
+      } = internalData;
+      reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
+      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+    };
+    const updateYData = () => {
+      handleData();
+      updateYSpace();
+    };
+    const computeScrollLoad = () => {
+      return (0, _vue.nextTick)().then(() => {
         const {
-          selectCheckboxMaps
-        } = internalData;
-        return Object.keys(selectCheckboxMaps);
-      },
-      getCheckboxNodes() {
+          scrollYLoad
+        } = reactData;
         const {
-          nodeMaps,
-          selectCheckboxMaps
+          scrollYStore
         } = internalData;
-        const list = [];
-        _xeUtils.default.each(selectCheckboxMaps, (item, nodeid) => {
-          const nodeItem = nodeMaps[nodeid];
-          if (nodeItem) {
-            list.push(nodeItem.item);
+        const virtualBodyElem = refVirtualBody.value;
+        const virtualYOpts = computeVirtualYOpts.value;
+        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 = refVirtualWrapper.value;
+          const visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
+          const offsetYSize = Math.max(0, Math.min(2, _xeUtils.default.toNumber(virtualYOpts.oSize)));
+          scrollYStore.offsetSize = offsetYSize;
+          scrollYStore.visibleSize = visibleYSize;
+          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
+          updateYData();
+        } else {
+          updateYSpace();
+        }
+      });
+    };
+    /**
+     * 如果有滚动条，则滚动到对应的位置
+     * @param {Number} scrollLeft 左距离
+     * @param {Number} scrollTop 上距离
+     */
+    const scrollTo = (scrollLeft, scrollTop) => {
+      const scrollBodyElem = refVirtualWrapper.value;
+      if (scrollBodyElem) {
+        if (_xeUtils.default.isNumber(scrollLeft)) {
+          scrollBodyElem.scrollLeft = scrollLeft;
+        }
+        if (_xeUtils.default.isNumber(scrollTop)) {
+          scrollBodyElem.scrollTop = scrollTop;
+        }
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            (0, _vue.nextTick)(() => {
+              resolve();
+            });
+          }, 50);
         });
-        return list;
-      },
-      clearCheckboxNode() {
-        internalData.selectCheckboxMaps = {};
-        reactData.updateCheckboxFlag++;
-        return (0, _vue.nextTick)();
-      },
-      setAllCheckboxNode(checked) {
-        const {
-          transform
-        } = props;
-        const selectMaps = {};
-        const childrenField = computeChildrenField.value;
-        const mapChildrenField = computeMapChildrenField.value;
-        if (checked) {
-          _xeUtils.default.eachTree(reactData.treeList, node => {
-            const nodeid = getNodeId(node);
-            selectMaps[nodeid] = true;
-          }, {
-            children: transform ? mapChildrenField : childrenField
-          });
+      }
+      return (0, _vue.nextTick)();
+    };
+    /**
+     * 刷新滚动条
+     */
+    const refreshScroll = () => {
+      const {
+        lastScrollLeft,
+        lastScrollTop
+      } = internalData;
+      return clearScroll().then(() => {
+        if (lastScrollLeft || lastScrollTop) {
+          internalData.lastScrollLeft = 0;
+          internalData.lastScrollTop = 0;
+          return scrollTo(lastScrollLeft, lastScrollTop);
         }
-        internalData.selectCheckboxMaps = selectMaps;
-        reactData.updateCheckboxFlag++;
-        return (0, _vue.nextTick)();
-      },
-      clearExpandNode() {
-        return treeMethods.clearAllExpandNode();
-      },
-      clearAllExpandNode() {
-        const {
-          nodeMaps
-        } = internalData;
-        _xeUtils.default.each(nodeMaps, nodeItem => {
-          nodeItem.treeLoaded = false;
-        });
-        internalData.treeExpandedMaps = {};
-        reactData.updateExpandedFlag++;
-        return (0, _vue.nextTick)();
-      },
-      setExpandByNodeId(nodeids, expanded) {
-        const {
-          treeExpandedMaps
-        } = internalData;
-        if (nodeids) {
-          if (!_xeUtils.default.isArray(nodeids)) {
-            nodeids = [nodeids];
-          }
-          nodeids.forEach(nodeid => {
-            handleSetExpand(nodeid, expanded, treeExpandedMaps);
-          });
-          reactData.updateExpandedFlag++;
-        }
-        return (0, _vue.nextTick)();
-      },
-      getExpandNodeIds() {
-        const {
-          treeExpandedMaps
-        } = internalData;
-        return _xeUtils.default.keys(treeExpandedMaps);
-      },
-      getExpandNodes() {
-        const {
-          nodeMaps,
-          treeExpandedMaps
-        } = internalData;
-        const list = [];
-        _xeUtils.default.each(treeExpandedMaps, (item, nodeid) => {
-          const nodeItem = nodeMaps[nodeid];
-          if (nodeItem) {
-            list.push(nodeItem.item);
-          }
-        });
-        return list;
-      },
-      setExpandNode(nodes, expanded) {
-        const {
-          treeExpandedMaps
-        } = internalData;
-        if (nodes) {
-          if (!_xeUtils.default.isArray(nodes)) {
-            nodes = [nodes];
-          }
-          nodes.forEach(node => {
-            const nodeid = getNodeId(node);
-            handleSetExpand(nodeid, expanded, treeExpandedMaps);
-          });
-          reactData.updateExpandedFlag++;
-        }
-        return (0, _vue.nextTick)();
-      },
-      toggleExpandByNodeId(nodeids) {
-        const {
-          treeExpandedMaps
-        } = internalData;
-        if (nodeids) {
-          if (!_xeUtils.default.isArray(nodeids)) {
-            nodeids = [nodeids];
-          }
-          nodeids.forEach(nodeid => {
-            handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
-          });
-          reactData.updateExpandedFlag++;
-        }
-        return (0, _vue.nextTick)();
-      },
-      toggleExpandNode(nodes) {
-        const {
-          treeExpandedMaps
-        } = internalData;
-        if (nodes) {
-          if (!_xeUtils.default.isArray(nodes)) {
-            nodes = [nodes];
-          }
-          nodes.forEach(node => {
-            const nodeid = getNodeId(node);
-            handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
-          });
-          reactData.updateExpandedFlag++;
-        }
-        return (0, _vue.nextTick)();
-      },
-      setAllExpandNode(expanded) {
-        const {
-          transform
-        } = props;
-        const {
-          treeExpandedMaps
-        } = internalData;
-        const childrenField = computeChildrenField.value;
-        const mapChildrenField = computeMapChildrenField.value;
-        if (expanded) {
-          _xeUtils.default.eachTree(reactData.treeList, node => {
-            const childList = _xeUtils.default.get(node, childrenField);
-            const hasChild = childList && childList.length;
-            if (hasChild) {
-              const nodeid = getNodeId(node);
-              treeExpandedMaps[nodeid] = true;
-            }
-          }, {
-            children: transform ? mapChildrenField : childrenField
-          });
-        } else {
-          internalData.treeExpandedMaps = {};
-        }
-        reactData.updateExpandedFlag++;
-        return (0, _vue.nextTick)();
-      },
-      reloadExpandNode(node) {
-        const {
-          lazy
-        } = props;
-        if (lazy) {
-          treeMethods.clearExpandLoaded(node);
-          return handleAsyncTreeExpandChilds(node);
-        }
-        return (0, _vue.nextTick)();
-      },
-      clearExpandLoaded(node) {
-        const {
-          lazy
-        } = props;
-        const {
-          nodeMaps
-        } = internalData;
-        if (lazy) {
-          const nodeItem = nodeMaps[getNodeId(node)];
-          if (nodeItem) {
-            nodeItem.treeLoaded = false;
-          }
-        }
-        return (0, _vue.nextTick)();
-      },
-      /**
-       * 用于树结构，给行数据加载子节点
-       */
-      loadChildrenNode(node, childRecords) {
-        const {
-          lazy,
-          transform
-        } = props;
-        const {
-          nodeMaps
-        } = internalData;
-        if (!lazy) {
-          return Promise.resolve([]);
-        }
-        const childrenField = computeChildrenField.value;
-        const parentNodeItem = nodeMaps[getNodeId(node)];
-        const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
-        const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
-        return createNode(childRecords).then(nodeList => {
-          _xeUtils.default.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
-            const itemNodeId = getNodeId(childRow);
-            nodeMaps[itemNodeId] = {
-              item: node,
-              itemIndex: -1,
-              items,
-              parent: parent || parentNodeItem.item,
-              nodes: parentNodes.concat(nodes),
-              level: parentLevel + nodes.length,
-              lineCount: 0,
-              treeLoaded: false
-            };
-          }, {
-            children: childrenField
-          });
-          node[childrenField] = nodeList;
-          if (transform) {
-            node[childrenField] = nodeList;
-          }
-          updateNodeLine(node);
-          return nodeList;
-        });
-      },
-      isExpandByNode,
-      isCheckedByRadioNodeId,
-      isCheckedByRadioNode,
-      isCheckedByCheckboxNodeId,
-      isIndeterminateByCheckboxNode,
-      isCheckedByCheckboxNode,
-      getCheckboxIndeterminateNodes() {
-        const {
-          nodeMaps,
-          indeterminateRowMaps
-        } = internalData;
-        const list = [];
-        _xeUtils.default.each(indeterminateRowMaps, (item, nodeid) => {
-          const nodeItem = nodeMaps[nodeid];
-          if (nodeItem) {
-            list.push(nodeItem.item);
-          }
-        });
-        return list;
-      }
+      });
     };
-    const cacheNodeMap = () => {
+    /**
+     * 重新计算列表
+     */
+    const recalculate = () => {
       const {
-        transform
-      } = props;
+        scrollYStore
+      } = internalData;
       const {
-        treeList
-      } = reactData;
-      const valueField = computeValueField.value;
-      const childrenField = computeChildrenField.value;
-      const mapChildrenField = computeMapChildrenField.value;
-      const keyMaps = {};
-      _xeUtils.default.eachTree(treeList, (item, itemIndex, items, path, parent, nodes) => {
-        let nodeid = getNodeId(item);
-        if (!nodeid) {
-          nodeid = getNodeUniqueId();
-          _xeUtils.default.set(item, valueField, nodeid);
+        rowHeight
+      } = scrollYStore;
+      const el = refElem.value;
+      if (el && el.clientWidth && el.clientHeight) {
+        const parentEl = getParentElem();
+        const headerWrapperEl = refHeaderWrapperElem.value;
+        const footerWrapperEl = refFooterWrapperElem.value;
+        const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0;
+        const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0;
+        if (parentEl) {
+          const parentPaddingSize = (0, _dom.getPaddingTopBottomSize)(parentEl);
+          reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        keyMaps[nodeid] = {
-          item,
-          itemIndex,
-          items,
-          parent,
-          nodes,
-          level: nodes.length,
-          lineCount: 0,
-          treeLoaded: false
-        };
-      }, {
-        children: transform ? mapChildrenField : childrenField
-      });
-      internalData.nodeMaps = keyMaps;
+        updateHeight();
+        return computeScrollLoad().then(() => {
+          updateHeight();
+          updateYSpace();
+        });
+      }
+      return (0, _vue.nextTick)();
     };
-    const loadTreeData = list => {
-      const {
-        expandAll,
-        transform
-      } = props;
+    const loadYData = evnt => {
       const {
-        initialized
+        scrollYStore
       } = internalData;
-      const keyField = computeKeyField.value;
-      const parentField = computeParentField.value;
-      const mapChildrenField = computeMapChildrenField.value;
-      if (transform) {
-        reactData.treeList = _xeUtils.default.toArrayTree(list, {
-          key: keyField,
-          parentKey: parentField,
-          mapChildren: mapChildrenField
-        });
-      } else {
-        reactData.treeList = list ? list.slice(0) : [];
-      }
-      cacheNodeMap();
-      if (!initialized) {
-        if (list && list.length) {
-          internalData.initialized = true;
-          if (expandAll) {
-            $xeTree.setAllExpandNode(true);
-          }
-          $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
+      const {
+        startIndex,
+        endIndex,
+        visibleSize,
+        offsetSize,
+        rowHeight
+      } = scrollYStore;
+      const scrollBodyElem = evnt.target;
+      const scrollTop = scrollBodyElem.scrollTop;
+      const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+      const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+      const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+          scrollYStore.startIndex = offsetStartIndex;
+          scrollYStore.endIndex = offsetEndIndex;
+          updateYData();
         }
       }
     };
-    const handleCountLine = (item, isRoot, nodeItem) => {
-      const {
-        treeExpandedMaps
-      } = internalData;
-      const childrenField = computeChildrenField.value;
-      const nodeid = getNodeId(item);
-      nodeItem.lineCount++;
-      if (treeExpandedMaps[nodeid]) {
-        _xeUtils.default.arrayEach(item[childrenField], (childItem, childIndex, childList) => {
-          if (!isRoot || childIndex < childList.length - 1) {
-            handleCountLine(childItem, false, nodeItem);
-          }
-        });
+    const scrollEvent = evnt => {
+      const scrollBodyElem = evnt.target;
+      const scrollTop = scrollBodyElem.scrollTop;
+      const scrollLeft = scrollBodyElem.scrollLeft;
+      const isX = scrollLeft !== internalData.lastScrollLeft;
+      const isY = scrollTop !== internalData.lastScrollTop;
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (reactData.scrollYLoad) {
+        loadYData(evnt);
       }
+      internalData.lastScrollTime = Date.now();
+      dispatchEvent('scroll', {
+        scrollLeft,
+        scrollTop,
+        isX,
+        isY
+      }, evnt);
     };
-    const updateNodeLine = node => {
-      const {
-        nodeMaps
-      } = internalData;
-      if (node) {
-        const nodeid = getNodeId(node);
-        const nodeItem = nodeMaps[nodeid];
-        if (nodeItem) {
-          _xeUtils.default.lastArrayEach(nodeItem.nodes, childItem => {
-            const nodeid = getNodeId(childItem);
-            const nodeItem = nodeMaps[nodeid];
-            if (nodeItem) {
-              nodeItem.lineCount = 0;
-              handleCountLine(childItem, true, nodeItem);
-            }
-          });
-        }
+    const clearScroll = () => {
+      const scrollBodyElem = refVirtualWrapper.value;
+      if (scrollBodyElem) {
+        scrollBodyElem.scrollTop = 0;
+        scrollBodyElem.scrollLeft = 0;
       }
+      internalData.lastScrollTop = 0;
+      internalData.lastScrollLeft = 0;
+      return (0, _vue.nextTick)();
     };
     const handleNodeClickEvent = (evnt, node) => {
       const {
@@ -897,7 +1007,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
                 if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
                   handleCheckedCheckboxNode(childRows, true);
                 }
-                updateNodeLine(node);
                 dispatchEvent('load-success', {
                   node,
                   data: childRecords
@@ -905,7 +1014,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
                 return (0, _vue.nextTick)();
               });
             } else {
-              updateNodeLine(node);
               dispatchEvent('load-success', {
                 node,
                 data: childRecords
@@ -919,13 +1027,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             if (treeExpandLazyLoadedMaps[nodeid]) {
               treeExpandLazyLoadedMaps[nodeid] = false;
             }
-            updateNodeLine(node);
             dispatchEvent('load-error', {
               node,
               data: e
             }, new Event('load-error'));
           }).finally(() => {
-            return (0, _vue.nextTick)();
+            handleTreeToList();
+            handleData();
+            return recalculate();
           });
         } else {
           resolve();
@@ -1001,8 +1110,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         });
       }
       reactData.updateExpandedFlag++;
-      expandNodes.forEach(updateNodeLine);
-      return Promise.all(result);
+      handleTreeToList();
+      handleData();
+      return Promise.all(result).then(() => recalculate());
     };
     const toggleExpandEvent = (evnt, node) => {
       const {
@@ -1023,12 +1133,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         transform
       } = props;
-      const {
-        treeList
-      } = reactData;
       const {
         selectCheckboxMaps,
-        indeterminateRowMaps
+        indeterminateRowMaps,
+        afterTreeList
       } = internalData;
       const childrenField = computeChildrenField.value;
       const mapChildrenField = computeMapChildrenField.value;
@@ -1040,7 +1148,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (!checkStrictly) {
         const childRowMaps = {};
         const childRowList = [];
-        _xeUtils.default.eachTree(treeList, node => {
+        _xeUtils.default.eachTree(afterTreeList, node => {
           const nodeid = getNodeId(node);
           const childList = node[childrenField];
           if (childList && childList.length && !childRowMaps[nodeid]) {
@@ -1056,11 +1164,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const childList = vals[2];
           let sLen = 0; // 已选
           let hLen = 0; // 半选
-          let vLen = 0; // 有效行
+          let vLen = 0; // 有效子行
+          const cLen = childList.length; // 子行
           childList.forEach(checkMethod ? item => {
             const childNodeid = getNodeId(item);
             const isSelect = selectCheckboxMaps[childNodeid];
             if (checkMethod({
+              $tree: $xeTree,
               node: item
             })) {
               if (isSelect) {
@@ -1086,8 +1196,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
             vLen++;
           });
-          const isSelected = sLen >= vLen;
-          const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
+          let isSelected = false;
+          if (cLen > 0) {
+            if (vLen > 0) {
+              isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
+            } else {
+              // 如果存在子项禁用
+              if (sLen > 0 && sLen >= vLen) {
+                isSelected = true;
+              } else if (selectCheckboxMaps[nodeid]) {
+                isSelected = true;
+              } else {
+                isSelected = false;
+              }
+            }
+          } else {
+            // 如果无子项
+            isSelected = selectCheckboxMaps[nodeid];
+          }
+          const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
           if (isSelected) {
             selectCheckboxMaps[nodeid] = node;
             if (indeterminateRowMaps[nodeid]) {
@@ -1106,128 +1233,500 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }
         });
-        reactData.updateCheckboxFlag++;
+        reactData.updateCheckboxFlag++;
+      }
+    };
+    const changeCheckboxEvent = (evnt, node) => {
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      const {
+        transform
+      } = props;
+      const {
+        selectCheckboxMaps
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        checkStrictly,
+        checkMethod
+      } = checkboxOpts;
+      let isDisabled = !!checkMethod;
+      if (checkMethod) {
+        isDisabled = !checkMethod({
+          $tree: $xeTree,
+          node
+        });
+      }
+      if (isDisabled) {
+        return;
+      }
+      const nodeid = getNodeId(node);
+      let isChecked = false;
+      if (selectCheckboxMaps[nodeid]) {
+        delete selectCheckboxMaps[nodeid];
+      } else {
+        isChecked = true;
+        selectCheckboxMaps[nodeid] = node;
+      }
+      if (!checkStrictly) {
+        _xeUtils.default.eachTree(_xeUtils.default.get(node, transform ? mapChildrenField : childrenField), childNode => {
+          const childNodeid = getNodeId(childNode);
+          if (isChecked) {
+            if (!selectCheckboxMaps[childNodeid]) {
+              selectCheckboxMaps[childNodeid] = true;
+            }
+          } else {
+            if (selectCheckboxMaps[childNodeid]) {
+              delete selectCheckboxMaps[childNodeid];
+            }
+          }
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+      }
+      reactData.updateCheckboxFlag++;
+      updateCheckboxStatus();
+      const value = _xeUtils.default.keys(selectCheckboxMaps);
+      emitCheckboxMode(value);
+      dispatchEvent('checkbox-change', {
+        node,
+        value,
+        checked: isChecked
+      }, evnt);
+    };
+    const changeCurrentEvent = (evnt, node) => {
+      evnt.preventDefault();
+      const nodeOpts = computeNodeOpts.value;
+      const {
+        currentMethod,
+        trigger
+      } = nodeOpts;
+      const childrenField = computeChildrenField.value;
+      const childList = _xeUtils.default.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;
+      dispatchEvent('current-change', {
+        node,
+        checked: isChecked
+      }, evnt);
     };
-    const changeCheckboxEvent = (evnt, node) => {
+    const changeRadioEvent = (evnt, node) => {
       evnt.preventDefault();
       evnt.stopPropagation();
+      const radioOpts = computeRadioOpts.value;
       const {
-        transform
-      } = props;
-      const {
-        selectCheckboxMaps
-      } = internalData;
-      const childrenField = computeChildrenField.value;
-      const mapChildrenField = computeMapChildrenField.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const {
-        checkStrictly,
         checkMethod
-      } = checkboxOpts;
+      } = radioOpts;
       let isDisabled = !!checkMethod;
       if (checkMethod) {
         isDisabled = !checkMethod({
+          $tree: $xeTree,
           node
         });
       }
       if (isDisabled) {
         return;
       }
-      const nodeid = getNodeId(node);
-      let isChecked = false;
-      if (selectCheckboxMaps[nodeid]) {
-        delete selectCheckboxMaps[nodeid];
-      } else {
-        isChecked = true;
-        selectCheckboxMaps[nodeid] = node;
+      const isChecked = true;
+      const value = getNodeId(node);
+      reactData.selectRadioKey = value;
+      emitRadioMode(value);
+      dispatchEvent('radio-change', {
+        node,
+        value,
+        checked: isChecked
+      }, evnt);
+    };
+    const handleGlobalResizeEvent = () => {
+      const el = refElem.value;
+      if (!el || !el.clientWidth) {
+        return;
       }
-      if (!checkStrictly) {
-        _xeUtils.default.eachTree(_xeUtils.default.get(node, childrenField), childNode => {
-          const childNodeid = getNodeId(childNode);
-          if (isChecked) {
-            if (!selectCheckboxMaps[childNodeid]) {
-              selectCheckboxMaps[childNodeid] = true;
-            }
-          } else {
-            if (selectCheckboxMaps[childNodeid]) {
-              delete selectCheckboxMaps[childNodeid];
+      recalculate();
+    };
+    const treeMethods = {
+      dispatchEvent,
+      getNodeId,
+      loadData(data) {
+        return loadData(data || []);
+      },
+      reloadData(data) {
+        return loadData(data || []);
+      },
+      clearCurrentNode() {
+        reactData.currentNode = null;
+        return (0, _vue.nextTick)();
+      },
+      getCurrentNodeId() {
+        const {
+          currentNode
+        } = reactData;
+        if (currentNode) {
+          return getNodeId(currentNode);
+        }
+        return null;
+      },
+      getCurrentNode() {
+        const {
+          currentNode
+        } = reactData;
+        const {
+          nodeMaps
+        } = internalData;
+        if (currentNode) {
+          const nodeItem = nodeMaps[getNodeId(currentNode)];
+          if (nodeItem) {
+            return nodeItem.item;
+          }
+        }
+        return null;
+      },
+      setCurrentNodeId(nodeKey) {
+        const {
+          nodeMaps
+        } = internalData;
+        const nodeItem = nodeMaps[nodeKey];
+        reactData.currentNode = nodeItem ? nodeItem.item : null;
+        return (0, _vue.nextTick)();
+      },
+      setCurrentNode(node) {
+        reactData.currentNode = node;
+        return (0, _vue.nextTick)();
+      },
+      clearRadioNode() {
+        reactData.selectRadioKey = null;
+        return (0, _vue.nextTick)();
+      },
+      getRadioNodeId() {
+        return reactData.selectRadioKey || null;
+      },
+      getRadioNode() {
+        const {
+          selectRadioKey
+        } = reactData;
+        const {
+          nodeMaps
+        } = internalData;
+        if (selectRadioKey) {
+          const nodeItem = nodeMaps[selectRadioKey];
+          if (nodeItem) {
+            return nodeItem.item;
+          }
+        }
+        return null;
+      },
+      setRadioNodeId(nodeKey) {
+        reactData.selectRadioKey = nodeKey;
+        return (0, _vue.nextTick)();
+      },
+      setRadioNode,
+      setCheckboxNode,
+      setCheckboxByNodeId,
+      getCheckboxNodeIds() {
+        const {
+          selectCheckboxMaps
+        } = internalData;
+        return Object.keys(selectCheckboxMaps);
+      },
+      getCheckboxNodes() {
+        const {
+          nodeMaps,
+          selectCheckboxMaps
+        } = internalData;
+        const list = [];
+        _xeUtils.default.each(selectCheckboxMaps, (item, nodeid) => {
+          const nodeItem = nodeMaps[nodeid];
+          if (nodeItem) {
+            list.push(nodeItem.item);
+          }
+        });
+        return list;
+      },
+      clearCheckboxNode() {
+        internalData.selectCheckboxMaps = {};
+        reactData.updateCheckboxFlag++;
+        return (0, _vue.nextTick)().then(() => {
+          return {
+            checkNodeKeys: []
+          };
+        });
+      },
+      setAllCheckboxNode(checked) {
+        const {
+          transform
+        } = props;
+        const selectMaps = {};
+        const childrenField = computeChildrenField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        const checkKeys = [];
+        if (checked) {
+          _xeUtils.default.eachTree(internalData.afterTreeList, node => {
+            const nodeid = getNodeId(node);
+            checkKeys.push(nodeid);
+            selectMaps[nodeid] = true;
+          }, {
+            children: transform ? mapChildrenField : childrenField
+          });
+        }
+        internalData.selectCheckboxMaps = selectMaps;
+        reactData.updateCheckboxFlag++;
+        return (0, _vue.nextTick)().then(() => {
+          return {
+            checkNodeKeys: checkKeys
+          };
+        });
+      },
+      clearExpandNode() {
+        return treeMethods.clearAllExpandNode();
+      },
+      clearAllExpandNode() {
+        const {
+          nodeMaps,
+          scrollYStore
+        } = internalData;
+        _xeUtils.default.each(nodeMaps, nodeItem => {
+          nodeItem.treeLoaded = false;
+        });
+        internalData.treeExpandedMaps = {};
+        reactData.updateExpandedFlag++;
+        reactData.topSpaceHeight = 0;
+        scrollYStore.startIndex = 0;
+        scrollYStore.endIndex = 1;
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      setExpandByNodeId(nodeids, expanded) {
+        const {
+          treeExpandedMaps
+        } = internalData;
+        if (nodeids) {
+          if (!_xeUtils.default.isArray(nodeids)) {
+            nodeids = [nodeids];
+          }
+          nodeids.forEach(nodeid => {
+            handleSetExpand(nodeid, expanded, treeExpandedMaps);
+          });
+          reactData.updateExpandedFlag++;
+        }
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      getExpandNodeIds() {
+        const {
+          treeExpandedMaps
+        } = internalData;
+        return _xeUtils.default.keys(treeExpandedMaps);
+      },
+      getExpandNodes() {
+        const {
+          nodeMaps,
+          treeExpandedMaps
+        } = internalData;
+        const list = [];
+        _xeUtils.default.each(treeExpandedMaps, (item, nodeid) => {
+          const nodeItem = nodeMaps[nodeid];
+          if (nodeItem) {
+            list.push(nodeItem.item);
+          }
+        });
+        return list;
+      },
+      setExpandNode(nodes, expanded) {
+        const {
+          treeExpandedMaps
+        } = internalData;
+        if (nodes) {
+          if (!_xeUtils.default.isArray(nodes)) {
+            nodes = [nodes];
+          }
+          nodes.forEach(node => {
+            const nodeid = getNodeId(node);
+            handleSetExpand(nodeid, expanded, treeExpandedMaps);
+          });
+          reactData.updateExpandedFlag++;
+        }
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      toggleExpandByNodeId(nodeids) {
+        const {
+          treeExpandedMaps
+        } = internalData;
+        if (nodeids) {
+          if (!_xeUtils.default.isArray(nodeids)) {
+            nodeids = [nodeids];
+          }
+          nodeids.forEach(nodeid => {
+            handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+          });
+          reactData.updateExpandedFlag++;
+        }
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      toggleExpandNode(nodes) {
+        const {
+          treeExpandedMaps
+        } = internalData;
+        if (nodes) {
+          if (!_xeUtils.default.isArray(nodes)) {
+            nodes = [nodes];
+          }
+          nodes.forEach(node => {
+            const nodeid = getNodeId(node);
+            handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
+          });
+          reactData.updateExpandedFlag++;
+        }
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      setAllExpandNode(expanded) {
+        const {
+          transform
+        } = props;
+        const {
+          treeExpandedMaps
+        } = internalData;
+        const childrenField = computeChildrenField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        if (expanded) {
+          _xeUtils.default.eachTree(internalData.afterTreeList, node => {
+            const childList = _xeUtils.default.get(node, childrenField);
+            const hasChild = childList && childList.length;
+            if (hasChild) {
+              const nodeid = getNodeId(node);
+              treeExpandedMaps[nodeid] = true;
             }
+          }, {
+            children: transform ? mapChildrenField : childrenField
+          });
+        } else {
+          internalData.treeExpandedMaps = {};
+        }
+        reactData.updateExpandedFlag++;
+        handleTreeToList();
+        handleData();
+        return recalculate();
+      },
+      reloadExpandNode(node) {
+        const {
+          lazy
+        } = props;
+        if (lazy) {
+          treeMethods.clearExpandLoaded(node);
+          return handleAsyncTreeExpandChilds(node);
+        }
+        return recalculate();
+      },
+      clearExpandLoaded(node) {
+        const {
+          lazy
+        } = props;
+        const {
+          nodeMaps
+        } = internalData;
+        if (lazy) {
+          const nodeItem = nodeMaps[getNodeId(node)];
+          if (nodeItem) {
+            nodeItem.treeLoaded = false;
           }
-        }, {
-          children: transform ? mapChildrenField : childrenField
-        });
-      }
-      reactData.updateCheckboxFlag++;
-      updateCheckboxStatus();
-      const value = _xeUtils.default.keys(selectCheckboxMaps);
-      emitCheckboxMode(value);
-      dispatchEvent('checkbox-change', {
-        node,
-        value,
-        checked: isChecked
-      }, evnt);
-    };
-    const changeCurrentEvent = (evnt, node) => {
-      evnt.preventDefault();
-      const nodeOpts = computeNodeOpts.value;
-      const {
-        currentMethod,
-        trigger
-      } = nodeOpts;
-      const childrenField = computeChildrenField.value;
-      const childList = _xeUtils.default.get(node, childrenField);
-      const hasChild = childList && childList.length;
-      let isDisabled = !!currentMethod;
-      if (trigger === 'child') {
-        if (hasChild) {
-          return;
         }
-      } else if (trigger === 'parent') {
-        if (!hasChild) {
-          return;
+        return recalculate();
+      },
+      /**
+       * 用于树结构，给行数据加载子节点
+       */
+      loadChildrenNode(node, childRecords) {
+        const {
+          lazy,
+          transform
+        } = props;
+        const {
+          nodeMaps
+        } = internalData;
+        if (!lazy) {
+          return Promise.resolve([]);
         }
-      }
-      if (currentMethod) {
-        isDisabled = !currentMethod({
-          node
+        const childrenField = computeChildrenField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        const parentNodeItem = nodeMaps[getNodeId(node)];
+        const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+        const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+        return createNode(childRecords).then(nodeList => {
+          _xeUtils.default.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+            const itemNodeId = getNodeId(childRow);
+            nodeMaps[itemNodeId] = {
+              item: node,
+              index: -1,
+              items,
+              parent: parent || parentNodeItem.item,
+              nodes: parentNodes.concat(nodes),
+              level: parentLevel + nodes.length,
+              treeIndex: -1,
+              lineCount: 0,
+              treeLoaded: false
+            };
+          }, {
+            children: childrenField
+          });
+          node[childrenField] = nodeList;
+          if (transform) {
+            node[mapChildrenField] = nodeList;
+          }
+          updateAfterDataIndex();
+          return nodeList;
         });
-      }
-      if (isDisabled) {
-        return;
-      }
-      const isChecked = true;
-      reactData.currentNode = node;
-      dispatchEvent('current-change', {
-        node,
-        checked: isChecked
-      }, evnt);
-    };
-    const changeRadioEvent = (evnt, node) => {
-      evnt.preventDefault();
-      evnt.stopPropagation();
-      const radioOpts = computeRadioOpts.value;
-      const {
-        checkMethod
-      } = radioOpts;
-      let isDisabled = !!checkMethod;
-      if (checkMethod) {
-        isDisabled = !checkMethod({
-          node
+      },
+      isExpandByNode,
+      isCheckedByRadioNodeId,
+      isCheckedByRadioNode,
+      isCheckedByCheckboxNodeId,
+      isIndeterminateByCheckboxNode,
+      isCheckedByCheckboxNode,
+      getCheckboxIndeterminateNodes() {
+        const {
+          nodeMaps,
+          indeterminateRowMaps
+        } = internalData;
+        const list = [];
+        _xeUtils.default.each(indeterminateRowMaps, (item, nodeid) => {
+          const nodeItem = nodeMaps[nodeid];
+          if (nodeItem) {
+            list.push(nodeItem.item);
+          }
         });
-      }
-      if (isDisabled) {
-        return;
-      }
-      const isChecked = true;
-      const value = getNodeId(node);
-      reactData.selectRadioKey = value;
-      emitRadioMode(value);
-      dispatchEvent('radio-change', {
-        node,
-        value,
-        checked: isChecked
-      }, evnt);
+        return list;
+      },
+      recalculate,
+      scrollTo,
+      clearScroll
     };
     const treePrivateMethods = {};
     Object.assign($xeTree, treeMethods, treePrivateMethods);
@@ -1242,12 +1741,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         visibleMethod
       } = radioOpts;
       const isVisible = !visibleMethod || visibleMethod({
+        $tree: $xeTree,
         node
       });
       let isDisabled = !!checkMethod;
       if (showRadio && showIcon && isVisible) {
         if (checkMethod) {
           isDisabled = !checkMethod({
+            $tree: $xeTree,
             node
           });
         }
@@ -1279,12 +1780,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = checkboxOpts;
       const isIndeterminate = isIndeterminateByCheckboxNodeid(nodeid);
       const isVisible = !visibleMethod || visibleMethod({
+        $tree: $xeTree,
         node
       });
       let isDisabled = !!checkMethod;
       if (showCheckbox && showIcon && isVisible) {
         if (checkMethod) {
           isDisabled = !checkMethod({
+            $tree: $xeTree,
             node
           });
         }
@@ -1305,7 +1808,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return (0, _ui.renderEmptyElement)($xeTree);
     };
-    const renderNode = node => {
+    const renderNode = (node, nodeid) => {
       const {
         lazy,
         showRadio,
@@ -1323,6 +1826,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         updateExpandedFlag
       } = reactData;
       const {
+        afterTreeList,
         nodeMaps,
         treeExpandedMaps,
         treeExpandLazyLoadedMaps
@@ -1335,30 +1839,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const iconSlot = slots.icon;
       const titleSlot = slots.title;
       const extraSlot = slots.extra;
-      const nodeid = getNodeId(node);
       const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
       const nodeItem = nodeMaps[nodeid];
       const nodeValue = _xeUtils.default.get(node, titleField);
-      const childVns = [];
-      if (hasChild && treeExpandedMaps[nodeid]) {
-        if (showLine) {
-          childVns.push((0, _vue.h)('div', {
-            key: 'line',
-            class: 'vxe-tree--node-child-line',
-            style: {
-              height: `calc(${nodeItem.lineCount} * var(--vxe-ui-tree-node-height) - var(--vxe-ui-tree-node-height) / 2)`,
-              left: `${(nodeItem.level + 1) * (indent || 1)}px`
-            }
-          }));
-        }
-        childList.forEach(childItem => {
-          childVns.push(renderNode(childItem));
-        });
-      }
+      const nLevel = nodeItem.level;
       let isRadioChecked = false;
       if (showRadio) {
-        // eslint-disable-next-line eqeqeq
-        isRadioChecked = nodeid == selectRadioKey;
+        isRadioChecked = nodeid === String(selectRadioKey);
       }
       let isCheckboxChecked = false;
       if (showCheckbox) {
@@ -1372,8 +1859,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         hasLazyChilds = node[hasChildField];
         isLazyLoaded = !!nodeItem.treeLoaded;
       }
+      const prevNode = nodeItem.items[nodeItem.treeIndex - 1];
+      const nParams = {
+        node,
+        isExpand
+      };
       return (0, _vue.h)('div', {
-        class: ['vxe-tree--node-wrapper', `node--level-${nodeItem.level}`],
+        key: nodeid,
+        class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
         nodeid
       }, [(0, _vue.h)('div', {
         class: ['vxe-tree--node-item', {
@@ -1382,7 +1875,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is-checkbox--checked': isCheckboxChecked
         }],
         style: {
-          paddingLeft: `${(nodeItem.level - 1) * (indent || 1)}px`
+          paddingLeft: `${(nLevel - 1) * (indent || 1)}px`
         },
         onClick(evnt) {
           handleNodeClickEvent(evnt, node);
@@ -1390,41 +1883,57 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         onDblclick(evnt) {
           handleNodeDblclickEvent(evnt, node);
         }
-      }, [showIcon || showLine ? (0, _vue.h)('div', {
+      }, [showLine ? (0, _vue.h)('div', {
+        class: 'vxe-tree--node-line-wrapper'
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-tree--node-line',
+        style: {
+          height: `${getNodeId(afterTreeList[0]) === nodeid ? 1 : (0, _util.calcTreeLine)($xeTree, node, prevNode)}px`
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeTree), (0, _vue.h)('div', {
         class: 'vxe-tree--node-item-switcher'
       }, showIcon && (lazy ? isLazyLoaded ? hasChild : hasLazyChilds : hasChild) ? [(0, _vue.h)('div', {
         class: 'vxe-tree--node-item-icon',
         onClick(evnt) {
           toggleExpandEvent(evnt, node);
         }
-      }, iconSlot ? iconSlot({
-        node,
-        isExpand
-      }) : [(0, _vue.h)('i', {
+      }, iconSlot ? (0, _vn.getSlotVNs)(iconSlot(nParams)) : [(0, _vue.h)('i', {
         class: isLazyLoading ? iconLoaded || (0, _ui.getIcon)().TREE_NODE_LOADED : isExpand ? iconOpen || (0, _ui.getIcon)().TREE_NODE_OPEN : iconClose || (0, _ui.getIcon)().TREE_NODE_CLOSE
-      })])] : []) : (0, _ui.renderEmptyElement)($xeTree), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0, _vue.h)('div', {
+      })])] : []), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0, _vue.h)('div', {
         class: 'vxe-tree--node-item-inner'
       }, [(0, _vue.h)('div', {
         class: 'vxe-tree--node-item-title'
-      }, titleSlot ? (0, _vn.getSlotVNs)(titleSlot({
-        node,
-        isExpand
-      })) : `${nodeValue}`), extraSlot ? (0, _vue.h)('div', {
+      }, titleSlot ? (0, _vn.getSlotVNs)(titleSlot(nParams)) : `${nodeValue}`), extraSlot ? (0, _vue.h)('div', {
         class: 'vxe-tree--node-item-extra'
-      }, (0, _vn.getSlotVNs)(extraSlot({
-        node,
-        isExpand
-      }))) : (0, _ui.renderEmptyElement)($xeTree)])]), hasChild && treeExpandedMaps[nodeid] ? (0, _vue.h)('div', {
-        class: 'vxe-tree--node-child-wrapper'
-      }, childVns) : (0, _ui.renderEmptyElement)($xeTree)]);
+      }, (0, _vn.getSlotVNs)(extraSlot(nParams))) : (0, _ui.renderEmptyElement)($xeTree)])])]);
     };
-    const renderNodeList = () => {
+    const renderList = treeList => {
       const {
-        treeList
-      } = reactData;
-      return (0, _vue.h)('div', {
-        class: 'vxe-tree--node-list-wrapper'
-      }, treeList.map(node => renderNode(node)));
+        transform
+      } = props;
+      const {
+        treeExpandedMaps
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      if (!treeList.length) {
+        return [(0, _vue.h)('div', {
+          class: 'vxe-tree--empty-placeholder'
+        }, (0, _ui.getI18n)('vxe.tree.searchEmpty'))];
+      }
+      const nodeVNs = [];
+      treeList.forEach(transform ? node => {
+        const nodeid = getNodeId(node);
+        nodeVNs.push(renderNode(node, nodeid));
+      } : node => {
+        const nodeid = getNodeId(node);
+        nodeVNs.push(renderNode(node, nodeid));
+        const childList = _xeUtils.default.get(node, childrenField);
+        const hasChild = childList && childList.length;
+        if (hasChild && treeExpandedMaps[nodeid]) {
+          nodeVNs.push(...renderList(childList));
+        }
+      });
+      return nodeVNs;
     };
     const renderVN = () => {
       const {
@@ -1432,13 +1941,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         trigger,
         showLine
       } = props;
+      const {
+        bodyHeight,
+        topSpaceHeight,
+        treeList
+      } = reactData;
       const vSize = computeSize.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
-      const treeStyle = computeTreeStyle.value;
       const loadingOpts = computeLoadingOpts.value;
       const isRowHover = computeIsRowHover.value;
+      const treeStyle = computeTreeStyle.value;
       const loadingSlot = slots.loading;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-tree', {
@@ -1449,9 +1965,34 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'node--hover': isRowHover,
           'node--trigger': trigger === 'node',
           'is--loading': loading
-        }],
-        style: treeStyle
-      }, [renderNodeList(),
+        }]
+      }, [headerSlot ? (0, _vue.h)('div', {
+        ref: refHeaderWrapperElem,
+        class: 'vxe-tree--header-wrapper'
+      }, headerSlot({
+        $tree: $xeTree
+      })) : (0, _ui.renderEmptyElement)($xeTree), (0, _vue.h)('div', {
+        ref: refVirtualWrapper,
+        class: 'vxe-tree--node-list-wrapper',
+        style: treeStyle,
+        onScroll: scrollEvent
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-tree--y-space',
+        style: {
+          height: bodyHeight ? `${bodyHeight}px` : ''
+        }
+      }), (0, _vue.h)('div', {
+        ref: refVirtualBody,
+        class: 'vxe-tree--node-list-body',
+        style: {
+          transform: `translateY(${topSpaceHeight}px)`
+        }
+      }, renderList(treeList))]), footerSlot ? (0, _vue.h)('div', {
+        ref: refFooterWrapperElem,
+        class: 'vxe-tree--footer-wrapper'
+      }, footerSlot({
+        $tree: $xeTree
+      })) : (0, _ui.renderEmptyElement)($xeTree),
       /**
        * 加载中
        */
@@ -1474,7 +2015,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       dataFlag.value++;
     });
     (0, _vue.watch)(dataFlag, () => {
-      loadTreeData(props.data || []);
+      loadData(props.data || []);
     });
     (0, _vue.watch)(() => props.checkNodeKey, val => {
       reactData.selectRadioKey = val;
@@ -1489,13 +2030,54 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(checkboxFlag, () => {
       updateCheckboxChecked(props.checkNodeKeys || []);
     });
+    (0, _vue.watch)(() => props.filterValue, () => {
+      triggerSearchEvent(new Event('filter'));
+    });
+    const hFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.height, () => {
+      hFlag.value++;
+    });
+    (0, _vue.watch)(() => props.minHeight, () => {
+      hFlag.value++;
+    });
+    (0, _vue.watch)(() => props.maxHeight, () => {
+      hFlag.value++;
+    });
+    (0, _vue.watch)(hFlag, () => {
+      recalculate();
+    });
+    (0, _vue.onMounted)(() => {
+      if (props.autoResize) {
+        const el = refElem.value;
+        const parentEl = getParentElem();
+        const resizeObserver = _ui.globalResize.create(() => {
+          if (props.autoResize) {
+            recalculate();
+          }
+        });
+        if (el) {
+          resizeObserver.observe(el);
+        }
+        if (parentEl) {
+          resizeObserver.observe(parentEl);
+        }
+        internalData.resizeObserver = resizeObserver;
+      }
+      _ui.globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+    });
     (0, _vue.onUnmounted)(() => {
-      reactData.treeList = [];
+      const {
+        resizeObserver
+      } = internalData;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
       internalData.treeExpandedMaps = {};
       internalData.indeterminateRowMaps = {};
       internalData.nodeMaps = {};
+      _ui.globalEvents.off($xeTree, 'resize');
     });
-    loadTreeData(props.data || []);
+    loadData(props.data || []);
     $xeTree.renderVN = renderVN;
     return $xeTree;
   },