vxe-pc-ui 4.14.39 → 4.15.0

package/lib/cascader/src/cascader.js

@@ -9,20 +9,55 @@ var _comp = require("../../ui/src/comp");
 var _ui = require("../../ui");
 var _dom = require("../../ui/src/dom");
 var _utils = require("../../ui/src/utils");
-var _util = require("../../tree/src/util");
+var _util = require("./util");
 var _log = require("../../ui/src/log");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _list = _interopRequireDefault(require("../../list/src/list"));
 var _input = _interopRequireDefault(require("../../input/src/input"));
 var _button = _interopRequireDefault(require("../../button/src/button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function getOptUniqueId() {
+/**
+ * 生成节点的唯一主键
+ */
+function getNodeUniqueId() {
   return _xeUtils.default.uniqueId('node_');
 }
+function createReactData() {
+  return {
+    initialized: false,
+    searchValue: '',
+    searchLoading: false,
+    currentCunkList: [],
+    currentItems: [],
+    currentNode: null,
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    triggerFocusPanel: false,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+    fullOptFlag: 1,
+    lazyOptFlag: 1
+  };
+}
 function createInternalData() {
   return {
     // hpTimeout: undefined,
-    fullOptionList: [],
-    fullNodeMaps: {}
+    afterTreeList: [],
+    treeFullData: [],
+    afterVisibleList: [],
+    nodeMaps: {},
+    fullNodeMaps: {},
+    lazyNodeMaps: {},
+    indeterminateRowMaps: {},
+    selectCheckboxMaps: {},
+    treeExpandedMaps: {},
+    treeExpandLazyLoadedMaps: {}
   };
 }
 var _default = exports.default = (0, _comp.defineVxeComponent)({
@@ -45,25 +80,41 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     filterable: Boolean,
     filterConfig: Object,
+    showFullLabel: {
+      type: Boolean,
+      default: (0, _ui.getConfig)().cascader.showFullLabel
+    },
+    separator: {
+      type: String,
+      default: (0, _ui.getConfig)().cascader.separator
+    },
     multiple: Boolean,
     className: [String, Function],
     prefixIcon: String,
-    placement: String,
-    transform: Boolean,
     lazyOptions: Array,
     options: Array,
     optionProps: Object,
-    zIndex: Number,
     size: {
       type: String,
       default: () => (0, _ui.getConfig)().cascader.size || (0, _ui.getConfig)().size
     },
+    treeConfig: Object,
+    radioConfig: Object,
+    checkboxConfig: Object,
     remote: Boolean,
     remoteConfig: Function,
     popupConfig: Object,
-    autoClose: {
+    checkedClosable: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().cascader.checkedClosable
+    },
+    clearClosable: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().cascader.clearClosable
+    },
+    showCloseButton: {
       type: Boolean,
-      default: () => (0, _ui.getConfig)().cascader.autoClose
+      default: () => (0, _ui.getConfig)().cascader.showCloseButton
     },
     showTotalButton: {
       type: Boolean,
@@ -76,18 +127,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     showClearButton: {
       type: Boolean,
       default: () => (0, _ui.getConfig)().cascader.showClearButton
-    },
-    transfer: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * 已废弃，被 remote-config.queryMethod 替换
-     * @deprecated
-     */
-    remoteMethod: Function
+    }
   },
-  emits: ['update:modelValue', 'change', 'all-change', 'clear', 'blur', 'focus', 'click', 'node-click'],
+  emits: ['update:modelValue', 'change', 'all-change', 'clear', 'blur', 'focus', 'click', 'node-click', 'node-expand', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'visible-change'],
   setup(props, context) {
     const {
       emit,
@@ -105,21 +147,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const refInput = (0, _vue.ref)();
     const refInpSearch = (0, _vue.ref)();
-    const refTreeWrapper = (0, _vue.ref)();
+    const refChunkWrapper = (0, _vue.ref)();
     const refOptionPanel = (0, _vue.ref)();
-    const refTree = (0, _vue.ref)();
-    const reactData = (0, _vue.reactive)({
-      initialized: false,
-      searchValue: '',
-      searchLoading: false,
-      panelIndex: 0,
-      panelStyle: {},
-      panelPlacement: null,
-      triggerFocusPanel: false,
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false
-    });
+    const reactData = (0, _vue.reactive)(createReactData());
     const internalData = createInternalData();
     const refMaps = {
       refElem
@@ -149,19 +179,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return disabled;
     });
     const computeBtnTransfer = (0, _vue.computed)(() => {
+      const popupOpts = computePopupOpts.value;
       const {
         transfer
-      } = props;
-      if (transfer === null) {
-        const globalTransfer = (0, _ui.getConfig)().select.transfer;
-        if (_xeUtils.default.isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true;
-        }
+      } = popupOpts;
+      if (_xeUtils.default.isBoolean(transfer)) {
+        return transfer;
+      }
+      if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        return true;
       }
-      return transfer;
+      return false;
+    });
+    const computeTreeOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().cascader.treeConfig, props.treeConfig);
+    });
+    const computeRadioOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().cascader.radioConfig, props.radioConfig);
+    });
+    const computeCheckboxOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().cascader.checkboxConfig, props.checkboxConfig);
     });
     const computePopupOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().cascader.popupConfig, props.popupConfig);
@@ -169,10 +206,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computePropsOpts = (0, _vue.computed)(() => {
       return props.optionProps || {};
     });
-    const computeNodeKeyField = (0, _vue.computed)(() => {
-      const valueField = computeValueField.value;
-      return valueField;
-    });
     const computeLabelField = (0, _vue.computed)(() => {
       const propsOpts = computePropsOpts.value;
       return propsOpts.label || 'label';
@@ -181,54 +214,91 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const propsOpts = computePropsOpts.value;
       return propsOpts.value || 'value';
     });
+    const computeKeyField = (0, _vue.computed)(() => {
+      const treeOpts = computeTreeOpts.value;
+      return treeOpts.keyField || 'id';
+    });
+    const computeParentField = (0, _vue.computed)(() => {
+      const treeOpts = computeTreeOpts.value;
+      return treeOpts.parentField || 'parentId';
+    });
     const computeChildrenField = (0, _vue.computed)(() => {
-      const propsOpts = computePropsOpts.value;
-      return propsOpts.children || 'children';
+      const treeOpts = computeTreeOpts.value;
+      return treeOpts.childrenField || 'children';
+    });
+    const computeMapChildrenField = (0, _vue.computed)(() => {
+      const treeOpts = computeTreeOpts.value;
+      return treeOpts.mapChildrenField || 'mapChildren';
+    });
+    const computeHasChildField = (0, _vue.computed)(() => {
+      const treeOpts = computeTreeOpts.value;
+      return treeOpts.hasChildField || 'hasChild';
     });
     const computeRemoteOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().cascader.remoteConfig, props.remoteConfig);
     });
