vxe-pc-ui 3.7.4 → 3.7.6

package/packages/tree/src/tree.ts

@@ -1,9 +1,11 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent, getIcon, getConfig, renderEmptyElement, globalMixins } from '../../ui'
+import { getI18n, createEvent, getIcon, getConfig, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui'
+import { calcTreeLine } from './util'
+import { errLog } from '../../ui/src/log'
 import { getSlotVNs } from '../../ui/src/vn'
-import { toCssUnit } from '../../ui/src/dom'
+import { toCssUnit, isScale, getPaddingTopBottomSize } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 
 import type { TreeReactData, VxeTreeEmits, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeComponentSizeType, ValueOf } from '../../../types'
@@ -34,7 +36,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
   ],
   props: {
     data: Array as PropType<VxeTreePropTypes.Data>,
+    autoResize: {
+      type: Boolean as PropType<VxeTreePropTypes.AutoResize>,
+      default: () => getConfig().tree.autoResize
+    },
     height: [String, Number] as PropType<VxeTreePropTypes.Height>,
+    maxHeight: {
+      type: [String, Number] as PropType<VxeTreePropTypes.MaxHeight>,
+      default: () => getConfig().tree.maxHeight
+    },
     minHeight: {
       type: [String, Number] as PropType<VxeTreePropTypes.MinHeight>,
       default: () => getConfig().tree.minHeight
@@ -126,15 +136,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: String as PropType<VxeTreePropTypes.IconLoaded>,
       default: () => getConfig().tree.iconLoaded
     },
+    filterValue: [String, Number] as PropType<VxeTreePropTypes.FilterValue>,
+    filterConfig: Object as PropType<VxeTreePropTypes.FilterConfig>,
     size: {
       type: String as PropType<VxeTreePropTypes.Size>,
       default: () => getConfig().tree.size || getConfig().size
-    }
+    },
+    virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>
   },
   data () {
     const xID = XEUtils.uniqueId()
     const reactData: TreeReactData = {
+      parentHeight: 0,
+      customHeight: 0,
+      customMinHeight: 0,
+      customMaxHeight: 0,
       currentNode: null,
+      scrollYLoad: false,
+      bodyHeight: 0,
+      topSpaceHeight: 0,
       selectRadioKey: null,
       treeList: [],
       updateExpandedFlag: 1,
@@ -142,11 +162,28 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
     const internalData: TreeInternalData = {
       // initialized: false,
+      // lastFilterValue: '',
+      treeFullData: [],
+      afterTreeList: [],
+      afterVisibleList: [],
       nodeMaps: {},
       selectCheckboxMaps: {},
       indeterminateRowMaps: {},
       treeExpandedMaps: {},
-      treeExpandLazyLoadedMaps: {}
+      treeExpandLazyLoadedMaps: {},
+
+      lastScrollLeft: 0,
+      lastScrollTop: 0,
+      scrollYStore: {
+        startIndex: 0,
+        endIndex: 0,
+        visibleSize: 0,
+        offsetSize: 0,
+        rowHeight: 0
+      },
+
+      lastScrollTime: 0
+      // hpTimeout: undefined
     }
     return {
       xID,
@@ -201,6 +238,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return props.hasChildField || 'hasChild'
     },
+    computeVirtualYOpts () {
+      const $xeTree = this
+      const props = $xeTree
+
+      return Object.assign({} as { gt: number }, getConfig().tree.virtualYConfig, props.virtualYConfig)
+    },
     computeIsRowCurrent () {
       const $xeTree = this
       const props = $xeTree
@@ -249,17 +292,26 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     computeTreeStyle () {
       const $xeTree = this
-      const props = $xeTree
+      const reactData = $xeTree.reactData
 
-      const { height, minHeight } = props
+      const { customHeight, customMinHeight, customMaxHeight } = reactData
       const stys: Record<string, string> = {}
-      if (height) {
-        stys.height = toCssUnit(height)
+      if (customHeight) {
+        stys.height = toCssUnit(customHeight)
       }
-      if (minHeight) {
-        stys.minHeight = toCssUnit(minHeight)
+      if (customMinHeight) {
+        stys.minHeight = toCssUnit(customMinHeight)
+      }
+      if (customMaxHeight) {
+        stys.maxHeight = toCssUnit(customMaxHeight)
       }
       return stys
+    },
+    computeFilterOpts () {
+      const $xeTree = this
+      const props = $xeTree
+
+      return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig)
     }
   },
   methods: {
@@ -270,614 +322,646 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTree = this
       $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params))
     },
-    clearCurrentNode () {
+    getNodeId (node: any) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
 
-      reactData.currentNode = null
-      return $xeTree.$nextTick()
+      const valueField = $xeTree.computeValueField
+      const nodeid = XEUtils.get(node, valueField)
+      return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(nodeid)
     },
-    getCurrentNodeId () {
+    isExpandByNode (node: any) {
       const $xeTree = this
       const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
 
-      const { currentNode } = reactData
-      if (currentNode) {
-        return $xeTree.getNodeId(currentNode)
-      }
-      return null
+      const { updateExpandedFlag } = reactData
+      const { treeExpandedMaps } = internalData
+      const nodeid = $xeTree.getNodeId(node)
+      return !!(updateExpandedFlag && treeExpandedMaps[nodeid])
     },
-    getCurrentNode () {
+    isCheckedByRadioNodeId (nodeid: any) {
       const $xeTree = this
       const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
 
-      const { currentNode } = reactData
-      const { nodeMaps } = internalData
-      if (currentNode) {
-        const nodeItem = nodeMaps[$xeTree.getNodeId(currentNode)]
-        if (nodeItem) {
-          return nodeItem.item
-        }
-      }
-      return null
+      const { selectRadioKey } = reactData
+      return selectRadioKey === nodeid
     },
-    setCurrentNodeId (nodeKey: any) {
+    isCheckedByRadioNode (node: any) {
+      const $xeTree = this
+
+      return $xeTree.isCheckedByRadioNodeId($xeTree.getNodeId(node))
+    },
+    isCheckedByCheckboxNodeId (nodeid: any) {
       const $xeTree = this
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { nodeMaps } = internalData
-      const nodeItem = nodeMaps[nodeKey]
-      reactData.currentNode = nodeItem ? nodeItem.item : null
-      return $xeTree.$nextTick()
+      const { updateCheckboxFlag } = reactData
+      const { selectCheckboxMaps } = internalData
+      return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid])
     },
-    setCurrentNode (node: any) {
+    isCheckedByCheckboxNode (node: any) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
 
-      reactData.currentNode = node
-      return $xeTree.$nextTick()
+      return $xeTree.isCheckedByCheckboxNodeId($xeTree.getNodeId(node))
     },
-    clearRadioNode () {
+    isIndeterminateByCheckboxNodeid (nodeid: any) {
       const $xeTree = this
       const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
 
-      reactData.selectRadioKey = null
-      return $xeTree.$nextTick()
+      const { updateCheckboxFlag } = reactData
+      const { indeterminateRowMaps } = internalData
+      return !!(updateCheckboxFlag && indeterminateRowMaps[nodeid])
     },
-    getCheckboxNodeIds () {
+    isIndeterminateByCheckboxNode (node: any) {
       const $xeTree = this
-      const internalData = $xeTree.internalData
 
-      const { selectCheckboxMaps } = internalData
-      return Object.keys(selectCheckboxMaps)
+      return $xeTree.isIndeterminateByCheckboxNodeid($xeTree.getNodeId(node))
     },
-    getCheckboxNodes () {
+    emitCheckboxMode (value: VxeTreePropTypes.CheckNodeKeys) {
       const $xeTree = this
-      const internalData = $xeTree.internalData
 
-      const { nodeMaps, selectCheckboxMaps } = internalData
-      const list: any[] = []
-      XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
-        const nodeItem = nodeMaps[nodeid]
-        if (nodeItem) {
-          list.push(nodeItem.item)
-        }
-      })
-      return list
+      $xeTree.$emit('update:checkNodeKeys', value)
     },
-    clearCheckboxNode () {
+    emitRadioMode (value: VxeTreePropTypes.CheckNodeKey) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
 
-      internalData.selectCheckboxMaps = {}
-      reactData.updateCheckboxFlag++
-      return $xeTree.$nextTick()
+      $xeTree.$emit('update:checkNodeKey', value)
     },
-    setAllCheckboxNode (checked: any) {
+    setRadioNode (node: any) {
       const $xeTree = this
-      const props = $xeTree
       const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
 
-      const { transform } = props
-      const selectMaps: Record<string, boolean> = {}
-      const childrenField = $xeTree.computeChildrenField
-      const mapChildrenField = $xeTree.computeMapChildrenField
-      if (checked) {
-        XEUtils.eachTree(reactData.treeList, (node) => {
-          const nodeid = $xeTree.getNodeId(node)
-          selectMaps[nodeid] = true
-        }, { children: transform ? mapChildrenField : childrenField })
+      if (node) {
+        reactData.selectRadioKey = $xeTree.getNodeId(node)
       }
-      internalData.selectCheckboxMaps = selectMaps
-      reactData.updateCheckboxFlag++
       return $xeTree.$nextTick()
     },
-    clearExpandNode () {
+    setCheckboxNode (nodeList: any | any[], checked: boolean) {
       const $xeTree = this
 
-      return $xeTree.clearAllExpandNode()
+      if (nodeList) {
+        if (!XEUtils.isArray(nodeList)) {
+          nodeList = [nodeList]
+        }
+        $xeTree.handleCheckedCheckboxNode(nodeList, checked)
+      }
+      return $xeTree.$nextTick()
     },
-    clearAllExpandNode () {
+    setCheckboxByNodeId (nodeIds: any | any[], checked: boolean) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
       const { nodeMaps } = internalData
-      XEUtils.each(nodeMaps, (nodeItem: VxeTreeDefines.NodeCacheItem) => {
-        nodeItem.treeLoaded = false
-      })
-      internalData.treeExpandedMaps = {}
-      reactData.updateExpandedFlag++
+      if (nodeIds) {
+        if (!XEUtils.isArray(nodeIds)) {
+          nodeIds = [nodeIds]
+        }
+        const nodeList: any[] = []
+        nodeIds.forEach((nodeid: string) => {
+          const nodeItem = nodeMaps[nodeid]
+          if (nodeItem) {
+            nodeList.push(nodeItem.item)
+          }
+        })
+        $xeTree.handleCheckedCheckboxNode(nodeList, checked)
+      }
       return $xeTree.$nextTick()
     },
-    setExpandByNodeId (nodeids: any, expanded: any) {
+    handleCheckedCheckboxNode (nodeList: any[], checked: boolean) {
       const $xeTree = this
+      const props = $xeTree
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { treeExpandedMaps } = internalData
-      if (nodeids) {
-        if (!XEUtils.isArray(nodeids)) {
-          nodeids = [nodeids]
+      const { transform } = props
+      const { selectCheckboxMaps } = internalData
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      const childrenField = $xeTree.computeChildrenField
+      const checkboxOpts = $xeTree.computeCheckboxOpts
+      const { checkStrictly } = checkboxOpts
+      const handleSelect = (node: any) => {
+        const nodeid = $xeTree.getNodeId(node)
+        if (checked) {
+          if (!selectCheckboxMaps[nodeid]) {
+            selectCheckboxMaps[nodeid] = node
+          }
+        } else {
+          if (selectCheckboxMaps[nodeid]) {
+            delete selectCheckboxMaps[nodeid]
+          }
         }
-        nodeids.forEach((nodeid: string) => {
-          handleSetExpand(nodeid, expanded, treeExpandedMaps)
-        })
-        reactData.updateExpandedFlag++
       }
-      return $xeTree.$nextTick()
+      if (checkStrictly) {
+        nodeList.forEach(handleSelect)
+      } else {
+        XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField })
+      }
+      reactData.updateCheckboxFlag++
+      $xeTree.updateCheckboxStatus()
     },
-    getExpandNodeIds () {
+    updateCheckboxChecked (nodeIds: VxeTreePropTypes.CheckNodeKeys) {
       const $xeTree = this
-      const internalData = $xeTree.internalData
 
-      const { treeExpandedMaps } = internalData
-      return XEUtils.keys(treeExpandedMaps)
+      $xeTree.setCheckboxByNodeId(nodeIds, true)
     },
-    getExpandNodes () {
+    handleSetExpand (nodeid: string, expanded: boolean, expandedMaps: Record<string, boolean>) {
+      if (expanded) {
+        if (!expandedMaps[nodeid]) {
+          expandedMaps[nodeid] = true
+        }
+      } else {
+        if (expandedMaps[nodeid]) {
+          delete expandedMaps[nodeid]
+        }
+      }
+    },
+    getParentElem () {
       const $xeTree = this
-      const internalData = $xeTree.internalData
 
-      const { nodeMaps, treeExpandedMaps } = internalData
-      const list: any[] = []
-      XEUtils.each(treeExpandedMaps, (item, nodeid) => {
-        const nodeItem = nodeMaps[nodeid]
-        if (nodeItem) {
-          list.push(nodeItem.item)
-        }
-      })
-      return list
+      const el = $xeTree.$refs.refElem as HTMLDivElement
+      return el ? el.parentElement : null
     },
-    setExpandNode (nodes: any, expanded: any) {
+    calcTableHeight (key: 'height' | 'minHeight' | 'maxHeight') {
       const $xeTree = this
+      const props = $xeTree
       const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
 
-      const { treeExpandedMaps } = internalData
-      if (nodes) {
-        if (!XEUtils.isArray(nodes)) {
-          nodes = [nodes]
+      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)
         }
-        nodes.forEach((node: any) => {
-          const nodeid = $xeTree.getNodeId(node)
-          handleSetExpand(nodeid, expanded, treeExpandedMaps)
-        })
-        reactData.updateExpandedFlag++
       }
-      return $xeTree.$nextTick()
+      return num
     },
-    toggleExpandByNodeId (nodeids: any) {
+    updateHeight () {
       const $xeTree = this
       const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
 
-      const { treeExpandedMaps } = internalData
-      if (nodeids) {
-        if (!XEUtils.isArray(nodeids)) {
-          nodeids = [nodeids]
-        }
-        nodeids.forEach((nodeid: string) => {
-          handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps)
-        })
-        reactData.updateExpandedFlag++
+      reactData.customHeight = $xeTree.calcTableHeight('height')
+      reactData.customMinHeight = $xeTree.calcTableHeight('minHeight')
+      reactData.customMaxHeight = $xeTree.calcTableHeight('maxHeight')
+
+      // 如果启用虚拟滚动，默认高度
+      if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
+        reactData.customHeight = 300
       }
-      return $xeTree.$nextTick()
     },
-    toggleExpandNode (nodes: any) {
+    createNode (records: any[]) {
       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: any) => {
-          const nodeid = $xeTree.getNodeId(node)
-          handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps)
+      const valueField = $xeTree.computeValueField
+      return Promise.resolve(
+        records.map(obj => {
+          const item = { ...obj }
+          let nodeid = $xeTree.getNodeId(item)
+          if (!nodeid) {
+            nodeid = getNodeUniqueId()
+            XEUtils.set(item, valueField, nodeid)
+          }
+          return item
         })
-        reactData.updateExpandedFlag++
-      }
-      return $xeTree.$nextTick()
+      )
     },
-    setAllExpandNode (expanded: boolean) {
+    cacheNodeMap () {
       const $xeTree = this
-      const props = $xeTree
-      const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { transform } = props
-      const { treeExpandedMaps } = internalData
+      const { treeFullData } = internalData
+      const valueField = $xeTree.computeValueField
       const childrenField = $xeTree.computeChildrenField
-      const mapChildrenField = $xeTree.computeMapChildrenField
-      if (expanded) {
-        XEUtils.eachTree(reactData.treeList, (node) => {
-          const childList: any[] = 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++
-      return $xeTree.$nextTick()
-    },
-    reloadExpandNode (node: any) {
-      const $xeTree = this
-      const props = $xeTree
-
-      const { lazy } = props
-      if (lazy) {
-        $xeTree.clearExpandLoaded(node)
-        return $xeTree.handleAsyncTreeExpandChilds(node)
-      }
-      return $xeTree.$nextTick()
+      const keyMaps: Record<string, VxeTreeDefines.NodeCacheItem> = {}
+      XEUtils.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
+        let nodeid = $xeTree.getNodeId(item)
+        if (!nodeid) {
+          nodeid = getNodeUniqueId()
+          XEUtils.set(item, valueField, nodeid)
+        }
+        keyMaps[nodeid] = {
+          item,
+          index,
+          items,
+          parent,
+          nodes,
+          level: nodes.length,
+          treeIndex: index,
+          lineCount: 0,
+          treeLoaded: false
+        }
+      }, { children: childrenField })
+      internalData.nodeMaps = keyMaps
     },
-    clearExpandLoaded (node: any) {
+    updateAfterDataIndex () {
       const $xeTree = this
       const props = $xeTree
       const internalData = $xeTree.internalData
 
-      const { lazy } = props
-      const { nodeMaps } = internalData
-      if (lazy) {
-        const nodeItem = nodeMaps[$xeTree.getNodeId(node)]
+      const { transform } = props
+      const { afterTreeList, nodeMaps } = internalData
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      XEUtils.eachTree(afterTreeList, (item, index, items) => {
+        const nodeid = $xeTree.getNodeId(item)
+        const nodeItem = nodeMaps[nodeid]
         if (nodeItem) {
-          nodeItem.treeLoaded = false
+          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
         }
-      }
-      return $xeTree.$nextTick()
+      }, { children: transform ? mapChildrenField : childrenField })
     },
-    /**
-     * 用于树结构，给行数据加载子节点
-     */
-    loadChildrenNode (node: any, childRecords: any) {
+    updateAfterFullData () {
       const $xeTree = this
       const props = $xeTree
       const internalData = $xeTree.internalData
 
-      const { lazy, transform } = props
-      const { nodeMaps } = internalData
-      if (!lazy) {
-        return Promise.resolve([])
-      }
+      const { transform, filterValue } = props
+      const { treeFullData, lastFilterValue } = internalData
+      const titleField = $xeTree.computeTitleField
       const childrenField = $xeTree.computeChildrenField
-      const parentNodeItem = nodeMaps[$xeTree.getNodeId(node)]
-      const parentLevel = parentNodeItem ? parentNodeItem.level : 0
-      const parentNodes = parentNodeItem ? parentNodeItem.nodes : []
-      return $xeTree.createNode(childRecords).then((nodeList) => {
-        XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
-          const itemNodeId = $xeTree.getNodeId(childRow)
-          nodeMaps[itemNodeId] = {
-            item: node,
-            itemIndex: -1,
-            items,
-            parent: parent || parentNodeItem.item,
-            nodes: parentNodes.concat(nodes),
-            level: parentLevel + nodes.length,
-            lineCount: 0,
-            treeLoaded: false
+      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: any) => {
+              return filterMethod({
+                $tree: $xeTree,
+                node: item,
+                filterValue: filterStr
+              })
+            }
+          : (item: any) => {
+              return String(item[titleField]).toLowerCase().indexOf(filterStr) > -1
+            }
+        const bafParams = { $tree: $xeTree, filterValue: filterStr }
+        if (beforeFilterMethod) {
+          beforeFilterMethod(bafParams)
+        }
+        if (transform) {
+          treeList = XEUtils.searchTree(treeFullData, handleSearch, { children: childrenField, mapChildren: mapChildrenField, isEvery: true })
+          fullList = treeList
+        } else {
+          fullList = treeFullData.filter(handleSearch)
+        }
+        internalData.lastFilterValue = filterStr
+        $xeTree.$nextTick(() => {
+          // 筛选时自动展开
+          if (autoExpandAll) {
+            $xeTree.setAllExpandNode(true).then(() => {
+              if (afterFilterMethod) {
+                afterFilterMethod(bafParams)
+              }
+            })
+          } else {
+            if (afterFilterMethod) {
+              afterFilterMethod(bafParams)
+            }
           }
-        }, { children: childrenField })
-        node[childrenField] = nodeList
+        })
+      } else {
         if (transform) {
-          node[childrenField] = nodeList
+          treeList = XEUtils.searchTree(treeFullData, () => true, { children: childrenField, mapChildren: mapChildrenField, isEvery: true })
+          fullList = treeList
+          if (lastFilterValue) {
+            const bafParams = { $tree: $xeTree, filterValue: filterStr }
+            if (beforeFilterMethod) {
+              beforeFilterMethod(bafParams)
+            }
+            // 取消筛选时自动收起
+            $xeTree.$nextTick(() => {
+              if (autoExpandAll) {
+                $xeTree.clearAllExpandNode().then(() => {
+                  if (afterFilterMethod) {
+                    afterFilterMethod(bafParams)
+                  }
+                })
+              } else {
+                if (afterFilterMethod) {
+                  afterFilterMethod(bafParams)
+                }
+              }
+            })
+          }
         }
-        $xeTree.updateNodeLine(node)
-        return nodeList
-      })
+        internalData.lastFilterValue = ''
+      }
+      internalData.afterVisibleList = fullList
+      internalData.afterTreeList = treeList
+      $xeTree.updateAfterDataIndex()
     },
-    getNodeId (node: any) {
+    /**
+     * 如果为虚拟树、则将树结构拍平
+     */
+    handleTreeToList () {
       const $xeTree = this
+      const props = $xeTree
+      const internalData = $xeTree.internalData
 
-      const valueField = $xeTree.computeValueField
-      const nodeid = XEUtils.get(node, valueField)
-      return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(nodeid)
+      const { transform } = props
+      const { afterTreeList, treeExpandedMaps } = internalData
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      const expandMaps: {
+        [key: string]: number
+      } = {}
+      if (transform) {
+        const fullData: any[] = []
+        XEUtils.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
+          const nodeid = $xeTree.getNodeId(item)
+          const parentNodeid = $xeTree.getNodeId(parentRow)
+          if (!parentRow || (expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid])) {
+            expandMaps[nodeid] = 1
+            fullData.push(item)
+          }
+        }, { children: mapChildrenField })
+        $xeTree.updateScrollYStatus(fullData)
+        internalData.afterVisibleList = fullData
+        return fullData
+      }
+      return internalData.afterVisibleList
     },
-    isExpandByNode (node: any) {
+    handleData (force?: boolean) {
       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])
+      const { scrollYLoad } = reactData
+      const { scrollYStore } = internalData
+      let fullList: any[] = internalData.afterVisibleList
+      if (force) {
+        // 更新数据，处理筛选和排序
+        $xeTree.updateAfterFullData()
+        // 如果为虚拟树，将树结构拍平
+        fullList = $xeTree.handleTreeToList()
+      }
+      const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0)
+      reactData.treeList = treeList
     },
-    isCheckedByRadioNodeId (nodeid: any) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
+    triggerSearchEvent: XEUtils.debounce(function (this: any) {
+      const $xeSelect = this
 
-      const { selectRadioKey } = reactData
-      return selectRadioKey === nodeid
-    },
-    isCheckedByRadioNode  (node: any) {
+      $xeSelect.handleData(true)
+    }, 350, { trailing: true }),
+    loadData (list: any[]) {
       const $xeTree = this
+      const props = $xeTree
+      const internalData = $xeTree.internalData
 
-      return $xeTree.isCheckedByRadioNodeId($xeTree.getNodeId(node))
+      const { expandAll, transform } = props
+      const { initialized, scrollYStore } = internalData
+      const keyField = $xeTree.computeKeyField
+      const parentField = $xeTree.computeParentField
+      const childrenField = $xeTree.computeChildrenField
+      const fullData = transform ? XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: childrenField }) : list ? list.slice(0) : []
+      internalData.treeFullData = fullData
+      Object.assign(scrollYStore, {
+        startIndex: 0,
+        endIndex: 1,
+        visibleSize: 0
+      })
+      const sYLoad = $xeTree.updateScrollYStatus(fullData)
+      $xeTree.cacheNodeMap()
+      $xeTree.handleData(true)
+      if (sYLoad) {
+        if (!(props.height || props.maxHeight)) {
+          errLog('vxe.error.reqProp', ['height | max-height | virtual-y-config.enabled=false'])
+        }
+      }
+      return $xeTree.computeScrollLoad().then(() => {
+        if (!initialized) {
+          if (list && list.length) {
+            internalData.initialized = true
+            if (expandAll) {
+              $xeTree.setAllExpandNode(true)
+            }
+            $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true)
+          }
+        }
+        $xeTree.updateHeight()
+        $xeTree.refreshScroll()
+      })
     },
-    isCheckedByCheckboxNodeId  (nodeid: any) {
+    updateScrollYStatus (fullData?: any[]) {
       const $xeTree = this
+      const props = $xeTree
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { updateCheckboxFlag } = reactData
-      const { selectCheckboxMaps } = internalData
-      return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid])
-    },
-    isCheckedByCheckboxNode  (node: any) {
-      const $xeTree = this
-
-      return $xeTree.isCheckedByCheckboxNodeId($xeTree.getNodeId(node))
+      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
     },
-    isIndeterminateByCheckboxNodeid (nodeid: any) {
+    updateYSpace () {
       const $xeTree = this
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { updateCheckboxFlag } = reactData
-      const { indeterminateRowMaps } = internalData
-      return !!(updateCheckboxFlag && indeterminateRowMaps[nodeid])
+      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
     },
-    isIndeterminateByCheckboxNode  (node: any) {
+    updateYData () {
       const $xeTree = this
 
-      return $xeTree.isIndeterminateByCheckboxNodeid($xeTree.getNodeId(node))
+      $xeTree.handleData()
+      $xeTree.updateYSpace()
     },
-    getCheckboxIndeterminateNodes () {
+    computeScrollLoad () {
       const $xeTree = this
+      const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const { nodeMaps, indeterminateRowMaps } = internalData
-      const list: any[] = []
-      XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
-        const nodeItem = nodeMaps[nodeid]
-        if (nodeItem) {
-          list.push(nodeItem.item)
+      return $xeTree.$nextTick().then(() => {
+        const { scrollYLoad } = reactData
+        const { scrollYStore } = internalData
+        const virtualBodyElem = $xeTree.$refs.refVirtualBody as HTMLDivElement
+        const virtualYOpts = $xeTree.computeVirtualYOpts
+        let rowHeight = 0
+        let firstItemElem: HTMLElement | undefined
+        if (virtualBodyElem) {
+          if (!firstItemElem) {
+            firstItemElem = virtualBodyElem.children[0] as HTMLElement
+          }
+        }
+        if (firstItemElem) {
+          rowHeight = firstItemElem.offsetHeight
+        }
+        rowHeight = Math.max(20, rowHeight)
+        scrollYStore.rowHeight = rowHeight
+        // 计算 Y 逻辑
+        if (scrollYLoad) {
+          const scrollBodyElem = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
+          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()
         }
       })
-      return list
-    },
-    emitCheckboxMode  (value: VxeTreePropTypes.CheckNodeKeys) {
-      const $xeTree = this
-
-      $xeTree.$emit('update:checkNodeKeys', value)
-    },
-    emitRadioMode  (value: VxeTreePropTypes.CheckNodeKey) {
-      const $xeTree = this
-
-      $xeTree.$emit('update:checkNodeKey', value)
     },
-    getRadioNodeId () {
+    /**
+     * 如果有滚动条，则滚动到对应的位置
+     * @param {Number} scrollLeft 左距离
+     * @param {Number} scrollTop 上距离
+     */
+    scrollTo (scrollLeft: number | null, scrollTop?: number | null) {
       const $xeTree = this
       const reactData = $xeTree.reactData
 
-      return reactData.selectRadioKey || null
+      const scrollBodyElem = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
+      if (scrollBodyElem) {
+        if (XEUtils.isNumber(scrollLeft)) {
+          scrollBodyElem.scrollLeft = scrollLeft
+        }
+        if (XEUtils.isNumber(scrollTop)) {
+          scrollBodyElem.scrollTop = scrollTop
+        }
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise<void>(resolve => {
+          setTimeout(() => {
+            $xeTree.$nextTick(() => {
+              resolve()
+            })
+          }, 50)
+        })
+      }
+      return $xeTree.$nextTick()
     },
-    setRadioNodeId (nodeKey: any) {
+    /**
+     * 刷新滚动条
+     */
+    refreshScroll () {
       const $xeTree = this
-      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
 
-      reactData.selectRadioKey = nodeKey
-      return $xeTree.$nextTick()
+      const { lastScrollLeft, lastScrollTop } = internalData
+      return $xeTree.clearScroll().then(() => {
+        if (lastScrollLeft || lastScrollTop) {
+          internalData.lastScrollLeft = 0
+          internalData.lastScrollTop = 0
+          return scrollTo(lastScrollLeft, lastScrollTop)
+        }
+      })
     },
-    getRadioNode () {
+    /**
+     * 重新计算列表
+     */
+    recalculate () {
       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
+      const { scrollYStore } = internalData
+      const { rowHeight } = scrollYStore
+      const el = $xeTree.$refs.refElem as HTMLDivElement
+      if (el && el.clientWidth && el.clientHeight) {
+        const parentEl = $xeTree.getParentElem()
+        const headerWrapperEl = $xeTree.$refs.refHeaderWrapperElem as HTMLDivElement
+        const footerWrapperEl = $xeTree.$refs.refFooterWrapperElem as HTMLDivElement
+        const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0
+        const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0
+        if (parentEl) {
+          const parentPaddingSize = getPaddingTopBottomSize(parentEl)
+          reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)
         }
+        $xeTree.updateHeight()
+        return $xeTree.computeScrollLoad()
       }
-      return null
+      return $xeTree.$nextTick()
     },
-    setRadioNode  (node: any) {
+    loadYData (evnt: Event) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
 
-      if (node) {
-        reactData.selectRadioKey = $xeTree.getNodeId(node)
+      const { scrollYStore } = internalData
+      const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore
+      const scrollBodyElem = evnt.target as HTMLDivElement
+      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()
+        }
       }
-      return $xeTree.$nextTick()
     },
-    setCheckboxNode  (nodeList: any | any[], checked: boolean) {
+    scrollEvent (evnt: Event) {
       const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
 
-      if (nodeList) {
-        if (!XEUtils.isArray(nodeList)) {
-          nodeList = [nodeList]
-        }
-        $xeTree.handleCheckedCheckboxNode(nodeList, checked)
+      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollTop = scrollBodyElem.scrollTop
+      const scrollLeft = scrollBodyElem.scrollLeft
+      const isX = scrollLeft !== internalData.lastScrollLeft
+      const isY = scrollTop !== internalData.lastScrollTop
+      internalData.lastScrollTop = scrollTop
+      internalData.lastScrollLeft = scrollLeft
+      if (reactData.scrollYLoad) {
+        $xeTree.loadYData(evnt)
       }
-      return $xeTree.$nextTick()
+      internalData.lastScrollTime = Date.now()
+      $xeTree.dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt)
     },
-    setCheckboxByNodeId  (nodeIds: any | any[], checked: boolean) {
+    clearScroll () {
       const $xeTree = this
       const internalData = $xeTree.internalData
 
-      const { nodeMaps } = internalData
-      if (nodeIds) {
-        if (!XEUtils.isArray(nodeIds)) {
-          nodeIds = [nodeIds]
-        }
-        const nodeList: any[] = []
-        nodeIds.forEach((nodeid: string) => {
-          const nodeItem = nodeMaps[nodeid]
-          if (nodeItem) {
-            nodeList.push(nodeItem.item)
-          }
-        })
-        $xeTree.handleCheckedCheckboxNode(nodeList, checked)
+      const scrollBodyElem = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
+      if (scrollBodyElem) {
+        scrollBodyElem.scrollTop = 0
+        scrollBodyElem.scrollLeft = 0
       }
+      internalData.lastScrollTop = 0
+      internalData.lastScrollLeft = 0
       return $xeTree.$nextTick()
     },
-    handleCheckedCheckboxNode  (nodeList: any[], checked: boolean) {
+    handleNodeClickEvent (evnt: MouseEvent, node: any) {
       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: any) => {
-        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  (nodeIds: VxeTreePropTypes.CheckNodeKeys) {
-      const $xeTree = this
-
-      $xeTree.setCheckboxByNodeId(nodeIds, true)
-    },
-    createNode (records: any[]) {
-      const $xeTree = this
-
-      const valueField = $xeTree.computeValueField
-      return Promise.resolve(
-        records.map(obj => {
-          const item = { ...obj }
-          let nodeid = $xeTree.getNodeId(item)
-          if (!nodeid) {
-            nodeid = getNodeUniqueId()
-            XEUtils.set(item, valueField, nodeid)
-          }
-          return item
-        })
-      )
-    },
-    cacheNodeMap  () {
-      const $xeTree = this
-      const props = $xeTree
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const { transform } = props
-      const { treeList } = reactData
-      const valueField = $xeTree.computeValueField
-      const childrenField = $xeTree.computeChildrenField
-      const mapChildrenField = $xeTree.computeMapChildrenField
-      const keyMaps: Record<string, VxeTreeDefines.NodeCacheItem> = {}
-      XEUtils.eachTree(treeList, (item, itemIndex, items, path, parent, nodes) => {
-        let nodeid = $xeTree.getNodeId(item)
-        if (!nodeid) {
-          nodeid = getNodeUniqueId()
-          XEUtils.set(item, valueField, nodeid)
-        }
-        keyMaps[nodeid] = {
-          item,
-          itemIndex,
-          items,
-          parent,
-          nodes,
-          level: nodes.length,
-          lineCount: 0,
-          treeLoaded: false
-        }
-      }, { children: transform ? mapChildrenField : childrenField })
-      internalData.nodeMaps = keyMaps
-    },
-    loadTreeData (list: any[]) {
-      const $xeTree = this
-      const props = $xeTree
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const { expandAll, transform } = props
-      const { initialized } = internalData
-      const keyField = $xeTree.computeKeyField
-      const parentField = $xeTree.computeParentField
-      const mapChildrenField = $xeTree.computeMapChildrenField
-      if (transform) {
-        reactData.treeList = XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: mapChildrenField })
-      } else {
-        reactData.treeList = list ? list.slice(0) : []
-      }
-      $xeTree.cacheNodeMap()
-      if (!initialized) {
-        if (list && list.length) {
-          internalData.initialized = true
-          if (expandAll) {
-            $xeTree.setAllExpandNode(true)
-          }
-          $xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true)
-        }
-      }
-    },
-    handleCountLine  (item: any, isRoot: boolean, nodeItem: VxeTreeDefines.NodeCacheItem) {
-      const $xeTree = this
-      const internalData = $xeTree.internalData
-
-      const { treeExpandedMaps } = internalData
-      const childrenField = $xeTree.computeChildrenField
-      const nodeid = $xeTree.getNodeId(item)
-      nodeItem.lineCount++
-      if (treeExpandedMaps[nodeid]) {
-        XEUtils.arrayEach(item[childrenField], (childItem, childIndex, childList) => {
-          if (!isRoot || childIndex < childList.length - 1) {
-            $xeTree.handleCountLine(childItem, false, nodeItem)
-          }
-        })
-      }
-    },
-    updateNodeLine  (node: any) {
-      const $xeTree = this
-      const internalData = $xeTree.internalData
-
-      const { nodeMaps } = internalData
-      if (node) {
-        const nodeid = $xeTree.getNodeId(node)
-        const nodeItem = nodeMaps[nodeid]
-        if (nodeItem) {
-          XEUtils.lastArrayEach(nodeItem.nodes, childItem => {
-            const nodeid = $xeTree.getNodeId(childItem)
-            const nodeItem = nodeMaps[nodeid]
-            if (nodeItem) {
-              nodeItem.lineCount = 0
-              $xeTree.handleCountLine(childItem, true, nodeItem)
-            }
-          })
-        }
-      }
-    },
-    handleNodeClickEvent  (evnt: MouseEvent, node: any) {
-      const $xeTree = this
-      const props = $xeTree
-      const reactData = $xeTree.reactData
-
-      const { showRadio, showCheckbox, trigger } = props
-      const radioOpts = $xeTree.computeRadioOpts
+      const { showRadio, showCheckbox, trigger } = props
+      const radioOpts = $xeTree.computeRadioOpts
       const checkboxOpts = $xeTree.computeCheckboxOpts
       const isRowCurrent = $xeTree.computeIsRowCurrent
       let triggerCurrent = false
@@ -904,12 +988,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       $xeTree.dispatchEvent('node-click', { node, triggerCurrent, triggerRadio, triggerCheckbox, triggerExpand }, evnt)
     },
-    handleNodeDblclickEvent  (evnt: MouseEvent, node: any) {
+    handleNodeDblclickEvent (evnt: MouseEvent, node: any) {
       const $xeTree = this
 
       $xeTree.dispatchEvent('node-dblclick', { node }, evnt)
     },
-    handleAsyncTreeExpandChilds  (node: any): Promise<void> {
+    handleAsyncTreeExpandChilds (node: any) {
       const $xeTree = this
       const props = $xeTree
       const reactData = $xeTree.reactData
@@ -918,7 +1002,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const checkboxOpts = $xeTree.computeCheckboxOpts
       const { loadMethod } = props
       const { checkStrictly } = checkboxOpts
-      return new Promise(resolve => {
+      return new Promise<void>(resolve => {
         if (loadMethod) {
           const { nodeMaps } = internalData
           const nodeid = $xeTree.getNodeId(node)
@@ -946,12 +1030,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
                   $xeTree.handleCheckedCheckboxNode(childRows, true)
                 }
-                $xeTree.updateNodeLine(node)
                 $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'))
                 return $xeTree.$nextTick()
               })
             } else {
-              $xeTree.updateNodeLine(node)
               $xeTree.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'))
             }
           }).catch((e) => {
@@ -960,10 +1042,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
             if (treeExpandLazyLoadedMaps[nodeid]) {
               treeExpandLazyLoadedMaps[nodeid] = false
             }
-            $xeTree.updateNodeLine(node)
             $xeTree.dispatchEvent('load-error', { node, data: e }, new Event('load-error'))
           }).finally(() => {
-            return $xeTree.$nextTick()
+            $xeTree.handleTreeToList()
+            $xeTree.handleData()
+            return $xeTree.recalculate()
           })
         } else {
           resolve()
@@ -1031,8 +1114,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         })
       }
       reactData.updateExpandedFlag++
-      expandNodes.forEach($xeTree.updateNodeLine)
-      return Promise.all(result)
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return Promise.all(result).then(() => $xeTree.recalculate())
     },
     toggleExpandEvent (evnt: MouseEvent, node: any) {
       const $xeTree = this
@@ -1048,15 +1132,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeTree.handleBaseTreeExpand([node], expanded)
       }
     },
-    updateCheckboxStatus  () {
+    updateCheckboxStatus () {
       const $xeTree = this
       const props = $xeTree
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
       const { transform } = props
-      const { treeList } = reactData
-      const { selectCheckboxMaps, indeterminateRowMaps } = internalData
+      const { selectCheckboxMaps, indeterminateRowMaps, afterTreeList } = internalData
       const childrenField = $xeTree.computeChildrenField
       const mapChildrenField = $xeTree.computeMapChildrenField
       const checkboxOpts = $xeTree.computeCheckboxOpts
@@ -1064,7 +1147,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (!checkStrictly) {
         const childRowMaps: Record<string, number> = {}
         const childRowList: any[][] = []
-        XEUtils.eachTree(treeList, (node) => {
+        XEUtils.eachTree(afterTreeList, (node) => {
           const nodeid = $xeTree.getNodeId(node)
           const childList = node[childrenField]
           if (childList && childList.length && !childRowMaps[nodeid]) {
@@ -1079,13 +1162,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const childList: any[] = vals[2]
           let sLen = 0 // 已选
           let hLen = 0 // 半选
-          let vLen = 0 // 有效行
+          let vLen = 0 // 有效子行
+          const cLen = childList.length // 子行
           childList.forEach(
             checkMethod
               ? (item) => {
                   const childNodeid = $xeTree.getNodeId(item)
                   const isSelect = selectCheckboxMaps[childNodeid]
-                  if (checkMethod({ node: item })) {
+                  if (checkMethod({ $tree: $xeTree, node: item })) {
                     if (isSelect) {
                       sLen++
                     } else if (indeterminateRowMaps[childNodeid]) {
@@ -1111,8 +1195,27 @@ export default /* define-vxe-component start */ 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]) {
@@ -1131,108 +1234,489 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }
           }
         })
-        reactData.updateCheckboxFlag++
+        reactData.updateCheckboxFlag++
+      }
+    },
+    changeCheckboxEvent (evnt: MouseEvent, node: any) {
+      const $xeTree = this
+      const props = $xeTree
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      evnt.preventDefault()
+      evnt.stopPropagation()
+      const { transform } = props
+      const { selectCheckboxMaps } = internalData
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      const checkboxOpts = $xeTree.computeCheckboxOpts
+      const { checkStrictly, checkMethod } = checkboxOpts
+      let isDisabled = !!checkMethod
+      if (checkMethod) {
+        isDisabled = !checkMethod({ $tree: $xeTree, node })
+      }
+      if (isDisabled) {
+        return
+      }
+      const nodeid = $xeTree.getNodeId(node)
+      let isChecked = false
+      if (selectCheckboxMaps[nodeid]) {
+        delete selectCheckboxMaps[nodeid]
+      } else {
+        isChecked = true
+        selectCheckboxMaps[nodeid] = node
+      }
+      if (!checkStrictly) {
+        XEUtils.eachTree(XEUtils.get(node, transform ? mapChildrenField : childrenField), (childNode) => {
+          const childNodeid = $xeTree.getNodeId(childNode)
+          if (isChecked) {
+            if (!selectCheckboxMaps[childNodeid]) {
+              selectCheckboxMaps[childNodeid] = true
+            }
+          } else {
+            if (selectCheckboxMaps[childNodeid]) {
+              delete selectCheckboxMaps[childNodeid]
+            }
+          }
+        }, { children: transform ? mapChildrenField : childrenField })
+      }
+      reactData.updateCheckboxFlag++
+      $xeTree.updateCheckboxStatus()
+      const value = XEUtils.keys(selectCheckboxMaps)
+      $xeTree.emitCheckboxMode(value)
+      $xeTree.dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt)
+    },
+    changeCurrentEvent (evnt: MouseEvent, node: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      evnt.preventDefault()
+      const nodeOpts = $xeTree.computeNodeOpts
+      const { currentMethod, trigger } = nodeOpts
+      const childrenField = $xeTree.computeChildrenField
+      const childList: any[] = 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: MouseEvent, node: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      evnt.preventDefault()
+      evnt.stopPropagation()
+      const radioOpts = $xeTree.computeRadioOpts
+      const { checkMethod } = radioOpts
+      let isDisabled = !!checkMethod
+      if (checkMethod) {
+        isDisabled = !checkMethod({ $tree: $xeTree, node })
+      }
+      if (isDisabled) {
+        return
+      }
+      const isChecked = true
+      const value = $xeTree.getNodeId(node)
+      reactData.selectRadioKey = value
+      $xeTree.emitRadioMode(value)
+      $xeTree.dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt)
+    },
+    handleGlobalResizeEvent () {
+      const $xeTree = this
+
+      const el = $xeTree.$refs.refElem as HTMLDivElement
+      if (!el || !el.clientWidth) {
+        return
+      }
+      $xeTree.recalculate()
+    },
+    reloadData (data: any[]) {
+      const $xeTree = this
+
+      return $xeTree.loadData(data || [])
+    },
+    clearCurrentNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      reactData.currentNode = null
+      return $xeTree.$nextTick()
+    },
+    getCurrentNodeId () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      const { currentNode } = reactData
+      if (currentNode) {
+        return $xeTree.getNodeId(currentNode)
+      }
+      return null
+    },
+    getCurrentNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { currentNode } = reactData
+      const { nodeMaps } = internalData
+      if (currentNode) {
+        const nodeItem = nodeMaps[$xeTree.getNodeId(currentNode)]
+        if (nodeItem) {
+          return nodeItem.item
+        }
+      }
+      return null
+    },
+    setCurrentNodeId (nodeKey: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { nodeMaps } = internalData
+      const nodeItem = nodeMaps[nodeKey]
+      reactData.currentNode = nodeItem ? nodeItem.item : null
+      return $xeTree.$nextTick()
+    },
+    setCurrentNode (node: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      reactData.currentNode = node
+      return $xeTree.$nextTick()
+    },
+    clearRadioNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      reactData.selectRadioKey = null
+      return $xeTree.$nextTick()
+    },
+    getRadioNodeId () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      return reactData.selectRadioKey || null
+    },
+    getRadioNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { selectRadioKey } = reactData
+      const { nodeMaps } = internalData
+      if (selectRadioKey) {
+        const nodeItem = nodeMaps[selectRadioKey]
+        if (nodeItem) {
+          return nodeItem.item
+        }
+      }
+      return null
+    },
+    setRadioNodeId (nodeKey: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+
+      reactData.selectRadioKey = nodeKey
+      return $xeTree.$nextTick()
+    },
+    getCheckboxNodeIds () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { selectCheckboxMaps } = internalData
+      return Object.keys(selectCheckboxMaps)
+    },
+    getCheckboxNodes () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { nodeMaps, selectCheckboxMaps } = internalData
+      const list: any[] = []
+      XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
+        const nodeItem = nodeMaps[nodeid]
+        if (nodeItem) {
+          list.push(nodeItem.item)
+        }
+      })
+      return list
+    },
+    clearCheckboxNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      internalData.selectCheckboxMaps = {}
+      reactData.updateCheckboxFlag++
+      return $xeTree.$nextTick().then(() => {
+        return { checkNodeKeys: [] }
+      })
+    },
+    setAllCheckboxNode (checked: boolean) {
+      const $xeTree = this
+      const props = $xeTree
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { transform } = props
+      const selectMaps: Record<string, boolean> = {}
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      const checkKeys: string[] = []
+      if (checked) {
+        XEUtils.eachTree(internalData.afterTreeList, (node) => {
+          const nodeid = $xeTree.getNodeId(node)
+          checkKeys.push(nodeid)
+          selectMaps[nodeid] = true
+        }, { children: transform ? mapChildrenField : childrenField })
+      }
+      internalData.selectCheckboxMaps = selectMaps
+      reactData.updateCheckboxFlag++
+      return $xeTree.$nextTick().then(() => {
+        return { checkNodeKeys: checkKeys }
+      })
+    },
+    clearExpandNode () {
+      const $xeTree = this
+
+      return $xeTree.clearAllExpandNode()
+    },
+    clearAllExpandNode () {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { nodeMaps } = internalData
+      XEUtils.each(nodeMaps, (nodeItem: VxeTreeDefines.NodeCacheItem) => {
+        nodeItem.treeLoaded = false
+      })
+      internalData.treeExpandedMaps = {}
+      reactData.updateExpandedFlag++
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
+    },
+    setExpandByNodeId (nodeids: any, expanded: boolean) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { treeExpandedMaps } = internalData
+      if (nodeids) {
+        if (!XEUtils.isArray(nodeids)) {
+          nodeids = [nodeids]
+        }
+        nodeids.forEach((nodeid: string) => {
+          handleSetExpand(nodeid, expanded, treeExpandedMaps)
+        })
+        reactData.updateExpandedFlag++
+      }
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
+    },
+    getExpandNodeIds () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { treeExpandedMaps } = internalData
+      return XEUtils.keys(treeExpandedMaps)
+    },
+    getExpandNodes () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { nodeMaps, treeExpandedMaps } = internalData
+      const list: any[] = []
+      XEUtils.each(treeExpandedMaps, (item, nodeid) => {
+        const nodeItem = nodeMaps[nodeid]
+        if (nodeItem) {
+          list.push(nodeItem.item)
+        }
+      })
+      return list
+    },
+    setExpandNode (nodes: any, expanded: boolean) {
+      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: any) => {
+          const nodeid = $xeTree.getNodeId(node)
+          handleSetExpand(nodeid, expanded, treeExpandedMaps)
+        })
+        reactData.updateExpandedFlag++
+      }
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
+    },
+    toggleExpandByNodeId (nodeids: any) {
+      const $xeTree = this
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { treeExpandedMaps } = internalData
+      if (nodeids) {
+        if (!XEUtils.isArray(nodeids)) {
+          nodeids = [nodeids]
+        }
+        nodeids.forEach((nodeid: string) => {
+          handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps)
+        })
+        reactData.updateExpandedFlag++
+      }
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
+    },
+    toggleExpandNode (nodes: any) {
+      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: any) => {
+          const nodeid = $xeTree.getNodeId(node)
+          handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps)
+        })
+        reactData.updateExpandedFlag++
       }
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
     },
