vxe-pc-ui 3.14.38 → 3.14.40

package/lib/cascader/src/cascader.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _comp = require("../../ui/src/comp");
-var _xeUtils = _interopRequireDefault(require("xe-utils"));
 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 }; }
@@ -18,14 +19,59 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function getOptUniqueId() {
+/**
+ * 生成节点的唯一主键
+ */
+function getNodeUniqueId() {
   return _xeUtils.default.uniqueId('node_');
 }
+function handleVisibleOrCheckMode(mode, isExistChild, nLevel) {
+  if (mode) {
+    if (mode === 'first') {
+      return !nLevel;
+    }
+    if (mode === 'last') {
+      return !isExistChild;
+    }
+  }
+  return true;
+}
+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 _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
@@ -55,29 +101,48 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     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: function _default() {
         return (0, _ui.getConfig)().cascader.size || (0, _ui.getConfig)().size;
       }
     },
+    treeConfig: Object,
+    radioConfig: Object,
+    checkboxConfig: Object,
     remote: Boolean,
     remoteConfig: Function,
     popupConfig: Object,
-    treeConfig: Object,
-    autoClose: {
+    checkedClosable: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().cascader.autoClose;
+        return (0, _ui.getConfig)().cascader.checkedClosable;
+      }
+    },
+    clearClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().cascader.clearClosable;
+      }
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().cascader.showCloseButton;
       }
     },
     showTotalButton: {
@@ -97,16 +162,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       default: function _default() {
         return (0, _ui.getConfig)().cascader.showClearButton;
       }
-    },
-    transfer: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * 已废弃，被 remote-config.queryMethod 替换
-     * @deprecated
-     */
-    remoteMethod: Function
+    }
   },
   inject: {
     $xeModal: {
@@ -134,18 +190,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   data: function data() {
     var xID = _xeUtils.default.uniqueId();
-    var reactData = {
-      initialized: false,
-      searchValue: '',
-      searchLoading: false,
-      panelIndex: 0,
-      panelStyle: {},
-      panelPlacement: null,
-      triggerFocusPanel: false,
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false
-    };
+    var reactData = createReactData();
     var internalData = createInternalData();
     return {
       xID: xID,
@@ -182,67 +227,44 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     computeBtnTransfer: function computeBtnTransfer() {
       var $xeCascader = this;
-      var props = $xeCascader;
       var $xeTable = $xeCascader.$xeTable;
       var $xeModal = $xeCascader.$xeModal;
       var $xeDrawer = $xeCascader.$xeDrawer;
       var $xeForm = $xeCascader.$xeForm;
-      var transfer = props.transfer;
-      if (transfer === null) {
-        var globalTransfer = (0, _ui.getConfig)().cascader.transfer;
-        if (_xeUtils.default.isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true;
-        }
+      var popupOpts = $xeCascader.computePopupOpts;
+      var transfer = popupOpts.transfer;
+      if (_xeUtils.default.isBoolean(transfer)) {
+        return transfer;
       }
-      return transfer;
-    },
-    computePopupOpts: function computePopupOpts() {
-      var $xeCascader = this;
-      var props = $xeCascader;
-      return Object.assign({}, (0, _ui.getConfig)().cascader.popupConfig, props.popupConfig);
+      if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        return true;
+      }
+      return false;
     },
     computeTreeOpts: function computeTreeOpts() {
       var $xeCascader = this;
       var props = $xeCascader;
       return Object.assign({}, (0, _ui.getConfig)().cascader.treeConfig, props.treeConfig);
     },
-    computeTreeNodeOpts: function computeTreeNodeOpts() {
+    computeRadioOpts: function computeRadioOpts() {
       var $xeCascader = this;
-      var treeOpts = $xeCascader.computeTreeOpts;
-      return Object.assign({
-        isHover: true
-      }, treeOpts.nodeConfig);
+      var props = $xeCascader;
+      return Object.assign({}, (0, _ui.getConfig)().cascader.radioConfig, props.radioConfig);
     },
-    computeTreeCheckboxOpts: function computeTreeCheckboxOpts() {
+    computeCheckboxOpts: function computeCheckboxOpts() {
       var $xeCascader = this;
-      var treeOpts = $xeCascader.computeTreeOpts;
-      return Object.assign({
-        showIcon: !!treeOpts.showCheckbox
-      }, treeOpts.checkboxConfig, {
-        trigger: 'node'
-      });
+      var props = $xeCascader;
+      return Object.assign({}, (0, _ui.getConfig)().cascader.checkboxConfig, props.checkboxConfig);
     },
-    computeTreeRadioOpts: function computeTreeRadioOpts() {
+    computePopupOpts: function computePopupOpts() {
       var $xeCascader = this;
-      var treeOpts = $xeCascader.computeTreeOpts;
-      return Object.assign({
-        showIcon: !!treeOpts.showRadio
-      }, treeOpts.radioConfig, {
-        trigger: 'node'
-      });
+      var props = $xeCascader;
+      return Object.assign({}, (0, _ui.getConfig)().cascader.popupConfig, props.popupConfig);
     },
     computePropsOpts: function computePropsOpts() {
       var $xeCascader = this;
       var props = $xeCascader;
-      return Object.assign({}, props.optionProps);
-    },
-    computeNodeKeyField: function computeNodeKeyField() {
-      var $xeCascader = this;
-      var valueField = $xeCascader.computeValueField;
-      return valueField;
+      return props.optionProps || {};
     },
     computeLabelField: function computeLabelField() {
       var $xeCascader = this;
@@ -254,53 +276,63 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var propsOpts = $xeCascader.computePropsOpts;
       return propsOpts.value || 'value';
     },
-    computeChildrenField: function computeChildrenField() {
+    computeKeyField: function computeKeyField() {
       var $xeCascader = this;
-      var propsOpts = $xeCascader.computePropsOpts;
-      return propsOpts.children || 'children';
+      var treeOpts = $xeCascader.computeTreeOpts;
+      return treeOpts.keyField || 'id';
     },
     computeParentField: function computeParentField() {
       var $xeCascader = this;
-      var propsOpts = $xeCascader.computePropsOpts;
-      return propsOpts.parent || 'parentField';
+      var treeOpts = $xeCascader.computeTreeOpts;
+      return treeOpts.parentField || 'parentId';
+    },
+    computeChildrenField: function computeChildrenField() {
+      var $xeCascader = this;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      return treeOpts.childrenField || 'children';
+    },
+    computeMapChildrenField: function computeMapChildrenField() {
+      var $xeCascader = this;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      return treeOpts.mapChildrenField || 'mapChildren';
     },
     computeHasChildField: function computeHasChildField() {
       var $xeCascader = this;
-      var propsOpts = $xeCascader.computePropsOpts;
-      return propsOpts.hasChild || 'hasChild';
+      var treeOpts = $xeCascader.computeTreeOpts;
+      return treeOpts.hasChildField || 'hasChild';
     },
     computeRemoteOpts: function computeRemoteOpts() {
       var $xeCascader = this;
       var props = $xeCascader;
       return Object.assign({}, (0, _ui.getConfig)().cascader.remoteConfig, props.remoteConfig);
     },
-    computeFilterOpts: function computeFilterOpts() {
+    computeSelectVals: function computeSelectVals() {
       var $xeCascader = this;
       var props = $xeCascader;
-      var treeOpts = $xeCascader.computeTreeOpts;
-      return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
+      var modelValue = props.value;
+      return _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
     },
     computeSelectLabel: function computeSelectLabel() {
       var $xeCascader = this;
       var props = $xeCascader;
+      var reactData = $xeCascader.reactData;
       var internalData = $xeCascader.internalData;
-      var modelValue = props.value,
-        lazyOptions = props.lazyOptions;
-      var fullNodeMaps = internalData.fullNodeMaps;
-      var valueField = $xeCascader.computeValueField;
+      var showFullLabel = props.showFullLabel;
+      var fullOptFlag = reactData.fullOptFlag,
+        lazyOptFlag = reactData.lazyOptFlag;
+      var fullNodeMaps = internalData.fullNodeMaps,
+        lazyNodeMaps = internalData.lazyNodeMaps;
       var labelField = $xeCascader.computeLabelField;
-      var selectVals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
+      var selectVals = $xeCascader.computeSelectVals;
       return selectVals.map(function (val) {
         var cacheItem = fullNodeMaps[val];
-        if (cacheItem) {
-          return cacheItem.item[labelField];
+        if (fullOptFlag && cacheItem) {
+          return showFullLabel ? cacheItem.fullLabel : cacheItem.item[labelField];
         }
-        if (lazyOptions) {
-          var lazyItem = lazyOptions.find(function (item) {
-            return item[valueField] === val;
-          });
-          if (lazyItem) {
-            return lazyItem[labelField];
+        if (lazyOptFlag) {
+          var lazyCacheItem = lazyNodeMaps[val];
+          if (lazyCacheItem) {
+            return showFullLabel ? lazyCacheItem.fullLabel : lazyCacheItem.item[labelField];
           }
         }
         return val;
@@ -308,18 +340,31 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     computePopupWrapperStyle: function computePopupWrapperStyle() {
       var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var currentCunkList = reactData.currentCunkList,
+        panelStyle = reactData.panelStyle;
       var popupOpts = $xeCascader.computePopupOpts;
       var height = popupOpts.height,
-        width = popupOpts.width;
-      var stys = {};
-      if (width) {
-        stys.width = (0, _dom.toCssUnit)(width);
-      }
+        nodeWidth = popupOpts.nodeWidth,
+        nodeHeight = popupOpts.nodeHeight;
+      var 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;
+    },
+    computeFilterOpts: function computeFilterOpts() {
+      var $xeCascader = this;
+      var props = $xeCascader;
+      return Object.assign({}, (0, _ui.getConfig)().cascader.filterConfig, props.filterConfig);
     }
   }),
   methods: {
@@ -341,53 +386,384 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeCascader.$emit('model-value', value);
       }
     },
-    getNodeid: function getNodeid(option) {
+    getNodeId: function getNodeId(node) {
       var $xeCascader = this;
-      var nodeKeyField = $xeCascader.computeNodeKeyField;
-      var nodeid = option[nodeKeyField];
-      return nodeid ? encodeURIComponent(nodeid) : '';
+      if (!node) {
+        return '';
+      }
+      var valueField = $xeCascader.computeValueField;
+      var nodeKey = node[valueField];
+      return (0, _util.enNodeValue)(nodeKey);
     },
-    cacheDataMap: function cacheDataMap() {
+    isCheckedByCheckboxNodeId: function isCheckedByCheckboxNodeId(nodeid) {
       var $xeCascader = this;
-      var props = $xeCascader;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var updateCheckboxFlag = reactData.updateCheckboxFlag;
+      var selectCheckboxMaps = internalData.selectCheckboxMaps;
+      return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+    },
+    handleCheckedCheckboxNode: function handleCheckedCheckboxNode(nodeList, checked) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
       var internalData = $xeCascader.internalData;
-      var options = props.options;
-      var nodeKeyField = $xeCascader.computeNodeKeyField;
+      var selectCheckboxMaps = internalData.selectCheckboxMaps;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
       var childrenField = $xeCascader.computeChildrenField;
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var checkStrictly = checkboxOpts.checkStrictly;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var handleSelect = function handleSelect(node) {
+        var nodeid = $xeCascader.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++;
+      $xeCascader.updateCheckboxStatus();
+    },
+    createNode: function createNode(records) {
+      var $xeCascader = this;
       var valueField = $xeCascader.computeValueField;
-      var nodeMaps = {};
-      var keyMaps = {};
-      _xeUtils.default.eachTree(options, function (item, index, items, path, parent, nodes) {
-        var nodeid = $xeCascader.getNodeid(item);
+      return Promise.resolve(records.map(function (obj) {
+        var item = Object.assign({}, obj);
+        var nodeid = $xeCascader.getNodeId(item);
         if (!nodeid) {
-          nodeid = getOptUniqueId();
+          nodeid = getNodeUniqueId();
+          _xeUtils.default.set(item, valueField, nodeid);
         }
-        if (keyMaps[nodeid]) {
-          (0, _log.errLog)('vxe.error.repeatKey', ["[tree-select] ".concat(nodeKeyField), nodeid]);
-        }
-        keyMaps[nodeid] = true;
-        var value = item[valueField];
-        if (nodeMaps[value]) {
-          (0, _log.errLog)('vxe.error.repeatKey', ["[tree-select] ".concat(valueField), value]);
+        return item;
+      }));
+    },
+    cacheNodeMap: function cacheNodeMap() {
+      var $xeCascader = this;
+      var props = $xeCascader;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var separator = props.separator;
+      var treeFullData = internalData.treeFullData;
+      var valueField = $xeCascader.computeValueField;
+      var labelField = $xeCascader.computeLabelField;
+      var childrenField = $xeCascader.computeChildrenField;
+      var keyMaps = {};
+      var fullMaps = {};
+      _xeUtils.default.eachTree(treeFullData, function (item, index, items, path, parenItem, nodes) {
+        var nodeid = $xeCascader.getNodeId(item);
+        if (!nodeid) {
+          nodeid = getNodeUniqueId();
+          item[valueField] = nodeid;
         }
-        nodeMaps[value] = {
+        var nodeVal = item[valueField];
+        var itemRest = {
           item: item,
           index: index,
+          $index: -1,
+          _index: -1,
           items: items,
-          parent: parent,
-          nodes: nodes
+          parent: parenItem,
+          nodes: nodes,
+          level: nodes.length - 1,
+          treeIndex: index,
+          lineCount: 0,
+          treeLoaded: false,
+          fullLabel: nodes.map(function (item) {
+            return item[labelField];
+          }).join(separator || ' / ')
         };
+        keyMaps[nodeid] = itemRest;
+        fullMaps[nodeVal] = itemRest;
       }, {
         children: childrenField
       });
-      internalData.fullOptionList = options || [];
-      internalData.fullNodeMaps = nodeMaps;
+      internalData.nodeMaps = keyMaps;
+      internalData.fullNodeMaps = fullMaps;
+      reactData.fullOptFlag++;
     },
-    updateZindex: function updateZindex() {
+    updateAfterDataIndex: function updateAfterDataIndex() {
       var $xeCascader = this;
       var props = $xeCascader;
+      var internalData = $xeCascader.internalData;
+      var separator = props.separator;
+      var afterTreeList = internalData.afterTreeList,
+        nodeMaps = internalData.nodeMaps;
+      var labelField = $xeCascader.computeLabelField;
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var vtIndex = 0;
+      _xeUtils.default.eachTree(afterTreeList, function (item, index, items, path, parenItem, nodes) {
+        var nodeid = $xeCascader.getNodeId(item);
+        var nodeItem = nodeMaps[nodeid];
+        if (nodeItem) {
+          nodeItem.items = items;
+          nodeItem.treeIndex = index;
+          nodeItem._index = vtIndex;
+        } else {
+          var rest = {
+            item: item,
+            index: index,
+            $index: -1,
+            _index: vtIndex,
+            items: items,
+            parent: parenItem,
+            nodes: nodes,
+            level: nodes.length - 1,
+            treeIndex: index,
+            lineCount: 0,
+            treeLoaded: false,
+            fullLabel: nodes.map(function (item) {
+              return item[labelField];
+            }).join(separator || ' / ')
+          };
+          nodeMaps[nodeid] = rest;
+        }
+        vtIndex++;
+      }, {
+        children: transform ? mapChildrenField : childrenField
+      });
+    },
+    updateAfterFullData: function updateAfterFullData() {
+      var $xeCascader = this;
       var reactData = $xeCascader.reactData;
-      var zIndex = props.zIndex;
+      var internalData = $xeCascader.internalData;
+      var searchValue = reactData.searchValue;
+      var treeFullData = internalData.treeFullData,
+        lastFilterValue = internalData.lastFilterValue;
+      var labelField = $xeCascader.computeLabelField;
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var filterOpts = $xeCascader.computeFilterOpts;
+      var beforeFilterMethod = filterOpts.beforeFilterMethod,
+        filterMethod = filterOpts.filterMethod,
+        afterFilterMethod = filterOpts.afterFilterMethod;
+      var fullList = treeFullData;
+      var treeList = fullList;
+      var filterStr = '';
+      if (searchValue) {
+        filterStr = "".concat(searchValue);
+        var handleSearch = filterMethod ? function (item) {
+          return filterMethod({
+            $cascader: $xeCascader,
+            node: item,
+            filterValue: filterStr
+          });
+        } : function (item) {
+          return String(item[labelField]).toLowerCase().indexOf(filterStr.toLowerCase()) > -1;
+        };
+        var bafParams = {
+          $cascader: $xeCascader,
+          filterValue: filterStr
+        };
+        if (beforeFilterMethod) {
+          beforeFilterMethod(bafParams);
+        }
+        if (transform) {
+          treeList = _xeUtils.default.searchTree(treeFullData, handleSearch, {
+            original: true,
+            isEvery: true,
+            children: childrenField,
+            mapChildren: mapChildrenField
+          });
+          fullList = treeList;
+        } else {
+          fullList = treeFullData.filter(handleSearch);
+        }
+        internalData.lastFilterValue = filterStr;
+        $xeCascader.$nextTick(function () {
+          if (afterFilterMethod) {
+            afterFilterMethod(bafParams);
+          }
+        });
+      } else {
+        if (transform) {
+          treeList = _xeUtils.default.searchTree(treeFullData, function () {
+            return true;
+          }, {
+            original: true,
+            isEvery: true,
+            children: childrenField,
+            mapChildren: mapChildrenField
+          });
+          fullList = treeList;
+          if (lastFilterValue) {
+            var _bafParams = {
+              $cascader: $xeCascader,
+              filterValue: filterStr
+            };
+            if (beforeFilterMethod) {
+              beforeFilterMethod(_bafParams);
+            }
+            // 取消筛选时自动收起
+            $xeCascader.$nextTick(function () {
+              if (afterFilterMethod) {
+                afterFilterMethod(_bafParams);
+              }
+            });
+          }
+        }
+        internalData.lastFilterValue = '';
+      }
+      internalData.afterVisibleList = fullList;
+      internalData.afterTreeList = treeList;
+      $xeCascader.updateAfterDataIndex();
+    },
+    /**
+     * 如果为虚拟树、则将树结构拍平
+     */
+    handleTreeToList: function handleTreeToList() {
+      var $xeCascader = this;
+      var internalData = $xeCascader.internalData;
+      var afterTreeList = internalData.afterTreeList,
+        treeExpandedMaps = internalData.treeExpandedMaps;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var expandMaps = {};
+      if (transform) {
+        var fullData = [];
+        _xeUtils.default.eachTree(afterTreeList, function (item, index, items, path, parentRow) {
+          var nodeid = $xeCascader.getNodeId(item);
+          var parentNodeid = $xeCascader.getNodeId(parentRow);
+          if (!parentRow || expandMaps[parentNodeid] && treeExpandedMaps[parentNodeid]) {
+            expandMaps[nodeid] = 1;
+            fullData.push(item);
+          }
+        }, {
+          children: mapChildrenField
+        });
+        internalData.afterVisibleList = fullData;
+        return fullData;
+      }
+      return internalData.afterVisibleList;
+    },
+    handleData: function handleData(force) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var nodeMaps = internalData.nodeMaps;
+      var fullList = internalData.afterVisibleList;
+      if (force) {
+        // 更新数据，处理筛选和排序
+        $xeCascader.updateAfterFullData();
+        // 如果为虚拟树，将树结构拍平
+        fullList = $xeCascader.handleTreeToList();
+      }
+      var treeList = fullList.slice(0);
+      treeList.forEach(function (item, $index) {
+        var nodeid = $xeCascader.getNodeId(item);
+        var itemRest = nodeMaps[nodeid];
+        if (itemRest) {
+          itemRest.$index = $index;
+        }
+      });
+      reactData.treeList = treeList;
+    },
+    triggerSearchEvent: _xeUtils.default.debounce(function () {
+      var $xeCascader = this;
+      $xeCascader.handleData(true);
+    }, 350, {
+      trailing: true
+    }),
+    loadData: function loadData(list) {
+      var $xeCascader = this;
+      var internalData = $xeCascader.internalData;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var keyField = $xeCascader.computeKeyField;
+      var parentField = $xeCascader.computeParentField;
+      var childrenField = $xeCascader.computeChildrenField;
+      var rootParentValue = treeOpts.rootParentValue,
+        rootValues = treeOpts.rootValues;
+      var transform = treeOpts.transform;
+      var fullData = transform ? _xeUtils.default.toArrayTree(list, {
+        key: keyField,
+        parentKey: parentField,
+        mapChildren: childrenField,
+        rootParentValue: rootParentValue,
+        rootValues: rootValues
+      }) : list ? list.slice(0) : [];
+      internalData.treeFullData = fullData;
+      $xeCascader.cacheNodeMap();
+      $xeCascader.handleData(true);
+      $xeCascader.handleCurrentItems();
+      $xeCascader.updateCurrentChunk();
+      return $xeCascader.$nextTick();
+    },
+    updateCurrentChunk: function updateCurrentChunk() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var currentItems = reactData.currentItems;
+      var treeFullData = internalData.treeFullData;
+      var childrenField = $xeCascader.computeChildrenField;
+      var currentCunkList = [treeFullData];
+      if (currentItems.length) {
+        var chunkIndex = 0;
+        var stNodeid = currentItems[chunkIndex];
+        var optList = treeFullData;
+        while (stNodeid && optList && optList.length) {
+          stNodeid = currentItems[chunkIndex++];
+          var currOption = optList.find(function (item) {
+            return stNodeid === $xeCascader.getNodeId(item);
+          });
+          optList = currOption ? currOption[childrenField] : [];
+          if (!optList || !optList.length) {
+            break;
+          }
+          currentCunkList.push(optList);
+        }
+      }
+      reactData.currentCunkList = currentCunkList;
+    },
+    handleCurrentItems: function handleCurrentItems() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var treeFullData = internalData.treeFullData;
+      var selectVals = $xeCascader.computeSelectVals;
+      var childrenField = $xeCascader.computeChildrenField;
+      var stItems = [];
+      var expandedMaps = {};
+      if (selectVals.length) {
+        var lastVal = _xeUtils.default.last(selectVals);
+        var stRest = _xeUtils.default.findTree(treeFullData, function (item) {
+          return lastVal === $xeCascader.getNodeId(item);
+        }, {
+          children: childrenField
+        });
+        if (stRest) {
+          var nodes = stRest.nodes;
+          nodes.forEach(function (item) {
+            var nodeid = $xeCascader.getNodeId(item);
+            expandedMaps[nodeid] = true;
+            stItems.push(nodeid);
+          });
+        }
+      }
+      internalData.treeExpandedMaps = expandedMaps;
+      reactData.currentItems = stItems;
+    },
+    updateZindex: function updateZindex() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var popupOpts = $xeCascader.computePopupOpts;
+      var zIndex = popupOpts.zIndex;
       if (zIndex) {
         reactData.panelIndex = zIndex;
       } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
@@ -396,9 +772,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     updatePlacement: function updatePlacement() {
       var $xeCascader = this;
-      var props = $xeCascader;
       var reactData = $xeCascader.reactData;
-      var placement = props.placement;
       var panelIndex = reactData.panelIndex;
       var targetElem = $xeCascader.$refs.refElem;
       var panelElem = $xeCascader.$refs.refOptionPanel;
@@ -406,9 +780,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var popupOpts = $xeCascader.computePopupOpts;
       var handleStyle = function handleStyle() {
         var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
+          placement: popupOpts.placement,
           defaultPlacement: popupOpts.defaultPlacement,
-          teleportTo: btnTransfer
+          teleportTo: btnTransfer,
+          isMinWidth: false
         });
         var panelStyle = Object.assign(ppObj.style, {
           zIndex: panelIndex
@@ -419,7 +794,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       handleStyle();
       return $xeCascader.$nextTick().then(handleStyle);
     },
-    showOptionPanel: function showOptionPanel() {
+    showOptionPanel: function showOptionPanel(evnt) {
       var $xeCascader = this;
       var props = $xeCascader;
       var reactData = $xeCascader.reactData;
@@ -427,13 +802,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var loading = props.loading,
         remote = props.remote,
         filterable = props.filterable;
-      var fullOptionList = internalData.fullOptionList;
+      var treeFullData = internalData.treeFullData;
       var isDisabled = $xeCascader.computeIsDisabled;
       var remoteOpts = $xeCascader.computeRemoteOpts;
       if (!loading && !isDisabled) {
-        if (internalData.hpTimeout) {
-          clearTimeout(internalData.hpTimeout);
-        }
+        clearTimeout(internalData.hpTimeout);
         if (!reactData.initialized) {
           reactData.initialized = true;
           var btnTransfer = $xeCascader.computeBtnTransfer;
@@ -447,7 +820,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         reactData.isActivated = true;
         reactData.isAniVisible = true;
         if (filterable) {
-          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullOptionList.length) {
+          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !treeFullData.length) {
             $xeCascader.handleSearchEvent();
           }
         }
@@ -457,9 +830,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }, 10);
         $xeCascader.updateZindex();
         $xeCascader.updatePlacement();
+        $xeCascader.dispatchEvent('visible-change', {
+          visible: true
+        }, evnt || null);
       }
     },
-    hideOptionPanel: function hideOptionPanel() {
+    hideOptionPanel: function hideOptionPanel(evnt) {
       var $xeCascader = this;
       var reactData = $xeCascader.reactData;
       var internalData = $xeCascader.internalData;
@@ -467,6 +843,62 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       internalData.hpTimeout = setTimeout(function () {
         reactData.isAniVisible = false;
       }, 350);
+      $xeCascader.dispatchEvent('visible-change', {
+        visible: false
+      }, evnt || null);
+    },
+    setCurrentNode: function setCurrentNode(node) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      reactData.currentNode = node;
+      return $xeCascader.$nextTick();
+    },
+    setAllCheckboxNode: function setAllCheckboxNode(checked) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var selectMaps = {};
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var checkKeys = [];
+      var checkNodes = [];
+      if (checked) {
+        _xeUtils.default.eachTree(internalData.afterTreeList, function (node) {
+          var nodeid = $xeCascader.getNodeId(node);
+          checkKeys.push(nodeid);
+          checkNodes.push(node);
+          selectMaps[nodeid] = true;
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+      }
+      internalData.indeterminateRowMaps = {};
+      internalData.selectCheckboxMaps = selectMaps;
+      reactData.updateCheckboxFlag++;
+      $xeCascader.updateCheckboxStatus();
+      return $xeCascader.$nextTick().then(function () {
+        return {
+          checkNodeKeys: checkKeys,
+          checkNodes: checkNodes
+        };
+      });
+    },
+    clearCheckboxNode: function clearCheckboxNode() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      internalData.indeterminateRowMaps = {};
+      internalData.selectCheckboxMaps = {};
+      reactData.updateCheckboxFlag++;
+      $xeCascader.updateCheckboxStatus();
+      return $xeCascader.$nextTick().then(function () {
+        return {
+          checkNodeKeys: [],
+          checkNodes: []
+        };
+      });
     },
     changeEvent: function changeEvent(evnt, selectValue, node) {
       var $xeCascader = this;
@@ -497,29 +929,26 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     clearEvent: function clearEvent(params, evnt) {
       var $xeCascader = this;
       $xeCascader.clearValueEvent(evnt, null);
-      $xeCascader.hideOptionPanel();
+      $xeCascader.hideOptionPanel(evnt);
     },
     allCheckedPanelEvent: function allCheckedPanelEvent(params) {
       var $xeCascader = this;
       var props = $xeCascader;
       var $event = params.$event;
       var multiple = props.multiple,
-        autoClose = props.autoClose;
-      var $tree = $xeCascader.$refs.refTree;
+        checkedClosable = props.checkedClosable;
       if (multiple) {
-        if ($tree) {
-          $tree.setAllCheckboxNode(true).then(function (_ref) {
-            var checkNodeKeys = _ref.checkNodeKeys,
-              checkNodes = _ref.checkNodes;
-            $xeCascader.changeEvent($event, checkNodeKeys, checkNodes[0]);
-            $xeCascader.dispatchEvent('all-change', {
-              value: checkNodeKeys
-            }, $event);
-            if (autoClose) {
-              $xeCascader.hideOptionPanel();
-            }
-          });
-        }
+        $xeCascader.setAllCheckboxNode(true).then(function (_ref) {
+          var checkNodeKeys = _ref.checkNodeKeys,
+            checkNodes = _ref.checkNodes;
+          $xeCascader.changeEvent($event, checkNodeKeys, checkNodes[0]);
+          $xeCascader.dispatchEvent('all-change', {
+            value: checkNodeKeys
+          }, $event);
+          if (checkedClosable) {
+            $xeCascader.hideOptionPanel($event);
+          }
+        });
       }
     },
     clearCheckedPanelEvent: function clearCheckedPanelEvent(params) {
@@ -527,34 +956,22 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var props = $xeCascader;
       var $event = params.$event;
       var multiple = props.multiple,
-        autoClose = props.autoClose;
-      var $tree = $xeCascader.$refs.refTree;
-      if ($tree) {
-        var value = multiple ? [] : null;
-        $tree.clearCheckboxNode().then(function () {
-          if (autoClose) {
-            $xeCascader.hideOptionPanel();
-          }
-        });
-        $xeCascader.changeEvent($event, value, null);
-        $xeCascader.dispatchEvent('clear', {
-          value: value
-        }, $event);
-      }
-    },
-    allExpandPanelEvent: function allExpandPanelEvent() {
-      var $xeCascader = this;
-      var $tree = $xeCascader.$refs.refTree;
-      if ($tree) {
-        $tree.setAllExpandNode(true);
-      }
+        checkedClosable = props.checkedClosable;
+      var value = multiple ? [] : null;
+      $xeCascader.clearCheckboxNode().then(function () {
+        if (checkedClosable) {
+          $xeCascader.hideOptionPanel($event);
+        }
+      });
+      $xeCascader.changeEvent($event, value, null);
+      $xeCascader.dispatchEvent('clear', {
+        value: value
+      }, $event);
     },
-    clearExpandPanelEvent: function clearExpandPanelEvent() {
+    closePanelEvent: function closePanelEvent(params) {
       var $xeCascader = this;
-      var $tree = $xeCascader.$refs.refTree;
-      if ($tree) {
-        $tree.clearAllExpandNode();
-      }
+      var $event = params.$event;
+      $xeCascader.hideOptionPanel($event);
     },
     handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
       var $xeCascader = this;
@@ -567,7 +984,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
             $xeCascader.updatePlacement();
           } else {
-            $xeCascader.hideOptionPanel();
+            $xeCascader.hideOptionPanel(evnt);
           }
         }
       }
@@ -582,17 +999,17 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var panelElem = $xeCascader.$refs.refOptionPanel;
         reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
         if (visiblePanel && !reactData.isActivated) {
-          $xeCascader.hideOptionPanel();
+          $xeCascader.hideOptionPanel(evnt);
         }
       }
     },
-    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+    handleGlobalBlurEvent: function handleGlobalBlurEvent(evnt) {
       var $xeCascader = this;
       var reactData = $xeCascader.reactData;
       var visiblePanel = reactData.visiblePanel,
         isActivated = reactData.isActivated;
       if (visiblePanel) {
-        $xeCascader.hideOptionPanel();
+        $xeCascader.hideOptionPanel(evnt);
       }
       if (isActivated) {
         reactData.isActivated = false;
@@ -613,17 +1030,421 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
     },
     handleFocusSearch: function handleFocusSearch() {
-      var $xeSelect = this;
-      var props = $xeSelect;
+      var $xeCascader = this;
+      var props = $xeCascader;
       if (props.filterable) {
-        $xeSelect.$nextTick(function () {
-          var inpSearch = $xeSelect.$refs.refInpSearch;
+        $xeCascader.$nextTick(function () {
+          var inpSearch = $xeCascader.$refs.refInpSearch;
           if (inpSearch) {
             inpSearch.focus();
           }
         });
       }
     },
+    changeCurrentEvent: function changeCurrentEvent(evnt, node) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      evnt.preventDefault();
+      var isChecked = true;
+      reactData.currentNode = node;
+      $xeCascader.dispatchEvent('current-change', {
+        node: node,
+        checked: isChecked
+      }, evnt);
+    },
+    changeRadioEvent: function changeRadioEvent(evnt, node) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      var nodeMaps = internalData.nodeMaps;
+      var radioOpts = $xeCascader.computeRadioOpts;
+      var childrenField = $xeCascader.computeChildrenField;
+      var checkMode = radioOpts.checkMode,
+        checkMethod = radioOpts.checkMethod;
+      var nodeid = $xeCascader.getNodeId(node);
+      var childList = node[childrenField];
+      var isExistChild = childList && childList.length > 0;
+      var nodeItem = nodeMaps[nodeid] || {};
+      var nLevel = nodeItem.level;
+      var isDisabled = checkMethod ? !checkMethod({
+        $cascader: $xeCascader,
+        node: node
+      }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+      if (isDisabled) {
+        return;
+      }
+      var value = nodeid;
+      reactData.selectRadioKey = value;
+      $xeCascader.changeEvent(evnt, value, node);
+      $xeCascader.hideOptionPanel(evnt);
+    },
+    handleAsyncTreeExpandChilds: function handleAsyncTreeExpandChilds(node) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var loadMethod = treeOpts.loadMethod;
+      var checkStrictly = checkboxOpts.checkStrictly;
+      return new Promise(function (resolve) {
+        if (loadMethod) {
+          var nodeMaps = internalData.nodeMaps;
+          var nodeid = $xeCascader.getNodeId(node);
+          var nodeItem = nodeMaps[nodeid];
+          internalData.treeExpandLazyLoadedMaps[nodeid] = true;
+          Promise.resolve(loadMethod({
+            $cascader: $xeCascader,
+            node: node
+          })).then(function (childRecords) {
+            var treeExpandLazyLoadedMaps = internalData.treeExpandLazyLoadedMaps;
+            nodeItem.treeLoaded = true;
+            if (treeExpandLazyLoadedMaps[nodeid]) {
+              treeExpandLazyLoadedMaps[nodeid] = false;
+            }
+            if (!_xeUtils.default.isArray(childRecords)) {
+              childRecords = [];
+            }
+            if (childRecords) {
+              return $xeCascader.loadChildrenNode(node, childRecords).then(function (childRows) {
+                var treeExpandedMaps = internalData.treeExpandedMaps;
+                if (childRows.length && !treeExpandedMaps[nodeid]) {
+                  treeExpandedMaps[nodeid] = true;
+                }
+                reactData.updateExpandedFlag++;
+                // 如果当前节点已选中，则展开后子节点也被选中
+                if (!checkStrictly && $xeCascader.isCheckedByCheckboxNodeId(nodeid)) {
+                  $xeCascader.handleCheckedCheckboxNode(childRows, true);
+                }
+                $xeCascader.dispatchEvent('load-success', {
+                  node: node,
+                  data: childRecords
+                }, new Event('load-success'));
+                return $xeCascader.$nextTick();
+              });
+            } else {
+              $xeCascader.dispatchEvent('load-success', {
+                node: node,
+                data: childRecords
+              }, new Event('load-success'));
+            }
+          }).catch(function (e) {
+            var treeExpandLazyLoadedMaps = internalData.treeExpandLazyLoadedMaps;
+            nodeItem.treeLoaded = false;
+            if (treeExpandLazyLoadedMaps[nodeid]) {
+              treeExpandLazyLoadedMaps[nodeid] = false;
+            }
+            $xeCascader.dispatchEvent('load-error', {
+              node: node,
+              data: e
+            }, new Event('load-error'));
+          }).finally(function () {
+            $xeCascader.handleTreeToList();
+            $xeCascader.handleData();
+          });
+        } else {
+          resolve();
+        }
+      });
+    },
+    /**
+     * 展开与收起树节点
+     * @param nodeList
+     * @param expanded
+     * @returns
+     */
+    handleBaseTreeExpand: function handleBaseTreeExpand(nodeList, expanded) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var treeExpandLazyLoadedMaps = internalData.treeExpandLazyLoadedMaps,
+        treeExpandedMaps = internalData.treeExpandedMaps;
+      var nodeMaps = internalData.nodeMaps;
+      var childrenField = $xeCascader.computeChildrenField;
+      var hasChildField = $xeCascader.computeHasChildField;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var lazy = treeOpts.lazy,
+        toggleMethod = treeOpts.toggleMethod;
+      var result = [];
+      var validNodes = toggleMethod ? nodeList.filter(function (node) {
+        return toggleMethod({
+          $cascader: $xeCascader,
+          expanded: expanded,
+          node: node
+        });
+      }) : nodeList;
+      validNodes = validNodes.length ? [validNodes[validNodes.length - 1]] : [];
+      // 同一级只能展开一个
+      var nodeid = $xeCascader.getNodeId(validNodes[0]);
+      var nodeItem = nodeMaps[nodeid];
+      if (nodeItem) {
+        nodeItem.items.forEach(function (item) {
+          var itemNodeId = $xeCascader.getNodeId(item);
+          if (treeExpandedMaps[itemNodeId]) {
+            delete treeExpandedMaps[itemNodeId];
+          }
+        });
+      }
+      var expandNodes = [];
+      if (expanded) {
+        validNodes.forEach(function (item) {
+          var itemNodeId = $xeCascader.getNodeId(item);
+          if (!treeExpandedMaps[itemNodeId]) {
+            var _nodeItem = nodeMaps[itemNodeId];
+            var isLoad = lazy && item[hasChildField] && !_nodeItem.treeLoaded && !treeExpandLazyLoadedMaps[itemNodeId];
+            // 是否使用懒加载
+            if (isLoad) {
+              result.push($xeCascader.handleAsyncTreeExpandChilds(item));
+            } else {
+              if (item[childrenField] && item[childrenField].length) {
+                treeExpandedMaps[itemNodeId] = true;
+                expandNodes.push(item);
+              }
+            }
+          }
+        });
+      } else {
+        validNodes.forEach(function (item) {
+          var itemNodeId = $xeCascader.getNodeId(item);
+          if (treeExpandedMaps[itemNodeId]) {
+            delete treeExpandedMaps[itemNodeId];
+            expandNodes.push(item);
+          }
+        });
+      }
+      reactData.updateExpandedFlag++;
+      $xeCascader.handleTreeToList();
+      $xeCascader.handleData();
+      return Promise.all(result);
+    },
+    toggleExpandEvent: function toggleExpandEvent(evnt, node, chunks, chunkIndex) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var currentItems = reactData.currentItems;
+      var treeExpandLazyLoadedMaps = internalData.treeExpandLazyLoadedMaps;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var lazy = treeOpts.lazy;
+      var stItems = currentItems.slice(0, chunkIndex);
+      var nodeid = $xeCascader.getNodeId(node);
+      var expanded = true;
+      evnt.stopPropagation();
+      stItems.push(nodeid);
+      reactData.currentItems = stItems;
+      if (!lazy || !treeExpandLazyLoadedMaps[nodeid]) {
+        $xeCascader.handleBaseTreeExpand([node], expanded);
+      }
+      $xeCascader.setCurrentNode(node);
+      $xeCascader.updateCurrentChunk();
+      $xeCascader.dispatchEvent('node-expand', {
+        node: node,
+        expanded: expanded
+      }, evnt);
+    },
+    updateCheckboxStatus: function updateCheckboxStatus() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var selectCheckboxMaps = internalData.selectCheckboxMaps,
+        indeterminateRowMaps = internalData.indeterminateRowMaps,
+        afterTreeList = internalData.afterTreeList;
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var checkStrictly = checkboxOpts.checkStrictly,
+        checkMethod = checkboxOpts.checkMethod;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      if (!checkStrictly) {
+        var childRowMaps = {};
+        var childRowList = [];
+        _xeUtils.default.eachTree(afterTreeList, function (node) {
+          var nodeid = $xeCascader.getNodeId(node);
+          var childList = node[childrenField];
+          if (childList && childList.length && !childRowMaps[nodeid]) {
+            childRowMaps[nodeid] = 1;
+            childRowList.unshift([node, nodeid, childList]);
+          }
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+        childRowList.forEach(function (vals) {
+          var node = vals[0];
+          var nodeid = vals[1];
+          var childList = vals[2];
+          var sLen = 0; // 已选
+          var hLen = 0; // 半选
+          var vLen = 0; // 有效子行
+          var cLen = childList.length; // 子行
+          childList.forEach(checkMethod ? function (item) {
+            var childNodeid = $xeCascader.getNodeId(item);
+            var 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++;
+              }
+            }
+          } : function (item) {
+            var childNodeid = $xeCascader.getNodeId(item);
+            var isSelect = selectCheckboxMaps[childNodeid];
+            if (isSelect) {
+              sLen++;
+            } else if (indeterminateRowMaps[childNodeid]) {
+              hLen++;
+            }
+            vLen++;
+          });
+          var 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];
+          }
+          var 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++;
+      }
+    },
+    changeCheckboxEvent: function changeCheckboxEvent(evnt, node) {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      var selectCheckboxMaps = internalData.selectCheckboxMaps,
+        nodeMaps = internalData.nodeMaps;
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var checkStrictly = checkboxOpts.checkStrictly,
+        checkMode = checkboxOpts.checkMode,
+        checkMethod = checkboxOpts.checkMethod;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var transform = treeOpts.transform;
+      var nodeid = $xeCascader.getNodeId(node);
+      var childList = node[childrenField];
+      var isExistChild = childList && childList.length > 0;
+      var nodeItem = nodeMaps[nodeid] || {};
+      var nLevel = nodeItem.level;
+      var isDisabled = checkMethod ? !checkMethod({
+        $cascader: $xeCascader,
+        node: node
+      }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+      if (isDisabled) {
+        return;
+      }
+      var 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), function (childNode) {
+          var childNodeid = $xeCascader.getNodeId(childNode);
+          if (isChecked) {
+            if (!selectCheckboxMaps[childNodeid]) {
+              selectCheckboxMaps[childNodeid] = true;
+            }
+          } else {
+            if (selectCheckboxMaps[childNodeid]) {
+              delete selectCheckboxMaps[childNodeid];
+            }
+          }
+        }, {
+          children: transform ? mapChildrenField : childrenField
+        });
+      }
+      reactData.updateCheckboxFlag++;
+      $xeCascader.updateCheckboxStatus();
+      var nodeids = _xeUtils.default.keys(selectCheckboxMaps);
+      var value = nodeids;
+      $xeCascader.changeEvent(evnt, value, node);
+    },
+    handleNodeClickEvent: function handleNodeClickEvent(evnt, node, chunks, chunkIndex) {
+      var $xeCascader = this;
+      var props = $xeCascader;
+      var multiple = props.multiple;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var radioOpts = $xeCascader.computeRadioOpts;
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var transform = treeOpts.transform,
+        trigger = treeOpts.trigger;
+      var childList = node[transform ? mapChildrenField : childrenField];
+      var triggerCurrent = false;
+      var triggerRadio = false;
+      var triggerCheckbox = false;
+      var triggerExpand = false;
+      triggerCurrent = true;
+      $xeCascader.changeCurrentEvent(evnt, node);
+      if (trigger !== 'icon') {
+        triggerExpand = true;
+        $xeCascader.toggleExpandEvent(evnt, node, chunks, chunkIndex);
+      }
+      if (multiple) {
+        if (checkboxOpts.trigger === 'node' || !checkboxOpts.showIcon && (!childList || !childList.length)) {
+          triggerCheckbox = true;
+          $xeCascader.changeCheckboxEvent(evnt, node);
+        }
+      } else {
+        if (radioOpts.trigger === 'node' || !radioOpts.showIcon && (!childList || !childList.length)) {
+          triggerRadio = true;
+          $xeCascader.changeRadioEvent(evnt, node);
+        }
+      }
+      $xeCascader.dispatchEvent('node-click', {
+        node: node,
+        triggerCurrent: triggerCurrent,
+        triggerRadio: triggerRadio,
+        triggerCheckbox: triggerCheckbox,
+        triggerExpand: triggerExpand
+      }, evnt);
+    },
     focusEvent: function focusEvent(evnt) {
       var $xeCascader = this;
       var reactData = $xeCascader.reactData;
@@ -631,7 +1452,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       if (!isDisabled) {
         if (!reactData.visiblePanel) {
           reactData.triggerFocusPanel = true;
-          $xeCascader.showOptionPanel();
+          $xeCascader.showOptionPanel(evnt);
           setTimeout(function () {
             reactData.triggerFocusPanel = false;
           }, 150);
@@ -641,7 +1462,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     clickEvent: function clickEvent(evnt) {
       var $xeCascader = this;
-      $xeCascader.togglePanelEvent(evnt);
+      var reactData = $xeCascader.reactData;
+      evnt.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (!reactData.visiblePanel) {
+          $xeCascader.showOptionPanel(evnt);
+        }
+      }
       $xeCascader.dispatchEvent('click', {}, evnt);
     },
     blurEvent: function blurEvent(evnt) {
@@ -654,17 +1483,17 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeCascader = this;
       var reactData = $xeCascader.reactData;
       reactData.searchValue = value;
+      $xeCascader.triggerSearchEvent(new Event('filter'));
     },
     handleSearchEvent: function handleSearchEvent() {
       var $xeCascader = this;
       var props = $xeCascader;
       var reactData = $xeCascader.reactData;
       var modelValue = props.value,
-        remote = props.remote,
-        remoteMethod = props.remoteMethod;
+        remote = props.remote;
       var searchValue = reactData.searchValue;
       var remoteOpts = $xeCascader.computeRemoteOpts;
-      var queryMethod = remoteOpts.queryMethod || remoteMethod;
+      var queryMethod = remoteOpts.queryMethod;
       if (remote && queryMethod && remoteOpts.enabled) {
         reactData.searchLoading = true;
         Promise.resolve(queryMethod({
@@ -689,44 +1518,237 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         reactData.triggerFocusPanel = false;
       } else {
         if (reactData.visiblePanel) {
-          $xeCascader.hideOptionPanel();
+          $xeCascader.hideOptionPanel($event);
         } else {
-          $xeCascader.showOptionPanel();
+          $xeCascader.showOptionPanel($event);
         }
       }
     },
-    nodeClickEvent: function nodeClickEvent(params) {
+    /**
+       * 用于树结构，给行数据加载子节点
+       */
+    loadChildrenNode: function loadChildrenNode(node, childRecords) {
       var $xeCascader = this;
-      var $event = params.$event;
-      $xeCascader.dispatchEvent('node-click', params, $event);
+      var props = $xeCascader;
+      var internalData = $xeCascader.internalData;
+      var separator = props.separator;
+      var nodeMaps = internalData.nodeMaps;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var labelField = $xeCascader.computeLabelField;
+      var lazy = treeOpts.lazy,
+        transform = treeOpts.transform;
+      if (!lazy) {
+        return Promise.resolve([]);
+      }
+      var childrenField = $xeCascader.computeChildrenField;
+      var mapChildrenField = $xeCascader.computeMapChildrenField;
+      var parentNodeItem = nodeMaps[$xeCascader.getNodeId(node)];
+      var parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+      var parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+      return $xeCascader.createNode(childRecords).then(function (nodeList) {
+        _xeUtils.default.eachTree(nodeList, function (childRow, index, items, path, parent, nodes) {
+          var itemNodeId = $xeCascader.getNodeId(childRow);
+          nodeMaps[itemNodeId] = {
+            item: childRow,
+            index: -1,
+            $index: -1,
+            _index: -1,
+            items: items,
+            parent: parent || parentNodeItem.item,
+            nodes: parentNodes.concat(nodes),
+            level: parentLevel + nodes.length,
+            treeIndex: -1,
+            lineCount: 0,
+            treeLoaded: false,
+            fullLabel: nodes.map(function (item) {
+              return item[labelField];
+            }).join(separator || ' / ')
+          };
+        }, {
+          children: childrenField
+        });
+        node[childrenField] = nodeList;
+        if (transform) {
+          node[mapChildrenField] = nodeList;
+        }
+        $xeCascader.updateAfterDataIndex();
+        return nodeList;
+      });
     },
-    radioChangeEvent: function radioChangeEvent(params) {
+    //
+    // Render
+    //
+    renderRadio: function renderRadio(h, node, isExistChild, nLevel, isChecked) {
       var $xeCascader = this;
-      var value = params.value,
-        $event = params.$event,
-        node = params.node;
-      $xeCascader.changeEvent($event, value, node);
-      $xeCascader.hideOptionPanel();
+      var radioOpts = $xeCascader.computeRadioOpts;
+      var showIcon = radioOpts.showIcon,
+        checkMode = radioOpts.checkMode,
+        checkMethod = radioOpts.checkMethod,
+        visibleMode = radioOpts.visibleMode,
+        visibleMethod = radioOpts.visibleMethod;
+      var isVisible = visibleMethod ? visibleMethod({
+        $cascader: $xeCascader,
+        node: node
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+      if (showIcon && isVisible) {
+        var isDisabled = checkMethod ? !checkMethod({
+          $cascader: $xeCascader,
+          node: node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+        return h('div', {
+          class: ['vxe-tree--radio-option', {
+            'is--checked': isChecked,
+            'is--disabled': isDisabled
+          }],
+          on: {
+            click: function click(evnt) {
+              if (!isDisabled) {
+                $xeCascader.changeRadioEvent(evnt, node);
+              }
+            }
+          }
+        }, [h('span', {
+          class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeCascader);
     },
-    checkboxChangeEvent: function checkboxChangeEvent(params) {
+    renderCheckbox: function renderCheckbox(h, node, isExistChild, nLevel, isChecked, isIndeterminate) {
       var $xeCascader = this;
-      var value = params.value,
-        $event = params.$event,
-        node = params.node;
-      $xeCascader.changeEvent($event, value, node);
+      var checkboxOpts = $xeCascader.computeCheckboxOpts;
+      var showIcon = checkboxOpts.showIcon,
+        checkMode = checkboxOpts.checkMode,
+        checkMethod = checkboxOpts.checkMethod,
+        visibleMode = checkboxOpts.visibleMode,
+        visibleMethod = checkboxOpts.visibleMethod;
+      var isVisible = visibleMethod ? visibleMethod({
+        $cascader: $xeCascader,
+        node: node
+      }) : handleVisibleOrCheckMode(visibleMode, isExistChild, nLevel);
+      if (showIcon && isVisible) {
+        var isDisabled = checkMethod ? !checkMethod({
+          $cascader: $xeCascader,
+          node: node
+        }) : !handleVisibleOrCheckMode(checkMode, isExistChild, nLevel);
+        return h('div', {
+          class: ['vxe-cascader--checkbox-option', {
+            'is--checked': isChecked,
+            'is--indeterminate': isIndeterminate,
+            'is--disabled': isDisabled
+          }],
+          on: {
+            click: function click(evnt) {
+              if (!isDisabled) {
+                $xeCascader.changeCheckboxEvent(evnt, node);
+              }
+            }
+          }
+        }, [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);
     },
-    loadSuccessEvent: function loadSuccessEvent() {
+    renderNode: function renderNode(h, node, nodeid, nodeIndex, chunks, chunkIndex) {
       var $xeCascader = this;
-      $xeCascader.cacheDataMap();
+      var props = $xeCascader;
+      var reactData = $xeCascader.reactData;
+      var internalData = $xeCascader.internalData;
+      var slots = $xeCascader.$scopedSlots;
+      var multiple = props.multiple;
+      var currentNode = reactData.currentNode,
+        selectRadioKey = reactData.selectRadioKey,
+        updateCheckboxFlag = reactData.updateCheckboxFlag,
+        updateExpandedFlag = reactData.updateExpandedFlag;
+      var nodeMaps = internalData.nodeMaps,
+        selectCheckboxMaps = internalData.selectCheckboxMaps,
+        indeterminateRowMaps = internalData.indeterminateRowMaps,
+        treeExpandedMaps = internalData.treeExpandedMaps,
+        treeExpandLazyLoadedMaps = internalData.treeExpandLazyLoadedMaps;
+      var treeOpts = $xeCascader.computeTreeOpts;
+      var lazy = treeOpts.lazy,
+        iconLoaded = treeOpts.iconLoaded,
+        iconOpen = treeOpts.iconOpen,
+        iconClose = treeOpts.iconClose;
+      var childrenField = $xeCascader.computeChildrenField;
+      var labelField = $xeCascader.computeLabelField;
+      var hasChildField = $xeCascader.computeHasChildField;
+      var childList = node[childrenField];
+      var isExistChild = childList && childList.length > 0;
+      var iconSlot = slots.icon;
+      var titleSlot = slots.title;
+      var isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
+      var nodeItem = nodeMaps[nodeid] || {};
+      var nodeTitle = node[labelField];
+      var nLevel = nodeItem.level;
+      var isRadioChecked = false;
+      if (!multiple) {
+        isRadioChecked = nodeid === selectRadioKey;
+      }
+      var isCheckboxChecked = false;
+      var isIndeterminate = false;
+      if (multiple) {
+        isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+        isIndeterminate = !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
+      }
+      var hasLazyChilds = false;
+      var isLazyLoading = false;
+      var isLazyLoaded = false;
+      if (lazy) {
+        isLazyLoading = !!treeExpandLazyLoadedMaps[nodeid];
+        hasLazyChilds = node[hasChildField];
+        isLazyLoaded = !!nodeItem.treeLoaded;
+      }
+      var nParams = {
+        node: node
+      };
+      return h('div', {
+        key: "".concat(chunkIndex, "_").concat(nodeIndex),
+        class: ['vxe-cascader-chunk--node-item', {
+          'is--current': currentNode && (currentNode === node || $xeCascader.getNodeId(currentNode) === nodeid),
+          'is-radio--checked': isRadioChecked,
+          'is-checkbox--checked': isCheckboxChecked,
+          'is-checkbox--indeterminate': isIndeterminate,
+          'is--expand': isExpand
+        }],
+        attrs: {
+          title: nodeTitle
+        },
+        on: {
+          mousedown: function mousedown(evnt) {
+            var isLeftBtn = evnt.button === 0;
+            if (isLeftBtn) {
+              evnt.stopPropagation();
+            }
+          },
+          click: function click(evnt) {
+            $xeCascader.handleNodeClickEvent(evnt, node, chunks, chunkIndex);
+          }
+        }
+      }, [multiple ? $xeCascader.renderCheckbox(h, node, isExistChild, nLevel, isCheckboxChecked, isIndeterminate) : $xeCascader.renderRadio(h, node, isExistChild, nLevel, isRadioChecked), h('div', {
+        class: 'vxe-cascader-chunk--node-item-inner'
+      }, [h('div', {
+        class: 'vxe-cascader-chunk--node-item-title'
+      }, titleSlot ? (0, _ui.getSlotVNs)(titleSlot(nParams)) : nodeTitle)]), treeOpts.showIcon && (lazy ? isLazyLoaded ? isExistChild : hasLazyChilds : isExistChild) ? h('div', {
+        class: 'vxe-cascader-chunk--node-item-switcher'
+      }, [[h('div', {
+        class: 'vxe-cascader--node-item-icon',
+        on: {
+          click: function click(evnt) {
+            if (treeOpts.trigger === 'icon') {
+              $xeCascader.toggleExpandEvent(evnt, node, chunks, chunkIndex);
+            }
+          }
+        }
+      }, iconSlot ? (0, _ui.getSlotVNs)(iconSlot(nParams)) : [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)]);
     },
-    //
-    // Render
-    //
     renderVN: function renderVN(h) {
       var $xeCascader = this;
       var props = $xeCascader;
-      var slots = $xeCascader.$scopedSlots;
       var reactData = $xeCascader.reactData;
+      var slots = $xeCascader.$scopedSlots;
       var className = props.className,
         modelValue = props.value,
         multiple = props.multiple,
@@ -734,12 +1756,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         filterable = props.filterable,
         showTotalButton = props.showTotalButton,
         showCheckedButton = props.showCheckedButton,
-        showClearButton = props.showClearButton;
+        showClearButton = props.showClearButton,
+        showCloseButton = props.showCloseButton;
       var initialized = reactData.initialized,
         isActivated = reactData.isActivated,
         isAniVisible = reactData.isAniVisible,
         visiblePanel = reactData.visiblePanel,
-        searchValue = reactData.searchValue;
+        searchValue = reactData.searchValue,
+        currentCunkList = reactData.currentCunkList;
       var vSize = $xeCascader.computeSize;
       var isDisabled = $xeCascader.computeIsDisabled;
       var selectLabel = $xeCascader.computeSelectLabel;
@@ -769,13 +1793,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         ref: 'refInput',
         props: {
           clearable: props.clearable,
-          placeholder: props.placeholder,
+          placeholder: loading ? (0, _ui.getI18n)('vxe.select.loadingText') : props.placeholder,
           editable: false,
           disabled: isDisabled,
           type: 'text',
           prefixIcon: props.prefixIcon,
           suffixIcon: loading ? (0, _ui.getIcon)().TREE_SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().TREE_SELECT_OPEN : (0, _ui.getIcon)().TREE_SELECT_CLOSE,
-          value: loading ? (0, _ui.getI18n)('vxe.select.loadingText') : selectLabel,
+          value: loading ? '' : selectLabel,
           title: selectLabel
         },
         on: {
@@ -789,7 +1813,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           prefix: function prefix() {
             return prefixSlot({});
           }
-        } : {}
+        } : undefined
       }), h('div', {
         ref: 'refOptionPanel',
         class: ['vxe-table--ignore-clear vxe-cascader--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
@@ -798,7 +1822,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         attrs: {
           placement: reactData.panelPlacement
         },
-        style: reactData.panelStyle
+        style: popupWrapperStyle
       }, initialized ? [h('div', {
         class: 'vxe-cascader--panel-wrapper'
       }, [filterable ? h('div', {
@@ -808,7 +1832,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         class: 'vxe-cascader-search--input',
         props: {
           value: searchValue,
-          title: selectLabel,
           clearable: true,
           disabled: false,
           readonly: false,
@@ -818,17 +1841,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         on: {
           'model-value': $xeCascader.modelSearchEvent
         }
-      })]) : (0, _ui.renderEmptyElement)($xeCascader), showTotalButton || showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
-        class: 'vxe-cascader--panel-header'
+      })]) : (0, _ui.renderEmptyElement)($xeCascader), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
+        class: 'vxe-tree-select--panel-header'
       }, headerSlot ? headerSlot({}) : [h('div', {
-        class: 'vxe-cascader--header-button'
-      }, [showTotalButton ? h('div', {
-        class: 'vxe-cascader--header-total'
-      }, (0, _ui.getI18n)('vxe.cascader.total', [selectVals.length])) : (0, _ui.renderEmptyElement)($xeCascader), h('div', {
-        class: 'vxe-cascader--header-btns'
+        class: 'vxe-tree-select--header-button'
+      }, [showCheckedButton && showClearButton ? h('div', {
+        class: 'vxe-tree-select--selected-btns'
       }, [showCheckedButton && multiple ? h(_button.default, {
         props: {
-          content: (0, _ui.getI18n)('vxe.cascader.allChecked'),
+          content: (0, _ui.getI18n)('vxe.treeSelect.allChecked'),
           mode: 'text'
         },
         on: {
@@ -836,35 +1857,80 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       }) : (0, _ui.renderEmptyElement)($xeCascader), showClearButton ? h(_button.default, {
         props: {
-          content: (0, _ui.getI18n)('vxe.cascader.clearChecked'),
+          content: (0, _ui.getI18n)('vxe.treeSelect.clearChecked'),
           mode: 'text'
         },
         on: {
           click: $xeCascader.clearCheckedPanelEvent
         }
-      }) : (0, _ui.renderEmptyElement)($xeCascader)])])]) : (0, _ui.renderEmptyElement)($xeCascader), h('div', {
+      }) : (0, _ui.renderEmptyElement)($xeCascader)]) : (0, _ui.renderEmptyElement)($xeCascader)])]) : (0, _ui.renderEmptyElement)($xeCascader), h('div', {
         class: 'vxe-cascader--panel-body'
       }, [h('div', {
-        ref: 'refTreeWrapper',
-        class: 'vxe-cascader-tree--wrapper',
-        style: popupWrapperStyle
-      }, [])]), footerSlot ? h('div', {
+        ref: 'refChunkWrapper',
+        class: 'vxe-cascader-chunk--wrapper'
+      }, [currentCunkList.map(function (chunks, chunkIndex) {
+        return h('div', {
+          key: chunkIndex,
+          class: 'vxe-cascader-chunk--item-wrapper'
+        }, [h(_list.default, {
+          props: {
+            data: chunks
+          },
+          scopedSlots: {
+            default: function _default(slotParams) {
+              var items = slotParams.items;
+              return items.map(function (node, nodeIndex) {
+                var nodeid = $xeCascader.getNodeId(node);
+                return $xeCascader.renderNode(h, node, nodeid, nodeIndex, chunks, chunkIndex);
+              });
+            }
+          }
+        })]);
+      })])]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
         class: 'vxe-cascader--panel-footer'
-      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeCascader)])] : [])]);
+      }, footerSlot ? footerSlot({}) : [h('div', {
+        class: 'vxe-cascader--footer-button'
+      }, [showTotalButton ? h('div', {
+        class: 'vxe-cascader--total-btns'
+      }, (0, _ui.getI18n)('vxe.treeSelect.total', [selectVals.length])) : (0, _ui.renderEmptyElement)($xeCascader), showCloseButton && multiple ? h('div', {
+        class: 'vxe-cascader--oper-btns'
+      }, [h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.select.close'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeCascader.closePanelEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeCascader)])]) : (0, _ui.renderEmptyElement)($xeCascader)])] : [])]);
     }
   },
   watch: {
+    value: function value() {
+      var $xeCascader = this;
+      var reactData = $xeCascader.reactData;
+      if (!reactData.visiblePanel) {
+        $xeCascader.handleCurrentItems();
+        $xeCascader.updateCurrentChunk();
+      }
+    },
     options: function options() {
       var $xeCascader = this;
-      $xeCascader.cacheDataMap();
+      var props = $xeCascader;
+      $xeCascader.loadData(props.options || []);
     }
   },
   created: function created() {
     var $xeCascader = this;
-    $xeCascader.cacheDataMap();
+    var props = $xeCascader;
+    $xeCascader.loadData(props.options || []);
   },
   mounted: function mounted() {
     var $xeCascader = this;
+    var props = $xeCascader;
+    if (props.filterable) {
+      (0, _log.errLog)('vxe.error.notProp', ['filterable']);
+    }
     _ui.globalEvents.on($xeCascader, 'mousewheel', $xeCascader.handleGlobalMousewheelEvent);
     _ui.globalEvents.on($xeCascader, 'mousedown', $xeCascader.handleGlobalMousedownEvent);
     _ui.globalEvents.on($xeCascader, 'blur', $xeCascader.handleGlobalBlurEvent);
@@ -872,6 +1938,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   beforeDestroy: function beforeDestroy() {
     var $xeCascader = this;
+    var reactData = $xeCascader.reactData;
+    var internalData = $xeCascader.internalData;
     var panelElem = $xeCascader.$refs.refOptionPanel;
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
@@ -880,10 +1948,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     _ui.globalEvents.off($xeCascader, 'mousedown');
     _ui.globalEvents.off($xeCascader, 'blur');
     _ui.globalEvents.off($xeCascader, 'resize');
-  },
-  destroyed: function destroyed() {
-    var $xeCascader = this;
-    var internalData = $xeCascader.internalData;
+    _xeUtils.default.assign(reactData, createReactData());
     _xeUtils.default.assign(internalData, createInternalData());
   },
   render: function render(h) {