vxe-pc-ui 3.14.39 → 3.15.0

package/es/cascader/src/cascader.js

@@ -1,20 +1,66 @@
 import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getConfig, getI18n, getIcon, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getConfig, getI18n, getIcon, globalEvents, createEvent, renderEmptyElement, getSlotVNs, globalMixins } from '../../ui';
 import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
-import { deNodeValue } from '../../tree/src/util';
+import { enNodeValue, deNodeValue } from './util';
 import { errLog } from '../../ui/src/log';
+import XEUtils from 'xe-utils';
+import VxeListComponent from '../../list/src/list';
 import VxeInputComponent from '../../input/src/input';
 import VxeButtonComponent from '../../button/src/button';
-function getOptUniqueId() {
+/**
+ * 生成节点的唯一主键
+ */
+function getNodeUniqueId() {
     return XEUtils.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: {}
     };
 }
 export default {
@@ -44,26 +90,41 @@ export default {
         },
         filterable: Boolean,
         filterConfig: Object,
+        showFullLabel: {
+            type: Boolean,
+            default: getConfig().cascader.showFullLabel
+        },
+        separator: {
+            type: String,
+            default: 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: () => getConfig().cascader.size || getConfig().size
         },
+        treeConfig: Object,
+        radioConfig: Object,
+        checkboxConfig: Object,
         remote: Boolean,
         remoteConfig: Function,
         popupConfig: Object,
-        treeConfig: Object,
-        autoClose: {
+        checkedClosable: {
+            type: Boolean,
+            default: () => getConfig().cascader.checkedClosable
+        },
+        clearClosable: {
             type: Boolean,
-            default: () => getConfig().cascader.autoClose
+            default: () => getConfig().cascader.clearClosable
+        },
+        showCloseButton: {
+            type: Boolean,
+            default: () => getConfig().cascader.showCloseButton
         },
         showTotalButton: {
             type: Boolean,
@@ -76,16 +137,7 @@ export default {
         showClearButton: {
             type: Boolean,
             default: () => getConfig().cascader.showClearButton
-        },
-        transfer: {
-            type: Boolean,
-            default: null
-        },
-        /**
-         * 已废弃，被 remote-config.queryMethod 替换
-         * @deprecated
-         */
-        remoteMethod: Function
+        }
     },
     inject: {
         $xeModal: {
@@ -113,18 +165,7 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            initialized: false,
-            searchValue: '',
-            searchLoading: false,
-            panelIndex: 0,
-            panelStyle: {},
-            panelPlacement: null,
-            triggerFocusPanel: false,
-            visiblePanel: false,
-            isAniVisible: false,
-            isActivated: false
-        };
+        const reactData = createReactData();
         const internalData = createInternalData();
         return {
             xID,
@@ -160,65 +201,44 @@ export default {
         },
         computeBtnTransfer() {
             const $xeCascader = this;
-            const props = $xeCascader;
             const $xeTable = $xeCascader.$xeTable;
             const $xeModal = $xeCascader.$xeModal;
             const $xeDrawer = $xeCascader.$xeDrawer;
             const $xeForm = $xeCascader.$xeForm;
-            const { transfer } = props;
-            if (transfer === null) {
-                const globalTransfer = getConfig().cascader.transfer;
-                if (XEUtils.isBoolean(globalTransfer)) {
-                    return globalTransfer;
-                }
-                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-                    return true;
-                }
+            const popupOpts = $xeCascader.computePopupOpts;
+            const { transfer } = popupOpts;
+            if (XEUtils.isBoolean(transfer)) {
+                return transfer;
             }
-            return transfer;
-        },
-        computePopupOpts() {
-            const $xeCascader = this;
-            const props = $xeCascader;
-            return Object.assign({}, getConfig().cascader.popupConfig, props.popupConfig);
+            if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                return true;
+            }
+            return false;
         },
         computeTreeOpts() {
             const $xeCascader = this;
             const props = $xeCascader;
             return Object.assign({}, getConfig().cascader.treeConfig, props.treeConfig);
         },
-        computeTreeNodeOpts() {
+        computeRadioOpts() {
             const $xeCascader = this;
-            const treeOpts = $xeCascader.computeTreeOpts;
-            return Object.assign({ isHover: true }, treeOpts.nodeConfig);
+            const props = $xeCascader;
+            return Object.assign({}, getConfig().cascader.radioConfig, props.radioConfig);
         },
-        computeTreeCheckboxOpts() {
+        computeCheckboxOpts() {
             const $xeCascader = this;
-            const treeOpts = $xeCascader.computeTreeOpts;
-            return Object.assign({
-                showIcon: !!treeOpts.showCheckbox
-            }, treeOpts.checkboxConfig, {
-                trigger: 'node'
-            });
+            const props = $xeCascader;
+            return Object.assign({}, getConfig().cascader.checkboxConfig, props.checkboxConfig);
         },
-        computeTreeRadioOpts() {
+        computePopupOpts() {
             const $xeCascader = this;
-            const treeOpts = $xeCascader.computeTreeOpts;
-            return Object.assign({
-                showIcon: !!treeOpts.showRadio
-            }, treeOpts.radioConfig, {
-                trigger: 'node'
-            });
+            const props = $xeCascader;
+            return Object.assign({}, getConfig().cascader.popupConfig, props.popupConfig);
         },
         computePropsOpts() {
             const $xeCascader = this;
             const props = $xeCascader;
-            return Object.assign({}, props.optionProps);
-        },
-        computeNodeKeyField() {
-            const $xeCascader = this;
-            const valueField = $xeCascader.computeValueField;
-            return valueField;
+            return props.optionProps || {};
         },
         computeLabelField() {
             const $xeCascader = this;
@@ -230,50 +250,61 @@ export default {
             const propsOpts = $xeCascader.computePropsOpts;
             return propsOpts.value || 'value';
         },
-        computeChildrenField() {
+        computeKeyField() {
             const $xeCascader = this;
-            const propsOpts = $xeCascader.computePropsOpts;
-            return propsOpts.children || 'children';
+            const treeOpts = $xeCascader.computeTreeOpts;
+            return treeOpts.keyField || 'id';
         },
         computeParentField() {
             const $xeCascader = this;
-            const propsOpts = $xeCascader.computePropsOpts;
-            return propsOpts.parent || 'parentField';
+            const treeOpts = $xeCascader.computeTreeOpts;
+            return treeOpts.parentField || 'parentId';
+        },
+        computeChildrenField() {
+            const $xeCascader = this;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            return treeOpts.childrenField || 'children';
+        },
+        computeMapChildrenField() {
+            const $xeCascader = this;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            return treeOpts.mapChildrenField || 'mapChildren';
         },
         computeHasChildField() {
             const $xeCascader = this;
-            const propsOpts = $xeCascader.computePropsOpts;
-            return propsOpts.hasChild || 'hasChild';
+            const treeOpts = $xeCascader.computeTreeOpts;
+            return treeOpts.hasChildField || 'hasChild';
         },
         computeRemoteOpts() {
             const $xeCascader = this;
             const props = $xeCascader;
             return Object.assign({}, getConfig().cascader.remoteConfig, props.remoteConfig);
         },
-        computeFilterOpts() {
+        computeSelectVals() {
             const $xeCascader = this;
             const props = $xeCascader;
-            const treeOpts = $xeCascader.computeTreeOpts;
-            return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
+            const { value: modelValue } = props;
+            return XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
         },
         computeSelectLabel() {
             const $xeCascader = this;
             const props = $xeCascader;
+            const reactData = $xeCascader.reactData;
             const internalData = $xeCascader.internalData;
-            const { value: modelValue, lazyOptions } = props;
-            const { fullNodeMaps } = internalData;
-            const valueField = $xeCascader.computeValueField;
+            const { showFullLabel } = props;
+            const { fullOptFlag, lazyOptFlag } = reactData;
+            const { fullNodeMaps, lazyNodeMaps } = internalData;
             const labelField = $xeCascader.computeLabelField;
-            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+            const selectVals = $xeCascader.computeSelectVals;
             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;
@@ -281,17 +312,26 @@ export default {
         },
         computePopupWrapperStyle() {
             const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const { currentCunkList, panelStyle } = reactData;
             const popupOpts = $xeCascader.computePopupOpts;
-            const { height, width } = popupOpts;
-            const stys = {};
-            if (width) {
-                stys.width = toCssUnit(width);
-            }
+            const { height, nodeWidth, nodeHeight } = popupOpts;
+            const stys = Object.assign(Object.assign({}, panelStyle), { '--vxe-ui-cascader-chunk-size': currentCunkList.length });
             if (height) {
-                stys.height = toCssUnit(height);
-                stys.maxHeight = toCssUnit(height);
+                stys['--vxe-ui-cascader-chunk-height'] = toCssUnit(height);
+            }
+            if (nodeWidth) {
+                stys['--vxe-ui-cascader-node-width'] = toCssUnit(nodeWidth);
+            }
+            if (nodeHeight) {
+                stys['--vxe-ui-cascader-node-height'] = toCssUnit(nodeHeight);
             }
             return stys;
+        },
+        computeFilterOpts() {
+            const $xeCascader = this;
+            const props = $xeCascader;
+            return Object.assign({}, getConfig().cascader.filterConfig, props.filterConfig);
         } }),
     methods: {
         //
@@ -311,45 +351,359 @@ export default {
                 $xeCascader.$emit('model-value', value);
             }
         },
-        getNodeid(option) {
+        getNodeId(node) {
             const $xeCascader = this;
-            const nodeKeyField = $xeCascader.computeNodeKeyField;
-            const nodeid = option[nodeKeyField];
-            return nodeid ? encodeURIComponent(nodeid) : '';
+            if (!node) {
+                return '';
+            }
+            const valueField = $xeCascader.computeValueField;
+            const nodeKey = node[valueField];
+            return enNodeValue(nodeKey);
         },
-        cacheDataMap() {
+        isCheckedByCheckboxNodeId(nodeid) {
             const $xeCascader = this;
-            const props = $xeCascader;
+            const reactData = $xeCascader.reactData;
             const internalData = $xeCascader.internalData;
-            const { options } = props;
-            const nodeKeyField = $xeCascader.computeNodeKeyField;
+            const { updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps } = internalData;
+            return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
+        },
+        handleCheckedCheckboxNode(nodeList, checked) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { selectCheckboxMaps } = internalData;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
             const childrenField = $xeCascader.computeChildrenField;
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            const { checkStrictly } = checkboxOpts;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            const handleSelect = (node) => {
+                const 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.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
+            }
+            reactData.updateCheckboxFlag++;
+            $xeCascader.updateCheckboxStatus();
+        },
+        createNode(records) {
+            const $xeCascader = this;
             const valueField = $xeCascader.computeValueField;
-            const nodeMaps = {};
+            return Promise.resolve(records.map(obj => {
+                const item = Object.assign({}, obj);
+                let nodeid = $xeCascader.getNodeId(item);
+                if (!nodeid) {
+                    nodeid = getNodeUniqueId();
+                    XEUtils.set(item, valueField, nodeid);
+                }
+                return item;
+            }));
+        },
+        cacheNodeMap() {
+            const $xeCascader = this;
+            const props = $xeCascader;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { separator } = props;
+            const { treeFullData } = internalData;
+            const valueField = $xeCascader.computeValueField;
+            const labelField = $xeCascader.computeLabelField;
+            const childrenField = $xeCascader.computeChildrenField;
             const keyMaps = {};
-            XEUtils.eachTree(options, (item, index, items, path, parent, nodes) => {
-                let nodeid = $xeCascader.getNodeid(item);
+            const fullMaps = {};
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
+                let nodeid = $xeCascader.getNodeId(item);
                 if (!nodeid) {
-                    nodeid = getOptUniqueId();
+                    nodeid = getNodeUniqueId();
+                    item[valueField] = nodeid;
                 }
-                if (keyMaps[nodeid]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid]);
+                const nodeVal = item[valueField];
+                const itemRest = {
+                    item,
+                    index,
+                    $index: -1,
+                    _index: -1,
+                    items,
+                    parent: parenItem,
+                    nodes,
+                    level: nodes.length - 1,
+                    treeIndex: index,
+                    lineCount: 0,
+                    treeLoaded: false,
+                    fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
+                };
+                keyMaps[nodeid] = itemRest;
+                fullMaps[nodeVal] = itemRest;
+            }, { children: childrenField });
+            internalData.nodeMaps = keyMaps;
+            internalData.fullNodeMaps = fullMaps;
+            reactData.fullOptFlag++;
+        },
+        updateAfterDataIndex() {
+            const $xeCascader = this;
+            const props = $xeCascader;
+            const internalData = $xeCascader.internalData;
+            const { separator } = props;
+            const { afterTreeList, nodeMaps } = internalData;
+            const labelField = $xeCascader.computeLabelField;
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            let vtIndex = 0;
+            XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
+                const nodeid = $xeCascader.getNodeId(item);
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem) {
+                    nodeItem.items = items;
+                    nodeItem.treeIndex = index;
+                    nodeItem._index = vtIndex;
                 }
-                keyMaps[nodeid] = true;
-                const value = item[valueField];
-                if (nodeMaps[value]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
+                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;
                 }
-                nodeMaps[value] = { item, index, items, parent, nodes };
-            }, { children: childrenField });
-            internalData.fullOptionList = options || [];
-            internalData.fullNodeMaps = nodeMaps;
+                vtIndex++;
+            }, { children: transform ? mapChildrenField : childrenField });
+        },
+        updateAfterFullData() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { searchValue } = reactData;
+            const { treeFullData, lastFilterValue } = internalData;
+            const labelField = $xeCascader.computeLabelField;
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            const filterOpts = $xeCascader.computeFilterOpts;
+            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) {
+                    treeList = XEUtils.searchTree(treeFullData, handleSearch, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                    fullList = treeList;
+                }
+                else {
+                    fullList = treeFullData.filter(handleSearch);
+                }
+                internalData.lastFilterValue = filterStr;
+                $xeCascader.$nextTick(() => {
+                    if (afterFilterMethod) {
+                        afterFilterMethod(bafParams);
+                    }
+                });
+            }
+            else {
+                if (transform) {
+                    treeList = XEUtils.searchTree(treeFullData, () => true, {
+                        original: true,
+                        isEvery: true,
+                        children: childrenField,
+                        mapChildren: mapChildrenField
+                    });
+                    fullList = treeList;
+                    if (lastFilterValue) {
+                        const bafParams = { $cascader: $xeCascader, filterValue: filterStr };
+                        if (beforeFilterMethod) {
+                            beforeFilterMethod(bafParams);
+                        }
+                        // 取消筛选时自动收起
+                        $xeCascader.$nextTick(() => {
+                            if (afterFilterMethod) {
+                                afterFilterMethod(bafParams);
+                            }
+                        });
+                    }
+                }
+                internalData.lastFilterValue = '';
+            }
+            internalData.afterVisibleList = fullList;
+            internalData.afterTreeList = treeList;
+            $xeCascader.updateAfterDataIndex();
+        },
+        /**
+         * 如果为虚拟树、则将树结构拍平
+         */
+        handleTreeToList() {
+            const $xeCascader = this;
+            const internalData = $xeCascader.internalData;
+            const { afterTreeList, treeExpandedMaps } = internalData;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            const expandMaps = {};
+            if (transform) {
+                const fullData = [];
+                XEUtils.eachTree(afterTreeList, (item, index, items, path, parentRow) => {
+                    const nodeid = $xeCascader.getNodeId(item);
+                    const 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(force) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { nodeMaps } = internalData;
+            let fullList = internalData.afterVisibleList;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                $xeCascader.updateAfterFullData();
+                // 如果为虚拟树，将树结构拍平
+                fullList = $xeCascader.handleTreeToList();
+            }
+            const treeList = fullList.slice(0);
+            treeList.forEach((item, $index) => {
+                const nodeid = $xeCascader.getNodeId(item);
+                const itemRest = nodeMaps[nodeid];
+                if (itemRest) {
+                    itemRest.$index = $index;
+                }
+            });
+            reactData.treeList = treeList;
+        },
+        triggerSearchEvent: XEUtils.debounce(function () {
+            const $xeCascader = this;
+            $xeCascader.handleData(true);
+        }, 350, { trailing: true }),
+        loadData(list) {
+            const $xeCascader = this;
+            const internalData = $xeCascader.internalData;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const keyField = $xeCascader.computeKeyField;
+            const parentField = $xeCascader.computeParentField;
+            const childrenField = $xeCascader.computeChildrenField;
+            const { rootParentValue, rootValues } = treeOpts;
+            const { transform } = treeOpts;
+            const fullData = transform
+                ? XEUtils.toArrayTree(list, {
+                    key: keyField,
+                    parentKey: parentField,
+                    mapChildren: childrenField,
+                    rootParentValue,
+                    rootValues
+                })
+                : list ? list.slice(0) : [];
+            internalData.treeFullData = fullData;
+            $xeCascader.cacheNodeMap();
+            $xeCascader.handleData(true);
+            $xeCascader.handleCurrentItems();
+            $xeCascader.updateCurrentChunk();
+            return $xeCascader.$nextTick();
+        },
+        updateCurrentChunk() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { currentItems } = reactData;
+            const { treeFullData } = internalData;
+            const childrenField = $xeCascader.computeChildrenField;
+            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 === $xeCascader.getNodeId(item));
+                    optList = currOption ? currOption[childrenField] : [];
+                    if (!optList || !optList.length) {
+                        break;
+                    }
+                    currentCunkList.push(optList);
+                }
+            }
+            reactData.currentCunkList = currentCunkList;
+        },
+        handleCurrentItems() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { treeFullData } = internalData;
+            const selectVals = $xeCascader.computeSelectVals;
+            const childrenField = $xeCascader.computeChildrenField;
+            const stItems = [];
+            const expandedMaps = {};
+            if (selectVals.length) {
+                const lastVal = XEUtils.last(selectVals);
+                const stRest = XEUtils.findTree(treeFullData, (item) => lastVal === $xeCascader.getNodeId(item), { children: childrenField });
+                if (stRest) {
+                    const { nodes } = stRest;
+                    nodes.forEach(item => {
+                        const nodeid = $xeCascader.getNodeId(item);
+                        expandedMaps[nodeid] = true;
+                        stItems.push(nodeid);
+                    });
+                }
+            }
+            internalData.treeExpandedMaps = expandedMaps;
+            reactData.currentItems = stItems;
         },
         updateZindex() {
             const $xeCascader = this;
-            const props = $xeCascader;
             const reactData = $xeCascader.reactData;
-            const { zIndex } = props;
+            const popupOpts = $xeCascader.computePopupOpts;
+            const { zIndex } = popupOpts;
             if (zIndex) {
                 reactData.panelIndex = zIndex;
             }
@@ -359,9 +713,7 @@ export default {
         },
         updatePlacement() {
             const $xeCascader = this;
-            const props = $xeCascader;
             const reactData = $xeCascader.reactData;
-            const { placement } = props;
             const { panelIndex } = reactData;
             const targetElem = $xeCascader.$refs.refElem;
             const panelElem = $xeCascader.$refs.refOptionPanel;
@@ -369,9 +721,10 @@ export default {
             const popupOpts = $xeCascader.computePopupOpts;
             const handleStyle = () => {
                 const ppObj = 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
@@ -382,19 +735,17 @@ export default {
             handleStyle();
             return $xeCascader.$nextTick().then(handleStyle);
         },
-        showOptionPanel() {
+        showOptionPanel(evnt) {
             const $xeCascader = this;
             const props = $xeCascader;
             const reactData = $xeCascader.reactData;
             const internalData = $xeCascader.internalData;
             const { loading, remote, filterable } = props;
-            const { fullOptionList } = internalData;
+            const { treeFullData } = internalData;
             const isDisabled = $xeCascader.computeIsDisabled;
             const remoteOpts = $xeCascader.computeRemoteOpts;
             if (!loading && !isDisabled) {
-                if (internalData.hpTimeout) {
-                    clearTimeout(internalData.hpTimeout);
-                }
+                clearTimeout(internalData.hpTimeout);
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                     const btnTransfer = $xeCascader.computeBtnTransfer;
@@ -408,7 +759,7 @@ export default {
                 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();
                     }
                 }
@@ -418,9 +769,10 @@ export default {
                 }, 10);
                 $xeCascader.updateZindex();
                 $xeCascader.updatePlacement();
+                $xeCascader.dispatchEvent('visible-change', { visible: true }, evnt || null);
             }
         },
-        hideOptionPanel() {
+        hideOptionPanel(evnt) {
             const $xeCascader = this;
             const reactData = $xeCascader.reactData;
             const internalData = $xeCascader.internalData;
@@ -428,6 +780,52 @@ export default {
             internalData.hpTimeout = setTimeout(() => {
                 reactData.isAniVisible = false;
             }, 350);
+            $xeCascader.dispatchEvent('visible-change', { visible: false }, evnt || null);
+        },
+        setCurrentNode(node) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            reactData.currentNode = node;
+            return $xeCascader.$nextTick();
+        },
+        setAllCheckboxNode(checked) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const selectMaps = {};
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            const checkKeys = [];
+            const checkNodes = [];
+            if (checked) {
+                XEUtils.eachTree(internalData.afterTreeList, (node) => {
+                    const 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(() => {
+                return { checkNodeKeys: checkKeys, checkNodes };
+            });
+        },
+        clearCheckboxNode() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            internalData.indeterminateRowMaps = {};
+            internalData.selectCheckboxMaps = {};
+            reactData.updateCheckboxFlag++;
+            $xeCascader.updateCheckboxStatus();
+            return $xeCascader.$nextTick().then(() => {
+                return { checkNodeKeys: [], checkNodes: [] };
+            });
         },
         changeEvent(evnt, selectValue, node) {
             const $xeCascader = this;
@@ -452,56 +850,41 @@ export default {
         clearEvent(params, evnt) {
             const $xeCascader = this;
             $xeCascader.clearValueEvent(evnt, null);
-            $xeCascader.hideOptionPanel();
+            $xeCascader.hideOptionPanel(evnt);
         },
         allCheckedPanelEvent(params) {
             const $xeCascader = this;
             const props = $xeCascader;
             const { $event } = params;
-            const { multiple, autoClose } = props;
-            const $tree = $xeCascader.$refs.refTree;
+            const { multiple, checkedClosable } = props;
             if (multiple) {
-                if ($tree) {
-                    $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
-                        $xeCascader.changeEvent($event, checkNodeKeys, checkNodes[0]);
-                        $xeCascader.dispatchEvent('all-change', { value: checkNodeKeys }, $event);
-                        if (autoClose) {
-                            $xeCascader.hideOptionPanel();
-                        }
-                    });
-                }
+                $xeCascader.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
+                    $xeCascader.changeEvent($event, checkNodeKeys, checkNodes[0]);
+                    $xeCascader.dispatchEvent('all-change', { value: checkNodeKeys }, $event);
+                    if (checkedClosable) {
+                        $xeCascader.hideOptionPanel($event);
+                    }
+                });
             }
         },
         clearCheckedPanelEvent(params) {
             const $xeCascader = this;
             const props = $xeCascader;
             const { $event } = params;
-            const { multiple, autoClose } = props;
-            const $tree = $xeCascader.$refs.refTree;
-            if ($tree) {
-                const value = multiple ? [] : null;
-                $tree.clearCheckboxNode().then(() => {
-                    if (autoClose) {
-                        $xeCascader.hideOptionPanel();
-                    }
-                });
-                $xeCascader.changeEvent($event, value, null);
-                $xeCascader.dispatchEvent('clear', { value }, $event);
-            }
-        },
-        allExpandPanelEvent() {
-            const $xeCascader = this;
-            const $tree = $xeCascader.$refs.refTree;
-            if ($tree) {
-                $tree.setAllExpandNode(true);
-            }
+            const { multiple, checkedClosable } = props;
+            const value = multiple ? [] : null;
+            $xeCascader.clearCheckboxNode().then(() => {
+                if (checkedClosable) {
+                    $xeCascader.hideOptionPanel($event);
+                }
+            });
+            $xeCascader.changeEvent($event, value, null);
+            $xeCascader.dispatchEvent('clear', { value }, $event);
         },
-        clearExpandPanelEvent() {
+        closePanelEvent(params) {
             const $xeCascader = this;
-            const $tree = $xeCascader.$refs.refTree;
-            if ($tree) {
-                $tree.clearAllExpandNode();
-            }
+            const { $event } = params;
+            $xeCascader.hideOptionPanel($event);
         },
         handleGlobalMousewheelEvent(evnt) {
             const $xeCascader = this;
@@ -515,7 +898,7 @@ export default {
                         $xeCascader.updatePlacement();
                     }
                     else {
-                        $xeCascader.hideOptionPanel();
+                        $xeCascader.hideOptionPanel(evnt);
                     }
                 }
             }
@@ -530,16 +913,16 @@ export default {
                 const panelElem = $xeCascader.$refs.refOptionPanel;
                 reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                 if (visiblePanel && !reactData.isActivated) {
-                    $xeCascader.hideOptionPanel();
+                    $xeCascader.hideOptionPanel(evnt);
                 }
             }
         },
-        handleGlobalBlurEvent() {
+        handleGlobalBlurEvent(evnt) {
             const $xeCascader = this;
             const reactData = $xeCascader.reactData;
             const { visiblePanel, isActivated } = reactData;
             if (visiblePanel) {
-                $xeCascader.hideOptionPanel();
+                $xeCascader.hideOptionPanel(evnt);
             }
             if (isActivated) {
                 reactData.isActivated = false;
@@ -560,17 +943,387 @@ export default {
             }
         },
         handleFocusSearch() {
-            const $xeSelect = this;
-            const props = $xeSelect;
+            const $xeCascader = this;
+            const props = $xeCascader;
             if (props.filterable) {
-                $xeSelect.$nextTick(() => {
-                    const inpSearch = $xeSelect.$refs.refInpSearch;
+                $xeCascader.$nextTick(() => {
+                    const inpSearch = $xeCascader.$refs.refInpSearch;
                     if (inpSearch) {
                         inpSearch.focus();
                     }
                 });
             }
         },
+        changeCurrentEvent(evnt, node) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            evnt.preventDefault();
+            const isChecked = true;
+            reactData.currentNode = node;
+            $xeCascader.dispatchEvent('current-change', { node, checked: isChecked }, evnt);
+        },
+        changeRadioEvent(evnt, node) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { nodeMaps } = internalData;
+            const radioOpts = $xeCascader.computeRadioOpts;
+            const childrenField = $xeCascader.computeChildrenField;
+            const { checkMode, checkMethod } = radioOpts;
+            const nodeid = $xeCascader.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;
+            $xeCascader.changeEvent(evnt, value, node);
+            $xeCascader.hideOptionPanel(evnt);
+        },
+        handleAsyncTreeExpandChilds(node) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { loadMethod } = treeOpts;
+            const { checkStrictly } = checkboxOpts;
+            return new Promise(resolve => {
+                if (loadMethod) {
+                    const { nodeMaps } = internalData;
+                    const nodeid = $xeCascader.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.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)) {
+                                    $xeCascader.handleCheckedCheckboxNode(childRows, true);
+                                }
+                                $xeCascader.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                                return $xeCascader.$nextTick();
+                            });
+                        }
+                        else {
+                            $xeCascader.dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
+                        }
+                    }).catch((e) => {
+                        const { treeExpandLazyLoadedMaps } = internalData;
+                        nodeItem.treeLoaded = false;
+                        if (treeExpandLazyLoadedMaps[nodeid]) {
+                            treeExpandLazyLoadedMaps[nodeid] = false;
+                        }
+                        $xeCascader.dispatchEvent('load-error', { node, data: e }, new Event('load-error'));
+                    }).finally(() => {
+                        $xeCascader.handleTreeToList();
+                        $xeCascader.handleData();
+                    });
+                }
+                else {
+                    resolve();
+                }
+            });
+        },
+        /**
+         * 展开与收起树节点
+         * @param nodeList
+         * @param expanded
+         * @returns
+         */
+        handleBaseTreeExpand(nodeList, expanded) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { treeExpandLazyLoadedMaps, treeExpandedMaps } = internalData;
+            const { nodeMaps } = internalData;
+            const childrenField = $xeCascader.computeChildrenField;
+            const hasChildField = $xeCascader.computeHasChildField;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            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 = $xeCascader.getNodeId(validNodes[0]);
+            const nodeItem = nodeMaps[nodeid];
+            if (nodeItem) {
+                nodeItem.items.forEach(item => {
+                    const itemNodeId = $xeCascader.getNodeId(item);
+                    if (treeExpandedMaps[itemNodeId]) {
+                        delete treeExpandedMaps[itemNodeId];
+                    }
+                });
+            }
+            const expandNodes = [];
+            if (expanded) {
+                validNodes.forEach((item) => {
+                    const itemNodeId = $xeCascader.getNodeId(item);
+                    if (!treeExpandedMaps[itemNodeId]) {
+                        const nodeItem = nodeMaps[itemNodeId];
+                        const 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(item => {
+                    const itemNodeId = $xeCascader.getNodeId(item);
+                    if (treeExpandedMaps[itemNodeId]) {
+                        delete treeExpandedMaps[itemNodeId];
+                        expandNodes.push(item);
+                    }
+                });
+            }
+            reactData.updateExpandedFlag++;
+            $xeCascader.handleTreeToList();
+            $xeCascader.handleData();
+            return Promise.all(result);
+        },
+        toggleExpandEvent(evnt, node, chunks, chunkIndex) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { currentItems } = reactData;
+            const { treeExpandLazyLoadedMaps } = internalData;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { lazy } = treeOpts;
+            const stItems = currentItems.slice(0, chunkIndex);
+            const nodeid = $xeCascader.getNodeId(node);
+            const 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, expanded }, evnt);
+        },
+        updateCheckboxStatus() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const { selectCheckboxMaps, indeterminateRowMaps, afterTreeList } = internalData;
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            const { checkStrictly, checkMethod } = checkboxOpts;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            if (!checkStrictly) {
+                const childRowMaps = {};
+                const childRowList = [];
+                XEUtils.eachTree(afterTreeList, (node) => {
+                    const nodeid = $xeCascader.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 = $xeCascader.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 = $xeCascader.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++;
+            }
+        },
+        changeCheckboxEvent(evnt, node) {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { selectCheckboxMaps, nodeMaps } = internalData;
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            const { checkStrictly, checkMode, checkMethod } = checkboxOpts;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { transform } = treeOpts;
+            const nodeid = $xeCascader.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.eachTree(XEUtils.get(node, transform ? mapChildrenField : childrenField), (childNode) => {
+                    const 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();
+            const nodeids = XEUtils.keys(selectCheckboxMaps);
+            const value = nodeids;
+            $xeCascader.changeEvent(evnt, value, node);
+        },
+        handleNodeClickEvent(evnt, node, chunks, chunkIndex) {
+            const $xeCascader = this;
+            const props = $xeCascader;
+            const { multiple } = props;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const radioOpts = $xeCascader.computeRadioOpts;
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const { transform, trigger } = treeOpts;
+            const childList = node[transform ? mapChildrenField : childrenField];
+            let triggerCurrent = false;
+            let triggerRadio = false;
+            let triggerCheckbox = false;
+            let 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, triggerCurrent, triggerRadio, triggerCheckbox, triggerExpand }, evnt);
+        },
         focusEvent(evnt) {
             const $xeCascader = this;
             const reactData = $xeCascader.reactData;
@@ -578,7 +1331,7 @@ export default {
             if (!isDisabled) {
                 if (!reactData.visiblePanel) {
                     reactData.triggerFocusPanel = true;
-                    $xeCascader.showOptionPanel();
+                    $xeCascader.showOptionPanel(evnt);
                     setTimeout(() => {
                         reactData.triggerFocusPanel = false;
                     }, 150);
@@ -588,7 +1341,16 @@ export default {
         },
         clickEvent(evnt) {
             const $xeCascader = this;
-            $xeCascader.togglePanelEvent(evnt);
+            const reactData = $xeCascader.reactData;
+            evnt.preventDefault();
+            if (reactData.triggerFocusPanel) {
+                reactData.triggerFocusPanel = false;
+            }
+            else {
+                if (!reactData.visiblePanel) {
+                    $xeCascader.showOptionPanel(evnt);
+                }
+            }
             $xeCascader.dispatchEvent('click', {}, evnt);
         },
         blurEvent(evnt) {
@@ -601,15 +1363,16 @@ export default {
             const $xeCascader = this;
             const reactData = $xeCascader.reactData;
             reactData.searchValue = value;
+            $xeCascader.triggerSearchEvent(new Event('filter'));
         },
         handleSearchEvent() {
             const $xeCascader = this;
             const props = $xeCascader;
             const reactData = $xeCascader.reactData;
-            const { value: modelValue, remote, remoteMethod } = props;
+            const { value: modelValue, remote } = props;
             const { searchValue } = reactData;
             const remoteOpts = $xeCascader.computeRemoteOpts;
-            const queryMethod = remoteOpts.queryMethod || remoteMethod;
+            const queryMethod = remoteOpts.queryMethod;
             if (remote && queryMethod && remoteOpts.enabled) {
                 reactData.searchLoading = true;
                 Promise.resolve(queryMethod({ $cascader: $xeCascader, searchValue, value: modelValue })).then(() => $xeCascader.$nextTick())
@@ -629,43 +1392,223 @@ export default {
             }
             else {
                 if (reactData.visiblePanel) {
-                    $xeCascader.hideOptionPanel();
+                    $xeCascader.hideOptionPanel($event);
                 }
                 else {
-                    $xeCascader.showOptionPanel();
+                    $xeCascader.showOptionPanel($event);
                 }
             }
         },
-        nodeClickEvent(params) {
+        /**
+           * 用于树结构，给行数据加载子节点
+           */
+        loadChildrenNode(node, childRecords) {
             const $xeCascader = this;
-            const { $event } = params;
-            $xeCascader.dispatchEvent('node-click', params, $event);
+            const props = $xeCascader;
+            const internalData = $xeCascader.internalData;
+            const { separator } = props;
+            const { nodeMaps } = internalData;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const labelField = $xeCascader.computeLabelField;
+            const { lazy, transform } = treeOpts;
+            if (!lazy) {
+                return Promise.resolve([]);
+            }
+            const childrenField = $xeCascader.computeChildrenField;
+            const mapChildrenField = $xeCascader.computeMapChildrenField;
+            const parentNodeItem = nodeMaps[$xeCascader.getNodeId(node)];
+            const parentLevel = parentNodeItem ? parentNodeItem.level : 0;
+            const parentNodes = parentNodeItem ? parentNodeItem.nodes : [];
+            return $xeCascader.createNode(childRecords).then((nodeList) => {
+                XEUtils.eachTree(nodeList, (childRow, index, items, path, parent, nodes) => {
+                    const itemNodeId = $xeCascader.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;
+                }
+                $xeCascader.updateAfterDataIndex();
+                return nodeList;
+            });
         },
-        radioChangeEvent(params) {
+        //
+        // Render
+        //
+        renderRadio(h, node, isExistChild, nLevel, isChecked) {
             const $xeCascader = this;
-            const { value, $event, node } = params;
-            $xeCascader.changeEvent($event, value, node);
-            $xeCascader.hideOptionPanel();
+            const radioOpts = $xeCascader.computeRadioOpts;
+            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 h('div', {
+                    class: ['vxe-tree--radio-option', {
+                            'is--checked': isChecked,
+                            'is--disabled': isDisabled
+                        }],
+                    on: {
+                        click: (evnt) => {
+                            if (!isDisabled) {
+                                $xeCascader.changeRadioEvent(evnt, node);
+                            }
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : getIcon().RADIO_UNCHECKED]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeCascader);
         },
-        checkboxChangeEvent(params) {
+        renderCheckbox(h, node, isExistChild, nLevel, isChecked, isIndeterminate) {
             const $xeCascader = this;
-            const { value, $event, node } = params;
-            $xeCascader.changeEvent($event, value, node);
+            const checkboxOpts = $xeCascader.computeCheckboxOpts;
+            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 h('div', {
+                    class: ['vxe-cascader--checkbox-option', {
+                            'is--checked': isChecked,
+                            'is--indeterminate': isIndeterminate,
+                            'is--disabled': isDisabled
+                        }],
+                    on: {
+                        click(evnt) {
+                            if (!isDisabled) {
+                                $xeCascader.changeCheckboxEvent(evnt, node);
+                            }
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : (isChecked ? getIcon().CHECKBOX_CHECKED : getIcon().CHECKBOX_UNCHECKED)]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeCascader);
         },
-        loadSuccessEvent() {
+        renderNode(h, node, nodeid, nodeIndex, chunks, chunkIndex) {
             const $xeCascader = this;
-            $xeCascader.cacheDataMap();
+            const props = $xeCascader;
+            const reactData = $xeCascader.reactData;
+            const internalData = $xeCascader.internalData;
+            const slots = $xeCascader.$scopedSlots;
+            const { multiple } = props;
+            const { currentNode, selectRadioKey, updateCheckboxFlag, updateExpandedFlag } = reactData;
+            const { nodeMaps, selectCheckboxMaps, indeterminateRowMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
+            const treeOpts = $xeCascader.computeTreeOpts;
+            const { lazy, iconLoaded, iconOpen, iconClose } = treeOpts;
+            const childrenField = $xeCascader.computeChildrenField;
+            const labelField = $xeCascader.computeLabelField;
+            const hasChildField = $xeCascader.computeHasChildField;
+            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 h('div', {
+                key: `${chunkIndex}_${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(evnt) {
+                        const isLeftBtn = evnt.button === 0;
+                        if (isLeftBtn) {
+                            evnt.stopPropagation();
+                        }
+                    },
+                    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 ? 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(evnt) {
+                                        if (treeOpts.trigger === 'icon') {
+                                            $xeCascader.toggleExpandEvent(evnt, node, chunks, chunkIndex);
+                                        }
+                                    }
+                                }
+                            }, iconSlot
+                                ? getSlotVNs(iconSlot(nParams))
+                                : [
+                                    h('i', {
+                                        class: isLazyLoading ? (iconLoaded || getIcon().CASCADER_NODE_LOADED) : (isExpand ? (iconOpen || getIcon().CASCADER_NODE_OPEN) : (iconClose || getIcon().CASCADER_NODE_CLOSE))
+                                    })
+                                ])
+                        ]
+                    ])
+                    : renderEmptyElement($xeCascader)
+            ]);
         },
-        //
-        // Render
-        //
         renderVN(h) {
             const $xeCascader = this;
             const props = $xeCascader;
-            const slots = $xeCascader.$scopedSlots;
             const reactData = $xeCascader.reactData;
-            const { className, value: modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton } = props;
-            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue } = reactData;
+            const slots = $xeCascader.$scopedSlots;
+            const { className, value: modelValue, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton } = props;
+            const { initialized, isActivated, isAniVisible, visiblePanel, searchValue, currentCunkList } = reactData;
             const vSize = $xeCascader.computeSize;
             const isDisabled = $xeCascader.computeIsDisabled;
             const selectLabel = $xeCascader.computeSelectLabel;
@@ -703,13 +1646,13 @@ export default {
                     ref: 'refInput',
                     props: {
                         clearable: props.clearable,
-                        placeholder: props.placeholder,
+                        placeholder: loading ? getI18n('vxe.select.loadingText') : props.placeholder,
                         editable: false,
                         disabled: isDisabled,
                         type: 'text',
                         prefixIcon: props.prefixIcon,
                         suffixIcon: loading ? getIcon().TREE_SELECT_LOADED : (visiblePanel ? getIcon().TREE_SELECT_OPEN : getIcon().TREE_SELECT_CLOSE),
-                        value: loading ? getI18n('vxe.select.loadingText') : selectLabel,
+                        value: loading ? '' : selectLabel,
                         title: selectLabel
                     },
                     on: {
@@ -723,7 +1666,7 @@ export default {
                         ? {
                             prefix: () => prefixSlot({})
                         }
-                        : {}
+                        : undefined
                 }),
                 h('div', {
                     ref: 'refOptionPanel',
@@ -736,7 +1679,7 @@ export default {
                     attrs: {
                         placement: reactData.panelPlacement
                     },
-                    style: reactData.panelStyle
+                    style: popupWrapperStyle
                 }, initialized
                     ? [
                         h('div', {
@@ -751,7 +1694,6 @@ export default {
                                         class: 'vxe-cascader-search--input',
                                         props: {
                                             value: searchValue,
-                                            title: selectLabel,
                                             clearable: true,
                                             disabled: false,
                                             readonly: false,
@@ -764,46 +1706,43 @@ export default {
                                     })
                                 ])
                                 : renderEmptyElement($xeCascader),
-                            showTotalButton || (showCheckedButton && multiple) || showClearButton || headerSlot
+                            (showCheckedButton && multiple) || showClearButton || headerSlot
                                 ? h('div', {
-                                    class: 'vxe-cascader--panel-header'
+                                    class: 'vxe-tree-select--panel-header'
                                 }, headerSlot
                                     ? headerSlot({})
                                     : [
                                         h('div', {
-                                            class: 'vxe-cascader--header-button'
+                                            class: 'vxe-tree-select--header-button'
                                         }, [
-                                            showTotalButton
+                                            showCheckedButton && showClearButton
                                                 ? h('div', {
-                                                    class: 'vxe-cascader--header-total'
-                                                }, getI18n('vxe.cascader.total', [selectVals.length]))
-                                                : renderEmptyElement($xeCascader),
-                                            h('div', {
-                                                class: 'vxe-cascader--header-btns'
-                                            }, [
-                                                (showCheckedButton && multiple)
-                                                    ? h(VxeButtonComponent, {
-                                                        props: {
-                                                            content: getI18n('vxe.cascader.allChecked'),
-                                                            mode: 'text'
-                                                        },
-                                                        on: {
-                                                            click: $xeCascader.allCheckedPanelEvent
-                                                        }
-                                                    })
-                                                    : renderEmptyElement($xeCascader),
-                                                showClearButton
-                                                    ? h(VxeButtonComponent, {
-                                                        props: {
-                                                            content: getI18n('vxe.cascader.clearChecked'),
-                                                            mode: 'text'
-                                                        },
-                                                        on: {
-                                                            click: $xeCascader.clearCheckedPanelEvent
-                                                        }
-                                                    })
-                                                    : renderEmptyElement($xeCascader)
-                                            ])
+                                                    class: 'vxe-tree-select--selected-btns'
+                                                }, [
+                                                    (showCheckedButton && multiple)
+                                                        ? h(VxeButtonComponent, {
+                                                            props: {
+                                                                content: getI18n('vxe.treeSelect.allChecked'),
+                                                                mode: 'text'
+                                                            },
+                                                            on: {
+                                                                click: $xeCascader.allCheckedPanelEvent
+                                                            }
+                                                        })
+                                                        : renderEmptyElement($xeCascader),
+                                                    showClearButton
+                                                        ? h(VxeButtonComponent, {
+                                                            props: {
+                                                                content: getI18n('vxe.treeSelect.clearChecked'),
+                                                                mode: 'text'
+                                                            },
+                                                            on: {
+                                                                click: $xeCascader.clearCheckedPanelEvent
+                                                            }
+                                                        })
+                                                        : renderEmptyElement($xeCascader)
+                                                ])
+                                                : renderEmptyElement($xeCascader)
                                         ])
                                     ])
                                 : renderEmptyElement($xeCascader),
@@ -811,15 +1750,63 @@ export default {
                                 class: 'vxe-cascader--panel-body'
                             }, [
                                 h('div', {
-                                    ref: 'refTreeWrapper',
-                                    class: 'vxe-cascader-tree--wrapper',
-                                    style: popupWrapperStyle
-                                }, [])
+                                    ref: 'refChunkWrapper',
+                                    class: 'vxe-cascader-chunk--wrapper'
+                                }, [
+                                    currentCunkList.map((chunks, chunkIndex) => {
+                                        return h('div', {
+                                            key: chunkIndex,
+                                            class: 'vxe-cascader-chunk--item-wrapper'
+                                        }, [
+                                            h(VxeListComponent, {
+                                                props: {
+                                                    data: chunks
+                                                },
+                                                scopedSlots: {
+                                                    default(slotParams) {
+                                                        const { items } = slotParams;
+                                                        return items.map((node, nodeIndex) => {
+                                                            const nodeid = $xeCascader.getNodeId(node);
+                                                            return $xeCascader.renderNode(h, node, nodeid, nodeIndex, chunks, chunkIndex);
+                                                        });
+                                                    }
+                                                }
+                                            })
+                                        ]);
+                                    })
+                                ])
                             ]),
-                            footerSlot
+                            footerSlot || showTotalButton || (showCloseButton && multiple)
                                 ? h('div', {
                                     class: 'vxe-cascader--panel-footer'
-                                }, footerSlot({}))
+                                }, footerSlot
+                                    ? footerSlot({})
+                                    : [
+                                        h('div', {
+                                            class: 'vxe-cascader--footer-button'
+                                        }, [
+                                            showTotalButton
+                                                ? h('div', {
+                                                    class: 'vxe-cascader--total-btns'
+                                                }, getI18n('vxe.treeSelect.total', [selectVals.length]))
+                                                : renderEmptyElement($xeCascader),
+                                            showCloseButton && multiple
+                                                ? h('div', {
+                                                    class: 'vxe-cascader--oper-btns'
+                                                }, [
+                                                    h(VxeButtonComponent, {
+                                                        props: {
+                                                            content: getI18n('vxe.select.close'),
+                                                            mode: 'text'
+                                                        },
+                                                        on: {
+                                                            click: $xeCascader.closePanelEvent
+                                                        }
+                                                    })
+                                                ])
+                                                : renderEmptyElement($xeCascader)
+                                        ])
+                                    ])
                                 : renderEmptyElement($xeCascader)
                         ])
                     ]
@@ -828,17 +1815,31 @@ export default {
         }
     },
     watch: {
+        value() {
+            const $xeCascader = this;
+            const reactData = $xeCascader.reactData;
+            if (!reactData.visiblePanel) {
+                $xeCascader.handleCurrentItems();
+                $xeCascader.updateCurrentChunk();
+            }
+        },
         options() {
             const $xeCascader = this;
-            $xeCascader.cacheDataMap();
+            const props = $xeCascader;
+            $xeCascader.loadData(props.options || []);
         }
     },
     created() {
         const $xeCascader = this;
-        $xeCascader.cacheDataMap();
+        const props = $xeCascader;
+        $xeCascader.loadData(props.options || []);
     },
     mounted() {
         const $xeCascader = this;
+        const props = $xeCascader;
+        if (props.filterable) {
+            errLog('vxe.error.notProp', ['filterable']);
+        }
         globalEvents.on($xeCascader, 'mousewheel', $xeCascader.handleGlobalMousewheelEvent);
         globalEvents.on($xeCascader, 'mousedown', $xeCascader.handleGlobalMousedownEvent);
         globalEvents.on($xeCascader, 'blur', $xeCascader.handleGlobalBlurEvent);
@@ -846,6 +1847,8 @@ export default {
     },
     beforeDestroy() {
         const $xeCascader = this;
+        const reactData = $xeCascader.reactData;
+        const internalData = $xeCascader.internalData;
         const panelElem = $xeCascader.$refs.refOptionPanel;
         if (panelElem && panelElem.parentNode) {
             panelElem.parentNode.removeChild(panelElem);
@@ -854,10 +1857,7 @@ export default {
         globalEvents.off($xeCascader, 'mousedown');
         globalEvents.off($xeCascader, 'blur');
         globalEvents.off($xeCascader, 'resize');
-    },
-    destroyed() {
-        const $xeCascader = this;
-        const internalData = $xeCascader.internalData;
+        XEUtils.assign(reactData, createReactData());
         XEUtils.assign(internalData, createInternalData());
     },
     render(h) {