-    changeCheckboxEvent  (evnt: MouseEvent, node: any) {
+    setAllExpandNode (expanded: boolean) {
       const $xeTree = this
       const props = $xeTree
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      evnt.preventDefault()
-      evnt.stopPropagation()
       const { transform } = props
-      const { selectCheckboxMaps } = internalData
+      const { treeExpandedMaps } = internalData
       const childrenField = $xeTree.computeChildrenField
       const mapChildrenField = $xeTree.computeMapChildrenField
-      const checkboxOpts = $xeTree.computeCheckboxOpts
-      const { checkStrictly, checkMethod } = checkboxOpts
-      let isDisabled = !!checkMethod
-      if (checkMethod) {
-        isDisabled = !checkMethod({ node })
-      }
-      if (isDisabled) {
-        return
-      }
-      const nodeid = $xeTree.getNodeId(node)
-      let isChecked = false
-      if (selectCheckboxMaps[nodeid]) {
-        delete selectCheckboxMaps[nodeid]
-      } else {
-        isChecked = true
-        selectCheckboxMaps[nodeid] = node
-      }
-      if (!checkStrictly) {
-        XEUtils.eachTree(XEUtils.get(node, childrenField), (childNode) => {
-          const childNodeid = $xeTree.getNodeId(childNode)
-          if (isChecked) {
-            if (!selectCheckboxMaps[childNodeid]) {
-              selectCheckboxMaps[childNodeid] = true
-            }
-          } else {
-            if (selectCheckboxMaps[childNodeid]) {
-              delete selectCheckboxMaps[childNodeid]
-            }
+      if (expanded) {
+        XEUtils.eachTree(internalData.afterTreeList, (node) => {
+          const childList: any[] = 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.updateCheckboxFlag++
-      $xeTree.updateCheckboxStatus()
-      const value = XEUtils.keys(selectCheckboxMaps)
-      $xeTree.emitCheckboxMode(value)
-      $xeTree.dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt)
+      reactData.updateExpandedFlag++
+      $xeTree.handleTreeToList()
+      $xeTree.handleData()
+      return $xeTree.recalculate()
     },
-    changeCurrentEvent (evnt: MouseEvent, node: any) {
+    reloadExpandNode (node: any) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
+      const props = $xeTree
 
-      evnt.preventDefault()
-      const nodeOpts = $xeTree.computeNodeOpts
-      const { currentMethod, trigger } = nodeOpts
-      const childrenField = $xeTree.computeChildrenField
-      const childList: any[] = 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 { lazy } = props
+      if (lazy) {
+        $xeTree.clearExpandLoaded(node)
+        return $xeTree.handleAsyncTreeExpandChilds(node)
       }
-      const isChecked = true
-      reactData.currentNode = node
-      $xeTree.dispatchEvent('current-change', { node, checked: isChecked }, evnt)
+      return $xeTree.recalculate()
     },
-    changeRadioEvent  (evnt: MouseEvent, node: any) {
+    clearExpandLoaded (node: any) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
+      const props = $xeTree
+      const internalData = $xeTree.internalData
 
-      evnt.preventDefault()
-      evnt.stopPropagation()
-      const radioOpts = $xeTree.computeRadioOpts
-      const { checkMethod } = radioOpts
-      let isDisabled = !!checkMethod
-      if (checkMethod) {
-        isDisabled = !checkMethod({ node })
+      const { lazy } = props
+      const { nodeMaps } = internalData
+      if (lazy) {
+        const nodeItem = nodeMaps[$xeTree.getNodeId(node)]
+        if (nodeItem) {
+          nodeItem.treeLoaded = false
+        }
       }
-      if (isDisabled) {
-        return
+      return $xeTree.recalculate()
+    },
+    /**
+     * 用于树结构，给行数据加载子节点
+     */
+    loadChildrenNode (node: any, childRecords: any[]) {
+      const $xeTree = this
+      const props = $xeTree
+      const internalData = $xeTree.internalData
+
+      const { lazy, transform } = props
+      const { nodeMaps } = internalData
+      if (!lazy) {
+        return Promise.resolve([])
       }
-      const isChecked = true
-      const value = $xeTree.getNodeId(node)
-      reactData.selectRadioKey = value
-      $xeTree.emitRadioMode(value)
-      $xeTree.dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt)
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      const parentNodeItem = nodeMaps[$xeTree.getNodeId(node)]
+      const parentLevel = parentNodeItem ? parentNodeItem.level : 0
+      const parentNodes = parentNodeItem ? parentNodeItem.nodes : []
+      return $xeTree.createNode(childRecords).then((nodeList) => {
+        XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+          const itemNodeId = $xeTree.getNodeId(childRow)
+          nodeMaps[itemNodeId] = {
+            item: node,
+            index: -1,
+            items,
+            parent: parent || parentNodeItem.item,
+            nodes: parentNodes.concat(nodes),
+            level: parentLevel + nodes.length,
+            treeIndex: -1,
+            lineCount: 0,
+            treeLoaded: false
+          }
+        }, { children: childrenField })
+        node[childrenField] = nodeList
+        if (transform) {
+          node[mapChildrenField] = nodeList
+        }
+        $xeTree.updateAfterDataIndex()
+        return nodeList
+      })
+    },
+    getCheckboxIndeterminateNodes () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { nodeMaps, indeterminateRowMaps } = internalData
+      const list: any[] = []
+      XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
+        const nodeItem = nodeMaps[nodeid]
+        if (nodeItem) {
+          list.push(nodeItem.item)
+        }
+      })
+      return list
     },
 
     //
@@ -1245,11 +1729,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { showRadio } = props
       const radioOpts = $xeTree.computeRadioOpts
       const { showIcon, checkMethod, visibleMethod } = radioOpts
-      const isVisible = !visibleMethod || visibleMethod({ node })
+      const isVisible = !visibleMethod || visibleMethod({ $tree: $xeTree, node })
       let isDisabled = !!checkMethod
       if (showRadio && showIcon && isVisible) {
         if (checkMethod) {
-          isDisabled = !checkMethod({ node })
+          isDisabled = !checkMethod({ $tree: $xeTree, node })
         }
         return h('div', {
           class: ['vxe-tree--radio-option', {
@@ -1279,11 +1763,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const checkboxOpts = $xeTree.computeCheckboxOpts
       const { showIcon, checkMethod, visibleMethod } = checkboxOpts
       const isIndeterminate = $xeTree.isIndeterminateByCheckboxNodeid(nodeid)
-      const isVisible = !visibleMethod || visibleMethod({ node })
+      const isVisible = !visibleMethod || visibleMethod({ $tree: $xeTree, node })
       let isDisabled = !!checkMethod
       if (showCheckbox && showIcon && isVisible) {
         if (checkMethod) {
-          isDisabled = !checkMethod({ node })
+          isDisabled = !checkMethod({ $tree: $xeTree, node })
         }
         return h('div', {
           class: ['vxe-tree--checkbox-option', {
@@ -1306,7 +1790,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return renderEmptyElement($xeTree)
     },
-    renderNode (h: CreateElement, node: any): VNode {
+    renderNode (h: CreateElement, node: any, nodeid: string) {
       const $xeTree = this
       const props = $xeTree
       const slots = $xeTree.$scopedSlots
@@ -1315,7 +1799,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { lazy, showRadio, showCheckbox, showLine, indent, iconOpen, iconClose, iconLoaded, showIcon } = props
       const { currentNode, selectRadioKey, updateExpandedFlag } = reactData
-      const { nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData
+      const { afterTreeList, nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData
       const childrenField = $xeTree.computeChildrenField
       const titleField = $xeTree.computeTitleField
       const hasChildField = $xeTree.computeHasChildField
@@ -1324,15 +1808,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const iconSlot = slots.icon
       const titleSlot = slots.title
       const extraSlot = slots.extra
-      const nodeid = $xeTree.getNodeId(node)
       const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid]
       const nodeItem = nodeMaps[nodeid]
       const nodeValue = XEUtils.get(node, titleField)
 
       let isRadioChecked = false
       if (showRadio) {
-        // eslint-disable-next-line eqeqeq
-        isRadioChecked = nodeid == selectRadioKey
+        isRadioChecked = nodeid === String(selectRadioKey)
       }
 
       let isCheckboxChecked = false
@@ -1348,27 +1830,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
         hasLazyChilds = node[hasChildField]
         isLazyLoaded = !!nodeItem.treeLoaded
       }
-
-      const childVns: VNode[] = []
-      if (hasChild && treeExpandedMaps[nodeid]) {
-        if (showLine) {
-          childVns.push(
-            h('div', {
-              key: 'line',
-              class: 'vxe-tree--node-child-line',
-              style: {
-                height: `calc(${nodeItem.lineCount} * var(--vxe-ui-tree-node-height) - var(--vxe-ui-tree-node-height) / 2)`,
-                left: `${(nodeItem.level + 1) * (indent || 1)}px`
-              }
-            })
-          )
-        }
-        childList.forEach(childItem => {
-          childVns.push($xeTree.renderNode(h, childItem))
-        })
-      }
+      const prevNode = nodeItem.items[nodeItem.treeIndex - 1]
+      const nParams = { node, isExpand }
 
       return h('div', {
+        key: nodeid,
         class: ['vxe-tree--node-wrapper', `node--level-${nodeItem.level}`],
         attrs: {
           nodeid
@@ -1392,28 +1858,38 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }
           }
         }, [
-          showIcon || showLine
+          showLine
             ? h('div', {
-              class: 'vxe-tree--node-item-switcher'
-            }, showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
-              ? [
-                  h('div', {
-                    class: 'vxe-tree--node-item-icon',
-                    on: {
-                      click (evnt: MouseEvent) {
-                        $xeTree.toggleExpandEvent(evnt, node)
-                      }
-                    }
-                  }, iconSlot
-                    ? iconSlot({ node, isExpand })
-                    : [
-                        h('i', {
-                          class: isLazyLoading ? (iconLoaded || getIcon().TREE_NODE_LOADED) : (isExpand ? (iconOpen || getIcon().TREE_NODE_OPEN) : (iconClose || getIcon().TREE_NODE_CLOSE))
-                        })
-                      ])
-                ]
-              : [])
+              class: 'vxe-tree--node-line-wrapper'
+            }, [
+              h('div', {
+                class: 'vxe-tree--node-line',
+                style: {
+                  height: `${$xeTree.getNodeId(afterTreeList[0]) === nodeid ? 1 : calcTreeLine($xeTree, node, prevNode)}px`
+                }
+              })
+            ])
             : renderEmptyElement($xeTree),
+          h('div', {
+            class: 'vxe-tree--node-item-switcher'
+          }, showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
+            ? [
+                h('div', {
+                  class: 'vxe-tree--node-item-icon',
+                  on: {
+                    click (evnt: MouseEvent) {
+                      $xeTree.toggleExpandEvent(evnt, node)
+                    }
+                  }
+                }, iconSlot
+                  ? getSlotVNs(iconSlot(nParams))
+                  : [
+                      h('i', {
+                        class: isLazyLoading ? (iconLoaded || getIcon().TREE_NODE_LOADED) : (isExpand ? (iconOpen || getIcon().TREE_NODE_OPEN) : (iconClose || getIcon().TREE_NODE_CLOSE))
+                      })
+                    ])
+              ]
+            : []),
           $xeTree.renderRadio(h, node, nodeid, isRadioChecked),
           $xeTree.renderCheckbox(h, node, nodeid, isCheckboxChecked),
           h('div', {
@@ -1421,43 +1897,66 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }, [
             h('div', {
               class: 'vxe-tree--node-item-title'
-            }, titleSlot ? getSlotVNs(titleSlot({ node, isExpand })) : `${nodeValue}`),
+            }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeValue}`),
             extraSlot
               ? h('div', {
                 class: 'vxe-tree--node-item-extra'
-              }, getSlotVNs(extraSlot({ node, isExpand })))
+              }, getSlotVNs(extraSlot(nParams)))
               : renderEmptyElement($xeTree)
           ])
-        ]),
-        hasChild && treeExpandedMaps[nodeid]
-          ? h('div', {
-            class: 'vxe-tree--node-child-wrapper'
-          }, childVns)
-          : renderEmptyElement($xeTree)
+        ])
       ])
     },
-    renderNodeList (h: CreateElement) {
+    renderList (h: CreateElement, treeList: any[]) {
       const $xeTree = this
-      const reactData = $xeTree.reactData
+      const props = $xeTree
+      const internalData = $xeTree.internalData
 
-      const { treeList } = reactData
-      return h('div', {
-        class: 'vxe-tree--node-list-wrapper'
-      }, treeList.map(node => $xeTree.renderNode(h, node)))
+      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: VNode[] = []
+      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: any[] = XEUtils.get(node, childrenField)
+            const hasChild = childList && childList.length
+            if (hasChild && treeExpandedMaps[nodeid]) {
+              nodeVNs.push(...$xeTree.renderList(h, childList))
+            }
+          })
+      return nodeVNs
     },
     renderVN (h: CreateElement): VNode {
       const $xeTree = this
       const props = $xeTree
       const slots = $xeTree.$scopedSlots
+      const reactData = $xeTree.reactData
 
       const { loading, trigger, showLine } = props
+      const { bodyHeight, topSpaceHeight, treeList } = reactData
       const vSize = $xeTree.computeSize
       const radioOpts = $xeTree.computeRadioOpts
       const checkboxOpts = $xeTree.computeCheckboxOpts
-      const treeStyle = $xeTree.computeTreeStyle
       const loadingOpts = $xeTree.computeLoadingOpts
       const isRowHover = $xeTree.computeIsRowHover
+      const treeStyle = $xeTree.computeTreeStyle
       const loadingSlot = slots.loading
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+
       return h('div', {
         ref: 'refElem',
         class: ['vxe-tree', {
@@ -1468,10 +1967,42 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'node--hover': isRowHover,
           'node--trigger': trigger === 'node',
           'is--loading': loading
-        }],
-        style: treeStyle
+        }]
       }, [
-        $xeTree.renderNodeList(h),
+        headerSlot
+          ? h('div', {
+            ref: 'refHeaderWrapperElem',
+            class: 'vxe-tree--header-wrapper'
+          }, headerSlot({ $tree: $xeTree }))
+          : renderEmptyElement($xeTree),
+        h('div', {
+          ref: 'refVirtualWrapper',
+          class: 'vxe-tree--node-list-wrapper',
+          style: treeStyle,
+          on: {
+            scroll: $xeTree.scrollEvent
+          }
+        }, [
+          h('div', {
+            class: 'vxe-select--y-space',
+            style: {
+              height: bodyHeight ? `${bodyHeight}px` : ''
+            }
+          }),
+          h('div', {
+            ref: 'refVirtualBody',
+            class: 'vxe-tree--node-list-body',
+            style: {
+              transform: `translateY(${topSpaceHeight}px)`
+            }
+          }, $xeTree.renderList(h, treeList))
+        ]),
+        footerSlot
+          ? h('div', {
+            ref: 'refFooterWrapperElem',
+            class: 'vxe-tree--footer-wrapper'
+          }, footerSlot({ $tree: $xeTree }))
+          : renderEmptyElement($xeTree),
         /**
          * 加载中
          */
@@ -1495,7 +2026,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     data (val) {
       const $xeTree = this
 
-      $xeTree.loadTreeData(val || [])
+      $xeTree.loadData(val || [])
     },
     checkNodeKey (val) {
       const $xeTree = this
@@ -1508,6 +2039,26 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTree
 
       $xeTree.updateCheckboxChecked(props.checkNodeKeys || [])
+    },
+    filterValue () {
+      const $xeTree = this
+
+      $xeTree.triggerSearchEvent(new Event('filter'))
+    },
+    height () {
+      const $xeTree = this
+
+      $xeTree.recalculate()
+    },
+    minHeight () {
+      const $xeTree = this
+
+      $xeTree.recalculate()
+    },
+    maxHeight () {
+      const $xeTree = this
+
+      $xeTree.recalculate()
     }
   },
   created () {
@@ -1517,17 +2068,46 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
     reactData.selectRadioKey = props.checkNodeKey || null
 
-    $xeTree.loadTreeData(props.data || [])
+    $xeTree.loadData(props.data || [])
+  },
+  mounted () {
+    const $xeTree = this
+    const props = $xeTree
+    const internalData = $xeTree.internalData
+
+    if (props.autoResize) {
+      const el = $xeTree.$refs.refElem as HTMLDivElement
+      const parentEl = $xeTree.getParentElem()
+      const resizeObserver = globalResize.create(() => {
+        if (props.autoResize) {
+          $xeTree.recalculate()
+        }
+      })
+      if (el) {
+        resizeObserver.observe(el)
+      }
+      if (parentEl) {
+        resizeObserver.observe(parentEl)
+      }
+      internalData.resizeObserver = resizeObserver
+    }
+
+    globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent)
   },
   beforeDestroy () {
     const $xeTree = this
-    const reactData = $xeTree.reactData
     const internalData = $xeTree.internalData
 
-    reactData.treeList = []
+    const { resizeObserver } = internalData
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+    }
+
     internalData.treeExpandedMaps = {}
     internalData.indeterminateRowMaps = {}
     internalData.nodeMaps = {}
+
+    globalEvents.off($xeTree, 'resize')
   },
   render (this: any, h) {
     return this.renderVN(h)