+    const computeSelectVals = (0, _vue.computed)(() => {
+      const {
+        modelValue
+      } = props;
+      return _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
+    });
     const computeSelectLabel = (0, _vue.computed)(() => {
       const {
-        modelValue,
-        lazyOptions
+        showFullLabel
       } = props;
       const {
-        fullNodeMaps
+        fullOptFlag,
+        lazyOptFlag
+      } = reactData;
+      const {
+        fullNodeMaps,
+        lazyNodeMaps
       } = internalData;
-      const valueField = computeValueField.value;
       const labelField = computeLabelField.value;
-      const selectVals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
+      const selectVals = computeSelectVals.value;
       return selectVals.map(val => {
         const cacheItem = fullNodeMaps[val];
-        if (cacheItem) {
-          return cacheItem.item[labelField];
+        if (fullOptFlag && cacheItem) {
+          return showFullLabel ? cacheItem.fullLabel : cacheItem.item[labelField];
         }
-        if (lazyOptions) {
-          const lazyItem = lazyOptions.find(item => item[valueField] === val);
-          if (lazyItem) {
-            return lazyItem[labelField];
+        if (lazyOptFlag) {
+          const lazyCacheItem = lazyNodeMaps[val];
+          if (lazyCacheItem) {
+            return showFullLabel ? lazyCacheItem.fullLabel : lazyCacheItem.item[labelField];
           }
         }
         return val;
       }).join(', ');
     });
     const computePopupWrapperStyle = (0, _vue.computed)(() => {
+      const {
+        currentCunkList,
+        panelStyle
+      } = reactData;
       const popupOpts = computePopupOpts.value;
       const {
         height,
-        width
+        nodeWidth,
+        nodeHeight
       } = popupOpts;
-      const stys = {};
-      if (width) {
-        stys.width = (0, _dom.toCssUnit)(width);
-      }
+      const stys = Object.assign(Object.assign({}, panelStyle), {
+        '--vxe-ui-cascader-chunk-size': currentCunkList.length
+      });
       if (height) {
-        stys.height = (0, _dom.toCssUnit)(height);
-        stys.maxHeight = (0, _dom.toCssUnit)(height);
+        stys['--vxe-ui-cascader-chunk-height'] = (0, _dom.toCssUnit)(height);
+      }
+      if (nodeWidth) {
+        stys['--vxe-ui-cascader-node-width'] = (0, _dom.toCssUnit)(nodeWidth);
+      }
+      if (nodeHeight) {
+        stys['--vxe-ui-cascader-node-height'] = (0, _dom.toCssUnit)(nodeHeight);
       }
       return stys;
     });
+    const computeFilterOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().cascader.filterConfig, props.filterConfig);
+    });
     const computeMaps = {};
     const $xeCascader = {
       xID,
@@ -250,60 +320,386 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const cascaderMethods = {
       dispatchEvent
     };
-    const getNodeid = option => {
-      const nodeKeyField = computeNodeKeyField.value;
-      const nodeid = option[nodeKeyField];
-      return nodeid ? encodeURIComponent(nodeid) : '';
+    const getNodeId = node => {
+      if (!node) {
+        return '';
+      }
+      const valueField = computeValueField.value;
+      const nodeKey = node[valueField];
+      return (0, _util.enNodeValue)(nodeKey);
     };
-    const cacheDataMap = () => {
+    const isCheckedByCheckboxNodeId = nodeid => {
       const {
-        transform,
-        options
-      } = props;
-      const nodeKeyField = computeNodeKeyField.value;
+        updateCheckboxFlag
+      } = reactData;
+      const {
+        selectCheckboxMaps
+      } = internalData;
+      return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+    };
+    const handleCheckedCheckboxNode = (nodeList, checked) => {
+      const {
+        selectCheckboxMaps
+      } = internalData;
+      const mapChildrenField = computeMapChildrenField.value;
       const childrenField = computeChildrenField.value;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        checkStrictly
+      } = checkboxOpts;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      const handleSelect = node => {
+        const nodeid = getNodeId(node);
+        if (checked) {
+          if (!selectCheckboxMaps[nodeid]) {
+            selectCheckboxMaps[nodeid] = node;
+          }
+        } else {
+          if (selectCheckboxMaps[nodeid]) {
+            delete selectCheckboxMaps[nodeid];
+          }
+        }
+      };
+      if (checkStrictly) {
+        nodeList.forEach(handleSelect);
+      } else {
+        _xeUtils.default.eachTree(nodeList, handleSelect, {
+          children: transform ? mapChildrenField : childrenField
+        });
+      }
+      reactData.updateCheckboxFlag++;
+      updateCheckboxStatus();
+    };
+    const createNode = records => {
       const valueField = computeValueField.value;
-      const nodeMaps = {};
-      const keyMaps = {};
-      const handleOptNode = (item, index, items, path, parent, nodes) => {
-        let nodeid = getNodeid(item);
+      return Promise.resolve(records.map(obj => {
+        const item = Object.assign({}, obj);
+        let nodeid = getNodeId(item);
         if (!nodeid) {
-          nodeid = getOptUniqueId();
-        }
-        if (keyMaps[nodeid]) {
-          (0, _log.errLog)('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid]);
+          nodeid = getNodeUniqueId();
+          _xeUtils.default.set(item, valueField, nodeid);
         }
-        keyMaps[nodeid] = true;
-        const value = item[valueField];
-        if (nodeMaps[value]) {
-          (0, _log.errLog)('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
+        return item;
+      }));
+    };
+    const cacheNodeMap = () => {
+      const {
+        separator
+      } = props;
+      const {
+        treeFullData
+      } = internalData;
+      const valueField = computeValueField.value;
+      const labelField = computeLabelField.value;
+      const childrenField = computeChildrenField.value;
+      const keyMaps = {};
+      const fullMaps = {};
+      _xeUtils.default.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
+        let nodeid = getNodeId(item);
+        if (!nodeid) {
+          nodeid = getNodeUniqueId();
+          item[valueField] = nodeid;
         }
-        nodeMaps[value] = {
+        const nodeVal = item[valueField];
+        const itemRest = {
           item,
           index,
+          $index: -1,
+          _index: -1,
           items,
-          parent,
-          nodes
+          parent: parenItem,
+          nodes,
+          level: nodes.length - 1,
+          treeIndex: index,
+          lineCount: 0,
+          treeLoaded: false,
+          fullLabel: nodes.map(item => item[labelField]).join(separator || ' / ')
         };
-      };
-      if (options) {
+        keyMaps[nodeid] = itemRest;
+        fullMaps[nodeVal] = itemRest;
+      }, {
+        children: childrenField
+      });
+      internalData.nodeMaps = keyMaps;
+      internalData.fullNodeMaps = fullMaps;
+      reactData.fullOptFlag++;
+    };
+    const updateAfterDataIndex = () => {
+      const {
+        separator
+      } = props;
+      const {
+        afterTreeList,
+        nodeMaps
+      } = internalData;
+      const labelField = computeLabelField.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      let vtIndex = 0;
+      _xeUtils.default.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
+        const nodeid = getNodeId(item);
+        const nodeItem = nodeMaps[nodeid];
+        if (nodeItem) {
+          nodeItem.items = items;
+          nodeItem.treeIndex = index;
+          nodeItem._index = vtIndex;
+        } else {
+          const rest = {
+            item,
+            index,
+            $index: -1,
+            _index: vtIndex,
+            items,
+            parent: parenItem,
+            nodes,
+            level: nodes.length - 1,
+            treeIndex: index,
+            lineCount: 0,
+            treeLoaded: false,
+            fullLabel: nodes.map(item => item[labelField]).join(separator || ' / ')
+          };
+          nodeMaps[nodeid] = rest;
+        }
+        vtIndex++;
+      }, {
+        children: transform ? mapChildrenField : childrenField
+      });
+    };
+    const updateAfterFullData = () => {
+      const {
+        searchValue
+      } = reactData;
+      const {
+        treeFullData,
+        lastFilterValue
+      } = internalData;
+      const labelField = computeLabelField.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      const filterOpts = computeFilterOpts.value;
+      const {
+        beforeFilterMethod,
+        filterMethod,
+        afterFilterMethod
+      } = filterOpts;
+      let fullList = treeFullData;
+      let treeList = fullList;
+      let filterStr = '';
+      if (searchValue) {
+        filterStr = `${searchValue}`;
+        const handleSearch = filterMethod ? item => {
+          return filterMethod({
+            $cascader: $xeCascader,
+            node: item,
+            filterValue: filterStr
+          });
+        } : item => {
+          return String(item[labelField]).toLowerCase().indexOf(filterStr.toLowerCase()) > -1;
+        };
+        const bafParams = {
+          $cascader: $xeCascader,
+          filterValue: filterStr
+        };
+        if (beforeFilterMethod) {
+          beforeFilterMethod(bafParams);
+        }
         if (transform) {
-          options.forEach((item, index, items) => {
-            handleOptNode(item, index, items, [], null, []);
+          treeList = _xeUtils.default.searchTree(treeFullData, handleSearch, {
+            original: true,
+            isEvery: true,
+            children: childrenField,
+            mapChildren: mapChildrenField
           });
+          fullList = treeList;
         } else {
-          _xeUtils.default.eachTree(options, handleOptNode, {
-            children: childrenField
+          fullList = treeFullData.filter(handleSearch);
+        }
+        internalData.lastFilterValue = filterStr;
+        (0, _vue.nextTick)(() => {
+          if (afterFilterMethod) {
+            afterFilterMethod(bafParams);
+          }
+        });
+      } else {
+        if (transform) {
+          treeList = _xeUtils.default.searchTree(treeFullData, () => true, {
+            original: true,
+            isEvery: true,
+            children: childrenField,
+            mapChildren: mapChildrenField
+          });
+          fullList = treeList;
+          if (lastFilterValue) {
+            const bafParams = {
+              $cascader: $xeCascader,
+              filterValue: filterStr
+            };
+            if (beforeFilterMethod) {
+              beforeFilterMethod(bafParams);
+            }
+            // 取消筛选时自动收起
+            (0, _vue.nextTick)(() => {
+              if (afterFilterMethod) {
+                afterFilterMethod(bafParams);
+              }
+            });
+          }
+        }
+        internalData.lastFilterValue = '';
+      }
+      internalData.afterVisibleList = fullList;
+      internalData.afterTreeList = treeList;
+      updateAfterDataIndex();
+    };
+    /**
+     * 如果为虚拟树、则将树结构拍平
+     */
+    const handleTreeToList = () => {
+      const {
+        afterTreeList,
+        treeExpandedMaps
+      } = internalData;
+      const mapChildrenField = computeMapChildrenField.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      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
+        });
+        internalData.afterVisibleList = fullData;
+        return fullData;
+      }
+      return internalData.afterVisibleList;
+    };
+    const handleData = force => {
+      const {
+        nodeMaps
+      } = internalData;
+      let fullList = internalData.afterVisibleList;
+      if (force) {
+        // 更新数据，处理筛选和排序
+        updateAfterFullData();
+        // 如果为虚拟树，将树结构拍平
+        fullList = handleTreeToList();
+      }
+      const treeList = fullList.slice(0);
+      treeList.forEach((item, $index) => {
+        const nodeid = getNodeId(item);
+        const itemRest = nodeMaps[nodeid];
+        if (itemRest) {
+          itemRest.$index = $index;
+        }
+      });
+      reactData.treeList = treeList;
+    };
+    const triggerSearchEvent = _xeUtils.default.debounce(() => handleData(true), 350, {
+      trailing: true
+    });
+    const loadData = list => {
+      const treeOpts = computeTreeOpts.value;
+      const keyField = computeKeyField.value;
+      const parentField = computeParentField.value;
+      const childrenField = computeChildrenField.value;
+      const {
+        rootParentValue,
+        rootValues
+      } = treeOpts;
+      const {
+        transform
+      } = treeOpts;
+      const fullData = transform ? _xeUtils.default.toArrayTree(list, {
+        key: keyField,
+        parentKey: parentField,
+        mapChildren: childrenField,
+        rootParentValue,
+        rootValues
+      }) : list ? list.slice(0) : [];
+      internalData.treeFullData = fullData;
+      cacheNodeMap();
+      handleData(true);
+      handleCurrentItems();
+      updateCurrentChunk();
+      return (0, _vue.nextTick)();
+    };
+    const updateCurrentChunk = () => {
+      const {
+        currentItems
+      } = reactData;
+      const {
+        treeFullData
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const currentCunkList = [treeFullData];
+      if (currentItems.length) {
+        let chunkIndex = 0;
+        let stNodeid = currentItems[chunkIndex];
+        let optList = treeFullData;
+        while (stNodeid && optList && optList.length) {
+          stNodeid = currentItems[chunkIndex++];
+          const currOption = optList.find(item => stNodeid === getNodeId(item));
+          optList = currOption ? currOption[childrenField] : [];
+          if (!optList || !optList.length) {
+            break;
+          }
+          currentCunkList.push(optList);
+        }
+      }
+      reactData.currentCunkList = currentCunkList;
+    };
+    const handleCurrentItems = () => {
+      const {
+        treeFullData
+      } = internalData;
+      const selectVals = computeSelectVals.value;
+      const childrenField = computeChildrenField.value;
+      const stItems = [];
+      const expandedMaps = {};
+      if (selectVals.length) {
+        const lastVal = _xeUtils.default.last(selectVals);
+        const stRest = _xeUtils.default.findTree(treeFullData, item => lastVal === getNodeId(item), {
+          children: childrenField
+        });
+        if (stRest) {
+          const {
+            nodes
+          } = stRest;
+          nodes.forEach(item => {
+            const nodeid = getNodeId(item);
+            expandedMaps[nodeid] = true;
+            stItems.push(nodeid);
           });
         }
       }
-      internalData.fullOptionList = options || [];
-      internalData.fullNodeMaps = nodeMaps;
+      internalData.treeExpandedMaps = expandedMaps;
+      reactData.currentItems = stItems;
     };
     const updateZindex = () => {
+      const popupOpts = computePopupOpts.value;
       const {
         zIndex
-      } = props;
+      } = popupOpts;
       if (zIndex) {
         reactData.panelIndex = zIndex;
       } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
@@ -311,9 +707,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const updatePlacement = () => {
-      const {
-        placement
-      } = props;
       const {
         panelIndex
       } = reactData;
@@ -323,9 +716,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const popupOpts = computePopupOpts.value;
       const handleStyle = () => {
         const ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
+          placement: popupOpts.placement,
           defaultPlacement: popupOpts.defaultPlacement,
-          teleportTo: btnTransfer
+          teleportTo: btnTransfer,
+          isMinWidth: false
         });
         const panelStyle = Object.assign(ppObj.style, {
           zIndex: panelIndex
@@ -336,14 +730,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       handleStyle();
       return (0, _vue.nextTick)().then(handleStyle);
     };
-    const showOptionPanel = () => {
+    const showOptionPanel = evnt => {
       const {
         loading,
         remote,
         filterable
       } = props;
       const {
-        fullOptionList
+        treeFullData
       } = internalData;
       const isDisabled = computeIsDisabled.value;
       const remoteOpts = computeRemoteOpts.value;
@@ -355,7 +749,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         reactData.isActivated = true;
         reactData.isAniVisible = true;
         if (filterable) {
-          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !treeFullData.length) {
             handleSearchEvent();
           }
         }
@@ -365,13 +759,66 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, 10);
         updateZindex();
         updatePlacement();
+        dispatchEvent('visible-change', {
+          visible: true
+        }, evnt || null);
       }
     };
-    const hideOptionPanel = () => {
+    const hideOptionPanel = evnt => {
       reactData.visiblePanel = false;
       internalData.hpTimeout = setTimeout(() => {
         reactData.isAniVisible = false;
       }, 350);
+      dispatchEvent('visible-change', {
+        visible: false
+      }, evnt || null);
+    };
+    const setCurrentNode = node => {
+      reactData.currentNode = node;
+      return (0, _vue.nextTick)();
+    };
+    const setAllCheckboxNode = checked => {
+      const selectMaps = {};
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      const checkKeys = [];
+      const checkNodes = [];
+      if (checked) {
+        _xeUtils.default.eachTree(internalData.afterTreeList, node => {
+          const nodeid = getNodeId(node);
+          checkKeys.push(nodeid);
+          checkNodes.push(node);
+          selectMaps[nodeid] = true;
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+      }
+      internalData.indeterminateRowMaps = {};
+      internalData.selectCheckboxMaps = selectMaps;
+      reactData.updateCheckboxFlag++;
+      updateCheckboxStatus();
+      return (0, _vue.nextTick)().then(() => {
+        return {
+          checkNodeKeys: checkKeys,
+          checkNodes
+        };
+      });
+    };
+    const clearCheckboxNode = () => {
+      internalData.indeterminateRowMaps = {};
+      internalData.selectCheckboxMaps = {};
+      reactData.updateCheckboxFlag++;
+      updateCheckboxStatus();
+      return (0, _vue.nextTick)().then(() => {
+        return {
+          checkNodeKeys: [],
+          checkNodes: []
+        };
+      });
     };
     const changeEvent = (evnt, selectValue, node) => {
       const value = _xeUtils.default.isArray(selectValue) ? selectValue.map(_util.deNodeValue) : (0, _util.deNodeValue)(selectValue);
@@ -396,7 +843,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const clearEvent = (params, evnt) => {
       clearValueEvent(evnt, null);
-      hideOptionPanel();
+      hideOptionPanel(evnt);
     };
     const allCheckedPanelEvent = params => {
       const {
@@ -404,24 +851,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = params;
       const {
         multiple,
-        autoClose
+        checkedClosable
       } = props;
-      const $tree = refTree.value;
       if (multiple) {
-        if ($tree) {
-          $tree.setAllCheckboxNode(true).then(({
-            checkNodeKeys,
-            checkNodes
-          }) => {
-            changeEvent($event, checkNodeKeys, checkNodes[0]);
-            dispatchEvent('all-change', {
-              value: checkNodeKeys
-            }, $event);
-            if (autoClose) {
-              hideOptionPanel();
-            }
-          });
-        }
+        setAllCheckboxNode(true).then(({
+          checkNodeKeys,
+          checkNodes
+        }) => {
+          changeEvent($event, checkNodeKeys, checkNodes[0]);
+          dispatchEvent('all-change', {
+            value: checkNodeKeys
+          }, $event);
+          if (checkedClosable) {
+            hideOptionPanel($event);
+          }
+        });
       }
     };
     const clearCheckedPanelEvent = params => {
@@ -430,21 +874,24 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = params;
       const {
         multiple,
-        autoClose
+        checkedClosable
       } = props;
-      const $tree = refTree.value;
-      if ($tree) {
-        const value = multiple ? [] : null;
-        $tree.clearCheckboxNode().then(() => {
-          if (autoClose) {
-            hideOptionPanel();
-          }
-        });
-        changeEvent($event, value, null);
-        dispatchEvent('clear', {
-          value
-        }, $event);
-      }
+      const value = multiple ? [] : null;
+      clearCheckboxNode().then(() => {
+        if (checkedClosable) {
+          hideOptionPanel($event);
+        }
+      });
+      changeEvent($event, value, null);
+      dispatchEvent('clear', {
+        value
+      }, $event);
+    };
+    const closePanelEvent = params => {
+      const {
+        $event
+      } = params;
+      hideOptionPanel($event);
     };
     const handleGlobalMousewheelEvent = evnt => {
       const {
@@ -457,7 +904,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
             updatePlacement();
           } else {
-            hideOptionPanel();
+            hideOptionPanel(evnt);
           }
         }
       }
@@ -472,17 +919,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const panelElem = refOptionPanel.value;
         reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
         if (visiblePanel && !reactData.isActivated) {
-          hideOptionPanel();
+          hideOptionPanel(evnt);
         }
       }
     };
-    const handleGlobalBlurEvent = () => {
+    const handleGlobalBlurEvent = evnt => {
       const {
         visiblePanel,
         isActivated
       } = reactData;
       if (visiblePanel) {
-        hideOptionPanel();
+        hideOptionPanel(evnt);
       }
       if (isActivated) {
         reactData.isActivated = false;
@@ -512,12 +959,436 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         });
       }
     };
+    const changeCurrentEvent = (evnt, node) => {
+      evnt.preventDefault();
+      const isChecked = true;
+      reactData.currentNode = node;
+      dispatchEvent('current-change', {
+        node,
+        checked: isChecked
+      }, evnt);
+    };
+    const changeRadioEvent = (evnt, node) => {
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      const {
+        nodeMaps
+      } = internalData;
+      const radioOpts = computeRadioOpts.value;
+      const childrenField = computeChildrenField.value;
+      const {
+        checkMode,
+        checkMethod
+      } = radioOpts;
+      const nodeid = getNodeId(node);
+      const childList = node[childrenField];
+      const isExistChild = childList && childList.length > 0;
+      const nodeItem = nodeMaps[nodeid] || {};
+      const nLevel = nodeItem.level;
+      const isDisabled = checkMethod ? !checkMethod({
+        $cascader: $xeCascader,
+        node
+      }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+      if (isDisabled) {
+        return;
+      }
+      const value = nodeid;
+      reactData.selectRadioKey = value;
+      changeEvent(evnt, value, node);
+      hideOptionPanel(evnt);
+    };
+    const handleAsyncTreeExpandChilds = node => {
+      const checkboxOpts = computeCheckboxOpts.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        loadMethod
+      } = treeOpts;
+      const {
+        checkStrictly
+      } = checkboxOpts;
+      return new Promise(resolve => {
+        if (loadMethod) {
+          const {
+            nodeMaps
+          } = internalData;
+          const nodeid = getNodeId(node);
+          const nodeItem = nodeMaps[nodeid];
+          internalData.treeExpandLazyLoadedMaps[nodeid] = true;
+          Promise.resolve(loadMethod({
+            $cascader: $xeCascader,
+            node
+          })).then(childRecords => {
+            const {
+              treeExpandLazyLoadedMaps
+            } = internalData;
+            nodeItem.treeLoaded = true;
+            if (treeExpandLazyLoadedMaps[nodeid]) {
+              treeExpandLazyLoadedMaps[nodeid] = false;
+            }
+            if (!_xeUtils.default.isArray(childRecords)) {
+              childRecords = [];
+            }
+            if (childRecords) {
+              return $xeCascader.loadChildrenNode(node, childRecords).then(childRows => {
+                const {
+                  treeExpandedMaps
+                } = internalData;
+                if (childRows.length && !treeExpandedMaps[nodeid]) {
+                  treeExpandedMaps[nodeid] = true;
+                }
+                reactData.updateExpandedFlag++;
+                // 如果当前节点已选中，则展开后子节点也被选中
+                if (!checkStrictly && $xeCascader.isCheckedByCheckboxNodeId(nodeid)) {
+                  handleCheckedCheckboxNode(childRows, true);
+                }
+                dispatchEvent('load-success', {
+                  node,
+                  data: childRecords
+                }, new Event('load-success'));
+                return (0, _vue.nextTick)();
+              });
+            } else {
+              dispatchEvent('load-success', {
+                node,
+                data: childRecords
+              }, new Event('load-success'));
+            }
+          }).catch(e => {
+            const {
+              treeExpandLazyLoadedMaps
+            } = internalData;
+            nodeItem.treeLoaded = false;
+            if (treeExpandLazyLoadedMaps[nodeid]) {
+              treeExpandLazyLoadedMaps[nodeid] = false;
+            }
+            dispatchEvent('load-error', {
+              node,
+              data: e
+            }, new Event('load-error'));
+          }).finally(() => {
+            handleTreeToList();
+            handleData();
+          });
+        } else {
+          resolve();
+        }
+      });
+    };
+    /**
+     * 展开与收起树节点
+     * @param nodeList
+     * @param expanded
+     * @returns
+     */
+    const handleBaseTreeExpand = (nodeList, expanded) => {
+      const {
+        treeExpandLazyLoadedMaps,
+        treeExpandedMaps
+      } = internalData;
+      const {
+        nodeMaps
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const hasChildField = computeHasChildField.value;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        lazy,
+        toggleMethod
+      } = treeOpts;
+      const result = [];
+      let validNodes = toggleMethod ? nodeList.filter(node => toggleMethod({
+        $cascader: $xeCascader,
+        expanded,
+        node
+      })) : nodeList;
+      validNodes = validNodes.length ? [validNodes[validNodes.length - 1]] : [];
+      // 同一级只能展开一个
+      const nodeid = getNodeId(validNodes[0]);
+      const nodeItem = nodeMaps[nodeid];
+      if (nodeItem) {
+        nodeItem.items.forEach(item => {
+          const itemNodeId = getNodeId(item);
+          if (treeExpandedMaps[itemNodeId]) {
+            delete treeExpandedMaps[itemNodeId];
+          }
+        });
+      }
+      const expandNodes = [];
+      if (expanded) {
+        validNodes.forEach(item => {
+          const itemNodeId = getNodeId(item);
+          if (!treeExpandedMaps[itemNodeId]) {
+            const nodeItem = nodeMaps[itemNodeId];
+            const isLoad = lazy && item[hasChildField] && !nodeItem.treeLoaded && !treeExpandLazyLoadedMaps[itemNodeId];
+            // 是否使用懒加载
+            if (isLoad) {
+              result.push(handleAsyncTreeExpandChilds(item));
+            } else {
+              if (item[childrenField] && item[childrenField].length) {
+                treeExpandedMaps[itemNodeId] = true;
+                expandNodes.push(item);
+              }
+            }
+          }
+        });
+      } else {
+        validNodes.forEach(item => {
+          const itemNodeId = getNodeId(item);
+          if (treeExpandedMaps[itemNodeId]) {
+            delete treeExpandedMaps[itemNodeId];
+            expandNodes.push(item);
+          }
+        });
+      }
+      reactData.updateExpandedFlag++;
+      handleTreeToList();
+      handleData();
+      return Promise.all(result);
+    };
+    const toggleExpandEvent = (evnt, node, chunks, chunkIndex) => {
+      const {
+        currentItems
+      } = reactData;
+      const {
+        treeExpandLazyLoadedMaps
+      } = internalData;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        lazy
+      } = treeOpts;
+      const stItems = currentItems.slice(0, chunkIndex);
+      const nodeid = getNodeId(node);
+      const expanded = true;
+      evnt.stopPropagation();
+      stItems.push(nodeid);
+      reactData.currentItems = stItems;
+      if (!lazy || !treeExpandLazyLoadedMaps[nodeid]) {
+        handleBaseTreeExpand([node], expanded);
+      }
+      setCurrentNode(node);
+      updateCurrentChunk();
+      dispatchEvent('node-expand', {
+        node,
+        expanded
+      }, evnt);
+    };
+    const updateCheckboxStatus = () => {
+      const {
+        selectCheckboxMaps,
+        indeterminateRowMaps,
+        afterTreeList
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        checkStrictly,
+        checkMethod
+      } = checkboxOpts;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      if (!checkStrictly) {
+        const childRowMaps = {};
+        const childRowList = [];
+        _xeUtils.default.eachTree(afterTreeList, node => {
+          const nodeid = getNodeId(node);
+          const childList = node[childrenField];
+          if (childList && childList.length && !childRowMaps[nodeid]) {
+            childRowMaps[nodeid] = 1;
+            childRowList.unshift([node, nodeid, childList]);
+          }
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+        childRowList.forEach(vals => {
+          const node = vals[0];
+          const nodeid = vals[1];
+          const childList = vals[2];
+          let sLen = 0; // 已选
+          let hLen = 0; // 半选
+          let vLen = 0; // 有效子行
+          const cLen = childList.length; // 子行
+          childList.forEach(checkMethod ? item => {
+            const childNodeid = getNodeId(item);
+            const isSelect = selectCheckboxMaps[childNodeid];
+            if (checkMethod({
+              $cascader: $xeCascader,
+              node: item
+            })) {
+              if (isSelect) {
+                sLen++;
+              } else if (indeterminateRowMaps[childNodeid]) {
+                hLen++;
+              }
+              vLen++;
+            } else {
+              if (isSelect) {
+                sLen++;
+              } else if (indeterminateRowMaps[childNodeid]) {
+                hLen++;
+              }
+            }
+          } : item => {
+            const childNodeid = getNodeId(item);
+            const isSelect = selectCheckboxMaps[childNodeid];
+            if (isSelect) {
+              sLen++;
+            } else if (indeterminateRowMaps[childNodeid]) {
+              hLen++;
+            }
+            vLen++;
+          });
+          let isSelected = false;
+          if (cLen > 0) {
+            if (vLen > 0) {
+              isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
+            } else {
+              // 如果存在子项禁用
+              if (sLen > 0 && sLen >= vLen) {
+                isSelected = true;
+              } else if (selectCheckboxMaps[nodeid]) {
+                isSelected = true;
+              } else {
+                isSelected = false;
+              }
+            }
+          } else {
+            // 如果无子项
+            isSelected = selectCheckboxMaps[nodeid];
+          }
+          const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
+          if (isSelected) {
+            selectCheckboxMaps[nodeid] = node;
+            if (indeterminateRowMaps[nodeid]) {
+              delete indeterminateRowMaps[nodeid];
+            }
+          } else {
+            if (selectCheckboxMaps[nodeid]) {
+              delete selectCheckboxMaps[nodeid];
+            }
+            if (halfSelect) {
+              indeterminateRowMaps[nodeid] = node;
+            } else {
+              if (indeterminateRowMaps[nodeid]) {
+                delete indeterminateRowMaps[nodeid];
+              }
+            }
+          }
+        });
+        reactData.updateCheckboxFlag++;
+      }
+    };
+    const changeCheckboxEvent = (evnt, node) => {
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      const {
+        selectCheckboxMaps,
+        nodeMaps
+      } = internalData;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        checkStrictly,
+        checkMode,
+        checkMethod
+      } = checkboxOpts;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        transform
+      } = treeOpts;
+      const nodeid = getNodeId(node);
+      const childList = node[childrenField];
+      const isExistChild = childList && childList.length > 0;
+      const nodeItem = nodeMaps[nodeid] || {};
+      const nLevel = nodeItem.level;
+      const isDisabled = checkMethod ? !checkMethod({
+        $cascader: $xeCascader,
+        node
+      }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+      if (isDisabled) {
+        return;
+      }
+      let isChecked = false;
+      if (selectCheckboxMaps[nodeid]) {
+        delete selectCheckboxMaps[nodeid];
+      } else {
+        isChecked = true;
+        selectCheckboxMaps[nodeid] = node;
+      }
+      if (!checkStrictly) {
+        _xeUtils.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 nodeids = _xeUtils.default.keys(selectCheckboxMaps);
+      const value = nodeids;
+      changeEvent(evnt, value, node);
+    };
+    const handleNodeClickEvent = (evnt, node, chunks, chunkIndex) => {
+      const {
+        multiple
+      } = props;
+      const treeOpts = computeTreeOpts.value;
+      const radioOpts = computeRadioOpts.value;
+      const checkboxOpts = computeCheckboxOpts.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const {
+        transform,
+        trigger
+      } = treeOpts;
+      const childList = node[transform ? mapChildrenField : childrenField];
+      let triggerCurrent = false;
+      let triggerRadio = false;
+      let triggerCheckbox = false;
+      let triggerExpand = false;
+      triggerCurrent = true;
+      changeCurrentEvent(evnt, node);
+      if (trigger !== 'icon') {
+        triggerExpand = true;
+        toggleExpandEvent(evnt, node, chunks, chunkIndex);
+      }
+      if (multiple) {
+        if (checkboxOpts.trigger === 'node' || !checkboxOpts.showIcon && (!childList || !childList.length)) {
+          triggerCheckbox = true;
+          changeCheckboxEvent(evnt, node);
+        }
+      } else {
+        if (radioOpts.trigger === 'node' || !radioOpts.showIcon && (!childList || !childList.length)) {
+          triggerRadio = true;
+          changeRadioEvent(evnt, node);
+        }
+      }
+      dispatchEvent('node-click', {
+        node,
+        triggerCurrent,
+        triggerRadio,
+        triggerCheckbox,
+        triggerExpand
+      }, evnt);
+    };
     const focusEvent = evnt => {
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled) {
         if (!reactData.visiblePanel) {
           reactData.triggerFocusPanel = true;
-          showOptionPanel();
+          showOptionPanel(evnt);
           setTimeout(() => {
             reactData.triggerFocusPanel = false;
           }, 150);
@@ -526,7 +1397,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       dispatchEvent('focus', {}, evnt);
     };
     const clickEvent = evnt => {
-      togglePanelEvent(evnt);
+      evnt.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (!reactData.visiblePanel) {
+          showOptionPanel(evnt);
+        }
+      }
       dispatchEvent('click', {}, evnt);
     };
     const blurEvent = evnt => {
@@ -535,18 +1413,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const modelSearchEvent = value => {
       reactData.searchValue = value;
+      triggerSearchEvent(new Event('filter'));
     };
     const handleSearchEvent = () => {
       const {
         modelValue,
-        remote,
-        remoteMethod
+        remote
       } = props;
       const {
         searchValue
       } = reactData;
       const remoteOpts = computeRemoteOpts.value;
-      const queryMethod = remoteOpts.queryMethod || remoteMethod;
+      const queryMethod = remoteOpts.queryMethod;
       if (remote && queryMethod && remoteOpts.enabled) {
         reactData.searchLoading = true;
         Promise.resolve(queryMethod({
@@ -567,14 +1445,240 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         reactData.triggerFocusPanel = false;
       } else {
         if (reactData.visiblePanel) {
-          hideOptionPanel();
+          hideOptionPanel($event);
         } else {
-          showOptionPanel();
+          showOptionPanel($event);
         }
       }
     };
-    const cascaderPrivateMethods = {};
+    const cascaderPrivateMethods = {
+      isCheckedByCheckboxNodeId,
+      /**
+       * 用于树结构，给行数据加载子节点
+       */
+      loadChildrenNode(node, childRecords) {
+        const {
+          separator
+        } = props;
+        const {
+          nodeMaps
+        } = internalData;
+        const treeOpts = computeTreeOpts.value;
+        const labelField = computeLabelField.value;
+        const {
+          lazy,
+          transform
+        } = treeOpts;
+        if (!lazy) {
+          return Promise.resolve([]);
+        }
+        const childrenField = computeChildrenField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        const parentNodeItem = nodeMaps[getNodeId(node)];
+        const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+        const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+        return createNode(childRecords).then(nodeList => {
+          _xeUtils.default.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+            const itemNodeId = getNodeId(childRow);
+            nodeMaps[itemNodeId] = {
+              item: childRow,
+              index: -1,
+              $index: -1,
+              _index: -1,
+              items,
+              parent: parent || parentNodeItem.item,
+              nodes: parentNodes.concat(nodes),
+              level: parentLevel + nodes.length,
+              treeIndex: -1,
+              lineCount: 0,
+              treeLoaded: false,
+              fullLabel: nodes.map(item => item[labelField]).join(separator || ' / ')
+            };
+          }, {
+            children: childrenField
+          });
+          node[childrenField] = nodeList;
+          if (transform) {
+            node[mapChildrenField] = nodeList;
+          }
+          updateAfterDataIndex();
+          return nodeList;
+        });
+      }
+    };
     Object.assign($xeCascader, cascaderMethods, cascaderPrivateMethods);
+    const handleVisibleOrCheckMode = (mode, isExistChild, nLevel) => {
+      if (mode) {
+        if (mode === 'first') {
+          return !nLevel;
+        }
+        if (mode === 'last') {
+          return !isExistChild;
+        }
+      }
+      return true;
+    };
+    const renderRadio = (node, isExistChild, nLevel, isChecked) => {
+      const radioOpts = computeRadioOpts.value;
+      const {
+        showIcon,
+        checkMode,
+        checkMethod,
+        visibleMode,
+        visibleMethod
+      } = radioOpts;
+      const isVisible = visibleMethod ? visibleMethod({
+        $cascader: $xeCascader,
+        node
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+      if (showIcon && isVisible) {
+        const isDisabled = checkMethod ? !checkMethod({
+          $cascader: $xeCascader,
+          node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+        return (0, _vue.h)('div', {
+          class: ['vxe-tree--radio-option', {
+            'is--checked': isChecked,
+            'is--disabled': isDisabled
+          }],
+          onClick: evnt => {
+            if (!isDisabled) {
+              changeRadioEvent(evnt, node);
+            }
+          }
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeCascader);
+    };
+    const renderCheckbox = (node, isExistChild, nLevel, isChecked, isIndeterminate) => {
+      const checkboxOpts = computeCheckboxOpts.value;
+      const {
+        showIcon,
+        checkMode,
+        checkMethod,
+        visibleMode,
+        visibleMethod
+      } = checkboxOpts;
+      const isVisible = visibleMethod ? visibleMethod({
+        $cascader: $xeCascader,
+        node
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+      if (showIcon && isVisible) {
+        const isDisabled = checkMethod ? !checkMethod({
+          $cascader: $xeCascader,
+          node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+        return (0, _vue.h)('div', {
+          class: ['vxe-cascader--checkbox-option', {
+            'is--checked': isChecked,
+            'is--indeterminate': isIndeterminate,
+            'is--disabled': isDisabled
+          }],
+          onClick: evnt => {
+            if (!isDisabled) {
+              changeCheckboxEvent(evnt, node);
+            }
+          }
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-checkbox--icon', isIndeterminate ? (0, _ui.getIcon)().CHECKBOX_INDETERMINATE : isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeCascader);
+    };
+    const renderNode = (node, nodeid, nodeIndex, chunks, chunkIndex) => {
+      const {
+        multiple
+      } = props;
+      const {
+        currentNode,
+        selectRadioKey,
+        updateCheckboxFlag,
+        updateExpandedFlag
+      } = reactData;
+      const {
+        nodeMaps,
+        selectCheckboxMaps,
+        indeterminateRowMaps,
+        treeExpandedMaps,
+        treeExpandLazyLoadedMaps
+      } = internalData;
+      const treeOpts = computeTreeOpts.value;
+      const {
+        lazy,
+        iconLoaded,
+        iconOpen,
+        iconClose
+      } = treeOpts;
+      const childrenField = computeChildrenField.value;
+      const labelField = computeLabelField.value;
+      const hasChildField = computeHasChildField.value;
+      const childList = node[childrenField];
+      const isExistChild = childList && childList.length > 0;
+      const iconSlot = slots.icon;
+      const titleSlot = slots.title;
+      const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
+      const nodeItem = nodeMaps[nodeid] || {};
+      const nodeTitle = node[labelField];
+      const nLevel = nodeItem.level;
+      let isRadioChecked = false;
+      if (!multiple) {
+        isRadioChecked = nodeid === selectRadioKey;
+      }
+      let isCheckboxChecked = false;
+      let isIndeterminate = false;
+      if (multiple) {
+        isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+        isIndeterminate = !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
+      }
+      let hasLazyChilds = false;
+      let isLazyLoading = false;
+      let isLazyLoaded = false;
+      if (lazy) {
+        isLazyLoading = !!treeExpandLazyLoadedMaps[nodeid];
+        hasLazyChilds = node[hasChildField];
+        isLazyLoaded = !!nodeItem.treeLoaded;
+      }
+      const nParams = {
+        node
+      };
+      return (0, _vue.h)('div', {
+        key: `${chunkIndex}_${nodeIndex}`,
+        class: ['vxe-cascader-chunk--node-item', {
+          'is--current': currentNode && (currentNode === node || getNodeId(currentNode) === nodeid),
+          'is-radio--checked': isRadioChecked,
+          'is-checkbox--checked': isCheckboxChecked,
+          'is-checkbox--indeterminate': isIndeterminate,
+          'is--expand': isExpand
+        }],
+        title: nodeTitle,
+        onMousedown: evnt => {
+          const isLeftBtn = evnt.button === 0;
+          if (isLeftBtn) {
+            evnt.stopPropagation();
+          }
+        },
+        onClick(evnt) {
+          handleNodeClickEvent(evnt, node, chunks, chunkIndex);
+        }
+      }, [multiple ? renderCheckbox(node, isExistChild, nLevel, isCheckboxChecked, isIndeterminate) : renderRadio(node, isExistChild, nLevel, isRadioChecked), (0, _vue.h)('div', {
+        class: 'vxe-cascader-chunk--node-item-inner'
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-cascader-chunk--node-item-title'
+      }, titleSlot ? (0, _ui.getSlotVNs)(titleSlot(nParams)) : nodeTitle)]), treeOpts.showIcon && (lazy ? isLazyLoaded ? isExistChild : hasLazyChilds : isExistChild) ? (0, _vue.h)('div', {
+        class: 'vxe-cascader-chunk--node-item-switcher'
+      }, [[(0, _vue.h)('div', {
+        class: 'vxe-cascader--node-item-icon',
+        onClick(evnt) {
+          if (treeOpts.trigger === 'icon') {
+            toggleExpandEvent(evnt, node, chunks, chunkIndex);
+          }
+        }
+      }, iconSlot ? (0, _ui.getSlotVNs)(iconSlot(nParams)) : [(0, _vue.h)('i', {
+        class: isLazyLoading ? iconLoaded || (0, _ui.getIcon)().CASCADER_NODE_LOADED : isExpand ? iconOpen || (0, _ui.getIcon)().CASCADER_NODE_OPEN : iconClose || (0, _ui.getIcon)().CASCADER_NODE_CLOSE
+      })])]]) : (0, _ui.renderEmptyElement)($xeCascader)]);
+    };
     const renderVN = () => {
       const {
         className,
@@ -584,14 +1688,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         filterable,
         showTotalButton,
         showCheckedButton,
-        showClearButton
+        showClearButton,
+        showCloseButton
       } = props;
       const {
         initialized,
         isActivated,
         isAniVisible,
         visiblePanel,
-        searchValue
+        searchValue,
+        currentCunkList
       } = reactData;
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
@@ -657,7 +1763,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'ani--enter': !loading && visiblePanel
         }],
         placement: reactData.panelPlacement,
-        style: reactData.panelStyle
+        style: popupWrapperStyle
       }, initialized ? [(0, _vue.h)('div', {
         class: 'vxe-cascader--panel-wrapper'
       }, [filterable ? (0, _vue.h)('div', {
@@ -672,37 +1778,80 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         placeholder: (0, _ui.getI18n)('vxe.cascader.search'),
         prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH,
         'onUpdate:modelValue': modelSearchEvent
-      })]) : (0, _ui.renderEmptyElement)($xeCascader), showTotalButton || showCheckedButton && multiple || showClearButton || headerSlot ? (0, _vue.h)('div', {
-        class: 'vxe-cascader--panel-header'
+      })]) : (0, _ui.renderEmptyElement)($xeCascader), showCheckedButton && multiple || showClearButton || headerSlot ? (0, _vue.h)('div', {
+        class: 'vxe-tree-select--panel-header'
       }, headerSlot ? headerSlot({}) : [(0, _vue.h)('div', {
-        class: 'vxe-cascader--header-button'
-      }, [showTotalButton ? (0, _vue.h)('div', {
-        class: 'vxe-cascader--header-total'
-      }, (0, _ui.getI18n)('vxe.cascader.total', [selectVals.length])) : (0, _ui.renderEmptyElement)($xeCascader), (0, _vue.h)('div', {
-        class: 'vxe-cascader--header-btns'
+        class: 'vxe-tree-select--header-button'
+      }, [showCheckedButton && showClearButton ? (0, _vue.h)('div', {
+        class: 'vxe-tree-select--selected-btns'
       }, [showCheckedButton && multiple ? (0, _vue.h)(_button.default, {
-        content: (0, _ui.getI18n)('vxe.cascader.allChecked'),
+        content: (0, _ui.getI18n)('vxe.treeSelect.allChecked'),
         mode: 'text',
         onClick: allCheckedPanelEvent
       }) : (0, _ui.renderEmptyElement)($xeCascader), showClearButton ? (0, _vue.h)(_button.default, {
-        content: (0, _ui.getI18n)('vxe.cascader.clearChecked'),
+        content: (0, _ui.getI18n)('vxe.treeSelect.clearChecked'),
         mode: 'text',
         onClick: clearCheckedPanelEvent
-      }) : (0, _ui.renderEmptyElement)($xeCascader)])])]) : (0, _ui.renderEmptyElement)($xeCascader), (0, _vue.h)('div', {
+      }) : (0, _ui.renderEmptyElement)($xeCascader)]) : (0, _ui.renderEmptyElement)($xeCascader)])]) : (0, _ui.renderEmptyElement)($xeCascader), (0, _vue.h)('div', {
         class: 'vxe-cascader--panel-body'
       }, [(0, _vue.h)('div', {
-        ref: refTreeWrapper,
-        class: 'vxe-cascader-tree--wrapper',
-        style: popupWrapperStyle
-      }, [])]), footerSlot ? (0, _vue.h)('div', {
+        ref: refChunkWrapper,
+        class: 'vxe-cascader-chunk--wrapper'
+      }, [currentCunkList.map((chunks, chunkIndex) => {
+        return (0, _vue.h)('div', {
+          key: chunkIndex,
+          class: 'vxe-cascader-chunk--item-wrapper'
+        }, [(0, _vue.h)(_list.default, {
+          data: chunks
+        }, {
+          default(slotParams) {
+            const {
+              items
+            } = slotParams;
+            return items.map((node, nodeIndex) => {
+              const nodeid = getNodeId(node);
+              return renderNode(node, nodeid, nodeIndex, chunks, chunkIndex);
+            });
+          }
+        })]);
+      })])]), footerSlot || showTotalButton || showCloseButton && multiple ? (0, _vue.h)('div', {
         class: 'vxe-cascader--panel-footer'
-      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeCascader)])] : [])])]);
+      }, footerSlot ? footerSlot({}) : [(0, _vue.h)('div', {
+        class: 'vxe-cascader--footer-button'
+      }, [showTotalButton ? (0, _vue.h)('div', {
+        class: 'vxe-cascader--total-btns'
+      }, (0, _ui.getI18n)('vxe.treeSelect.total', [selectVals.length])) : (0, _ui.renderEmptyElement)($xeCascader), showCloseButton && multiple ? (0, _vue.h)('div', {
+        class: 'vxe-cascader--oper-btns'
+      }, [(0, _vue.h)(_button.default, {
+        content: (0, _ui.getI18n)('vxe.select.close'),
+        mode: 'text',
+        onClick: closePanelEvent
+      })]) : (0, _ui.renderEmptyElement)($xeCascader)])]) : (0, _ui.renderEmptyElement)($xeCascader)])] : [])])]);
     };
+    (0, _vue.watch)(() => props.modelValue, () => {
+      if (!reactData.visiblePanel) {
+        handleCurrentItems();
+        updateCurrentChunk();
+      }
+    });
+    (0, _vue.watch)(() => props.options, () => {
+      cacheNodeMap();
+    });
+    const dataFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.options ? props.options.length : 0, () => {
+      dataFlag.value++;
+    });
     (0, _vue.watch)(() => props.options, () => {
-      cacheDataMap();
+      dataFlag.value++;
+    });
+    (0, _vue.watch)(dataFlag, () => {
+      loadData(props.options || []);
     });
-    cacheDataMap();
+    loadData(props.options || []);
     (0, _vue.onMounted)(() => {
+      if (props.filterable) {
+        (0, _log.errLog)('vxe.error.notProp', ['filterable']);
+      }
       _ui.globalEvents.on($xeCascader, 'mousewheel', handleGlobalMousewheelEvent);
       _ui.globalEvents.on($xeCascader, 'mousedown', handleGlobalMousedownEvent);
       _ui.globalEvents.on($xeCascader, 'blur', handleGlobalBlurEvent);