vxe-pc-ui 3.14.38 → 3.14.40

package/es/tree/src/tree.js

@@ -653,7 +653,7 @@ export default {
             internalData,
             crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
             hFlag: 0,
-            rootConf: 0
+            dataFlag: 0
         };
     },
     computed: Object.assign(Object.assign({}, {}), { computeTitleField() {
@@ -794,6 +794,9 @@ export default {
         },
         getNodeId(node) {
             const $xeTree = this;
+            if (!node) {
+                return '';
+            }
             const valueField = $xeTree.computeValueField;
             const nodeKey = XEUtils.get(node, valueField);
             return enNodeValue(nodeKey);
@@ -1021,7 +1024,7 @@ export default {
             const valueField = $xeTree.computeValueField;
             const childrenField = $xeTree.computeChildrenField;
             const keyMaps = {};
-            XEUtils.eachTree(treeFullData, (item, index, items, path, parent, nodes) => {
+            XEUtils.eachTree(treeFullData, (item, index, items, path, parenItem, nodes) => {
                 let nodeid = $xeTree.getNodeId(item);
                 if (!nodeid) {
                     nodeid = getNodeUniqueId();
@@ -1033,7 +1036,7 @@ export default {
                     $index: -1,
                     _index: -1,
                     items,
-                    parent,
+                    parent: parenItem,
                     nodes,
                     level: nodes.length - 1,
                     treeIndex: index,
@@ -1052,7 +1055,7 @@ export default {
             const childrenField = $xeTree.computeChildrenField;
             const mapChildrenField = $xeTree.computeMapChildrenField;
             let vtIndex = 0;
-            XEUtils.eachTree(afterTreeList, (item, index, items) => {
+            XEUtils.eachTree(afterTreeList, (item, index, items, path, parenItem, nodes) => {
                 const nodeid = $xeTree.getNodeId(item);
                 const nodeItem = nodeMaps[nodeid];
                 if (nodeItem) {
@@ -1067,9 +1070,9 @@ export default {
                         $index: -1,
                         _index: vtIndex,
                         items,
-                        parent,
-                        nodes: [],
-                        level: 0,
+                        parent: parenItem,
+                        nodes,
+                        level: nodes.length - 1,
                         treeIndex: index,
                         lineCount: 0,
                         treeLoaded: false
@@ -2592,7 +2595,7 @@ export default {
             const extraSlot = slots.extra;
             const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
             const nodeItem = nodeMaps[nodeid] || {};
-            const nodeValue = XEUtils.get(node, titleField);
+            const nodeTitle = XEUtils.get(node, titleField);
             const nLevel = nodeItem.level;
             let isRadioChecked = false;
             if (showRadio) {
@@ -2691,7 +2694,7 @@ export default {
                     }, [
                         h('div', {
                             class: 'vxe-tree--node-item-title'
-                        }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeValue}`),
+                        }, titleSlot ? getSlotVNs(titleSlot(nParams)) : `${nodeTitle}`),
                         extraSlot
                             ? h('div', {
                                 class: 'vxe-tree--node-item-extra'
@@ -2867,9 +2870,22 @@ export default {
         }
     },
     watch: {
-        data(val) {
+        data() {
+            const $xeTree = this;
+            $xeTree.dataFlag++;
+        },
+        rootParentValue() {
             const $xeTree = this;
-            $xeTree.loadData(val || []);
+            $xeTree.dataFlag++;
+        },
+        rootValues() {
+            const $xeTree = this;
+            $xeTree.dataFlag++;
+        },
+        dataFlag() {
+            const $xeTree = this;
+            const props = $xeTree;
+            $xeTree.loadData(props.data || []);
         },
         checkNodeKey(nodeKey) {
             const $xeTree = this;
@@ -2900,19 +2916,6 @@ export default {
         hFlag() {
             const $xeTree = this;
             $xeTree.recalculate();
-        },
-        rootParentValue() {
-            const $xeTree = this;
-            $xeTree.rootConf++;
-        },
-        rootValues() {
-            const $xeTree = this;
-            $xeTree.rootConf++;
-        },
-        rootConf() {
-            const $xeTree = this;
-            const props = $xeTree;
-            $xeTree.loadData(props.data || []);
         }
     },
     created() {
@@ -2934,6 +2937,9 @@ export default {
         if (dragOpts.isCrossTreeDrag) {
             errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
         }
+        // if (valueField) {
+        //   errLog('vxe.error.delProp', ['value-field', 'value-field'])
+        // }
         const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
         if (menuConfig && !VxeUIContextMenu) {
             errLog('vxe.error.reqComp', ['vxe-context-menu']);

package/es/tree-select/src/tree-select.js

@@ -214,12 +214,12 @@ export default {
             const $xeModal = $xeTreeSelect.$xeModal;
             const $xeDrawer = $xeTreeSelect.$xeDrawer;
             const $xeForm = $xeTreeSelect.$xeForm;
-            const { transfer } = props;
             const popupOpts = $xeTreeSelect.computePopupOpts;
-            if (XEUtils.isBoolean(popupOpts.transfer)) {
-                return popupOpts.transfer;
+            const { transfer } = popupOpts;
+            if (XEUtils.isBoolean(transfer)) {
+                return transfer;
             }
-            if (transfer === null) {
+            if (props.transfer === null) {
                 const globalTransfer = getConfig().treeSelect.transfer;
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
@@ -228,7 +228,7 @@ export default {
                     return true;
                 }
             }
-            return transfer;
+            return props.transfer;
         },
         computePopupOpts() {
             const $xeTreeSelect = this;
@@ -320,16 +320,22 @@ export default {
             const treeOpts = $xeTreeSelect.computeTreeOpts;
             return Object.assign({}, treeOpts.filterConfig, props.filterConfig);
         },
+        computeSelectVals() {
+            const $xeTreeSelect = this;
+            const props = $xeTreeSelect;
+            const { value: modelValue } = props;
+            return XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+        },
         computeSelectLabel() {
             const $xeTreeSelect = this;
             const props = $xeTreeSelect;
             const reactData = $xeTreeSelect.reactData;
             const internalData = $xeTreeSelect.internalData;
-            const { value: modelValue, showFullLabel } = props;
+            const { showFullLabel } = props;
             const { fullOptFlag, lazyOptFlag } = reactData;
             const { fullNodeMaps, lazyNodeMaps } = internalData;
             const labelField = $xeTreeSelect.computeLabelField;
-            const selectVals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue]);
+            const selectVals = $xeTreeSelect.computeSelectVals;
             return selectVals.map(val => {
                 const cacheItem = fullNodeMaps[val];
                 if (fullOptFlag && cacheItem) {
@@ -414,12 +420,12 @@ export default {
                     nodeid = getOptUniqueId();
                 }
                 if (keyMaps[nodeid]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${nodeKeyField}`, nodeid]);
+                    errLog('vxe.error.repeatKey', [nodeKeyField, nodeid]);
                 }
                 keyMaps[nodeid] = true;
                 const value = item[valueField];
                 if (nodeMaps[value]) {
-                    errLog('vxe.error.repeatKey', [`[tree-select] ${valueField}`, value]);
+                    errLog('vxe.error.repeatKey', [valueField, value]);
                 }
                 nodeMaps[value] = {
                     item,
@@ -427,7 +433,7 @@ export default {
                     items,
                     parent: parentItem,
                     nodes,
-                    fullLabel: nodes.map(item => item[labelField]).join((separator || '/') + ' ')
+                    fullLabel: nodes.map(item => item[labelField]).join((separator || ' / '))
                 };
             };
             if (optList) {
@@ -510,7 +516,7 @@ export default {
             handleStyle();
             return $xeTreeSelect.$nextTick().then(handleStyle);
         },
-        showOptionPanel() {
+        showOptionPanel(evnt) {
             const $xeTreeSelect = this;
             const props = $xeTreeSelect;
             const reactData = $xeTreeSelect.reactData;
@@ -547,7 +553,7 @@ export default {
                 }, 10);
                 $xeTreeSelect.updateZindex();
                 $xeTreeSelect.updatePlacement();
-                $xeTreeSelect.dispatchEvent('visible-change', { visible: true }, null);
+                $xeTreeSelect.dispatchEvent('visible-change', { visible: true }, evnt || null);
             }
         },
         hideOptionPanel(evnt) {
@@ -597,7 +603,7 @@ export default {
                     $tree.setAllCheckboxNode(true).then(({ checkNodeKeys, checkNodes }) => {
                         $xeTreeSelect.changeEvent($event, checkNodeKeys, checkNodes[0]);
                         $xeTreeSelect.dispatchEvent('all-change', { value: checkNodeKeys }, $event);
-                        if (XEUtils.isBoolean(autoClose) ? autoClose : checkedClosable) {
+                        if (XEUtils.isBoolean(checkedClosable) ? checkedClosable : autoClose) {
                             $xeTreeSelect.hideOptionPanel($event);
                         }
                     });
@@ -613,7 +619,7 @@ export default {
             if ($tree) {
                 const value = multiple ? [] : null;
                 $tree.clearCheckboxNode().then(() => {
-                    if (XEUtils.isBoolean(autoClose) ? autoClose : clearClosable) {
+                    if (XEUtils.isBoolean(clearClosable) ? clearClosable : autoClose) {
                         $xeTreeSelect.hideOptionPanel($event);
                     }
                 });
@@ -715,7 +721,7 @@ export default {
             if (!isDisabled) {
                 if (!reactData.visiblePanel) {
                     reactData.triggerFocusPanel = true;
-                    $xeTreeSelect.showOptionPanel();
+                    $xeTreeSelect.showOptionPanel(evnt);
                     setTimeout(() => {
                         reactData.triggerFocusPanel = false;
                     }, 150);
@@ -769,7 +775,7 @@ export default {
                     $xeTreeSelect.hideOptionPanel($event);
                 }
                 else {
-                    $xeTreeSelect.showOptionPanel();
+                    $xeTreeSelect.showOptionPanel($event);
                 }
             }
         },

package/es/tree-select/style.css

@@ -85,6 +85,7 @@
 
 .vxe-tree-select--panel-search {
   display: block;
+  padding: var(--vxe-ui-current-padding);
 }
 .vxe-tree-select--panel-search .vxe-tree-select-search--input {
   width: 100%;
@@ -132,14 +133,6 @@
   pointer-events: auto;
 }
 
-.vxe-tree-select--panel-search {
-  display: block;
-  padding: var(--vxe-ui-current-padding);
-}
-.vxe-tree-select--panel-search .vxe-tree-select-search--input {
-  width: 100%;
-}
-
 .vxe-tree-select--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }

package/es/tree-select/style.min.css

@@ -1 +1 @@
-.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper{padding-top:0}.vxe-tree-select.is--filterable .vxe-tree-select--panel-header{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--footer-button,.vxe-tree-select--header-button{display:flex;flex-direction:row;white-space:nowrap}.vxe-tree-select--total-btns{padding-left:var(--vxe-ui-current-padding);flex-shrink:0}.vxe-tree-select--oper-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.vxe-tree-select--expand-btns,.vxe-tree-select--footer-button,.vxe-tree-select--selected-btns{display:flex;flex-direction:row;flex-grow:1}.vxe-tree-select--selected-btns+.vxe-tree-select--expand-btns{padding-left:2.2em}.vxe-tree-select--panel-wrapper{display:flex;flex-direction:column;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-search{display:block;padding:var(--vxe-ui-current-padding)}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-current-padding) 0;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{--vxe-ui-current-padding:var(--vxe-ui-layout-padding-default);--vxe-ui-tree-node-root-indent:var(--vxe-ui-current-padding)}.vxe-tree-select--panel.size--mini,.vxe-tree-select--panel.size--small,.vxe-tree-select.size--mini,.vxe-tree-select.size--small{--vxe-ui-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-tree-select{position:relative;display:inline-block;width:180px;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-tree-select.is--filterable .vxe-tree-select-tree--wrapper{padding-top:0}.vxe-tree-select.is--filterable .vxe-tree-select--panel-header{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-tree-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-tree-select>.vxe-input{width:100%}.vxe-tree-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-tree-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-tree-select--panel{pointer-events:none;display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-tree-select--panel:not(.is--transfer){min-width:100%}.vxe-tree-select--panel.is--transfer{position:fixed}.vxe-tree-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-tree-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-tree-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-tree-select--panel.ani--enter>div::after{display:none}.vxe-tree-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tree-select--panel-search{display:block;padding:var(--vxe-ui-current-padding)}.vxe-tree-select--panel-search .vxe-tree-select-search--input{width:100%}.vxe-tree-select--footer-button,.vxe-tree-select--header-button{display:flex;flex-direction:row;white-space:nowrap}.vxe-tree-select--total-btns{padding-left:var(--vxe-ui-current-padding);flex-shrink:0}.vxe-tree-select--oper-btns{display:flex;flex-direction:row;flex-grow:1;justify-content:right}.vxe-tree-select--expand-btns,.vxe-tree-select--footer-button,.vxe-tree-select--selected-btns{display:flex;flex-direction:row;flex-grow:1}.vxe-tree-select--selected-btns+.vxe-tree-select--expand-btns{padding-left:2.2em}.vxe-tree-select--panel-wrapper{display:flex;flex-direction:column;position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color);pointer-events:auto}.vxe-tree-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-tree-select--panel-footer,.vxe-tree-select--panel-header{padding:4px 0}.vxe-tree-select-tree--wrapper{position:relative;overflow:auto;padding:var(--vxe-ui-current-padding) 0;outline:0}.vxe-tree-select--tree{width:100%}.vxe-tree-select--tree .vxe-tree--node-item.is-checkbox--checked>.vxe-tree--node-item-inner,.vxe-tree-select--tree .vxe-tree--node-item.is-radio--checked>.vxe-tree--node-item-inner{color:var(--vxe-ui-font-primary-color)}.vxe-tree-select--tree .vxe-tree--node-item-inner{cursor:pointer}.vxe-tree-select,.vxe-tree-select--panel{--vxe-ui-current-padding:var(--vxe-ui-layout-padding-default);--vxe-ui-tree-node-root-indent:var(--vxe-ui-current-padding)}.vxe-tree-select--panel.size--mini,.vxe-tree-select--panel.size--small,.vxe-tree-select.size--mini,.vxe-tree-select.size--small{--vxe-ui-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-tree-select,.vxe-tree-select--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-tree-select--panel.size--medium,.vxe-tree-select.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tree-select--panel.size--small,.vxe-tree-select.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tree-select--panel.size--mini,.vxe-tree-select.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "3.14.38";
+export const version = "3.14.40";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {
@@ -61,7 +61,10 @@ setConfig({
     },
     carouselItem: {},
     cascader: {
-        autoClose: true
+        showFullLabel: true,
+        treeConfig: {
+            showIcon: true
+        }
     },
     checkbox: {},
     checkboxButton: {},
@@ -415,7 +418,6 @@ setConfig({
         }
     },
     treeSelect: {
-        autoClose: null,
         // separator: '/',
         virtualYConfig: {
             enabled: true,
@@ -653,7 +655,11 @@ setIcon({
     BACKTOP_TOP: iconPrefix + 'top',
     // context-menu
     CONTEXT_MENU_OPTION_LOADING: iconPrefix + 'spinner roll',
-    CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right'
+    CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right',
+    // cascader
+    CASCADER_NODE_OPEN: iconPrefix + 'arrow-right',
+    CASCADER_NODE_CLOSE: iconPrefix + 'arrow-right',
+    CASCADER_NODE_LOADED: iconPrefix + 'spinner roll'
 });
 export * from '@vxe-ui/core';
 export default VxeUI;

package/es/ui/src/dom.js

@@ -143,7 +143,7 @@ export function isNodeElement(elem) {
     return elem && elem.nodeType === 1;
 }
 export function updatePanelPlacement(targetElem, panelElem, options) {
-    const { placement, defaultPlacement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 18 }, options);
+    const { placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({ teleportTo: false, marginSize: 18, isMinWidth: true }, options);
     let panelPlacement = 'bottom';
     let top = '';
     let bottom = '';
@@ -214,7 +214,7 @@ export function updatePanelPlacement(targetElem, panelElem, options) {
             else if (!placement) {
                 // 如果下面不够放，则向上
                 top = targetHeight;
-                if (targetRect.top + targetRect.height + marginSize > visibleHeight) {
+                if (targetRect.top + targetHeight + panelHeight + marginSize > visibleHeight) {
                     // 如果上面不够放，则向下（优先）
                     if (targetRect.top - targetHeight - panelHeight > marginSize) {
                         panelPlacement = 'top';
@@ -240,7 +240,7 @@ export function updatePanelPlacement(targetElem, panelElem, options) {
         if (XEUtils.isNumber(right)) {
             stys.right = toCssUnit(right);
         }
-        if (XEUtils.isNumber(minWidth)) {
+        if (isMinWidth && XEUtils.isNumber(minWidth)) {
             stys.minWidth = toCssUnit(minWidth);
         }
     }

package/es/ui/src/log.js

@@ -1,4 +1,4 @@
 import { log } from '@vxe-ui/core';
-const version = `ui v${"3.14.38"}`;
+const version = `ui v${"3.14.40"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/es/vxe-cascader/style.css

@@ -4,11 +4,12 @@
   width: 180px;
   color: var(--vxe-ui-font-color);
   text-align: left;
+  --vxe-ui-cascader-chunk-size: 1;
 }
 .vxe-cascader > .vxe-input .vxe-input--inner {
   cursor: pointer;
 }
-.vxe-cascader.is--filterable .vxe-cascader-tree--wrapper {
+.vxe-cascader.is--filterable .vxe-cascader-chunk--wrapper {
   padding-top: 0;
 }
 .vxe-cascader.is--filterable .vxe-cascader--panel-header {
@@ -46,7 +47,7 @@
   text-align: left;
 }
 .vxe-cascader--panel:not(.is--transfer) {
-  min-width: 100%;
+  min-width: var(--vxe-ui-cascader-node-width);
 }
 .vxe-cascader--panel.is--transfer {
   position: fixed;
@@ -85,33 +86,44 @@
 
 .vxe-cascader--panel-search {
   display: block;
+  padding: var(--vxe-ui-current-padding);
+  width: calc(var(--vxe-ui-cascader-node-width) * var(--vxe-ui-cascader-chunk-size));
 }
 .vxe-cascader--panel-search .vxe-cascader-search--input {
   width: 100%;
 }
 
-.vxe-cascader--header-button {
+.vxe-cascader--header-button,
+.vxe-cascader--footer-button {
   display: flex;
   flex-direction: row;
   white-space: nowrap;
 }
 
-.vxe-cascader--header-total {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
+.vxe-cascader--total-btns {
+  padding-left: var(--vxe-ui-current-padding);
   flex-shrink: 0;
-  padding-left: 0.8em;
 }
 
-.vxe-cascader--header-btns {
+.vxe-cascader--oper-btns {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   justify-content: right;
 }
 
+.vxe-cascader--footer-button,
+.vxe-cascader--selected-btns,
+.vxe-cascader--expand-btns {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.vxe-cascader--selected-btns + .vxe-cascader--expand-btns {
+  padding-left: 2.2em;
+}
+
 .vxe-cascader--panel-wrapper {
   display: flex;
   flex-direction: column;
@@ -123,14 +135,6 @@
   pointer-events: auto;
 }
 
-.vxe-cascader--panel-search {
-  display: block;
-  padding: var(--vxe-ui-layout-padding-default);
-}
-.vxe-cascader--panel-search .vxe-cascader-search--input {
-  width: 100%;
-}
-
 .vxe-cascader--panel-header {
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
@@ -144,13 +148,188 @@
   padding: 4px 0;
 }
 
-.vxe-cascader-tree--wrapper {
+.vxe-cascader--checkbox-option {
+  padding-right: 0.4em;
+}
+.vxe-cascader--checkbox-option {
+  cursor: pointer;
+}
+.vxe-cascader--checkbox-option .vxe-checkbox--icon {
+  font-size: 1.22em;
+}
+.vxe-cascader--checkbox-option .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-border-color);
+  vertical-align: middle;
+  font-weight: 700;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-cascader--checkbox-option.is--checked, .vxe-cascader--checkbox-option.is--indeterminate {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--checkbox-option.is--checked .vxe-checkbox--icon, .vxe-cascader--checkbox-option.is--indeterminate .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--checkbox-option.is--hidden {
+  cursor: default;
+}
+.vxe-cascader--checkbox-option.is--readonly {
+  cursor: auto;
+}
+.vxe-cascader--checkbox-option.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-cascader--checkbox-option.is--disabled .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-cascader--checkbox-option .vxe-checkbox--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+}
+
+.vxe-cascader--radio-option {
+  padding-right: 0.4em;
+}
+.vxe-cascader--radio-option {
+  cursor: pointer;
+}
+.vxe-cascader--radio-option .vxe-radio--icon {
+  font-size: 1.26em;
+}
+.vxe-cascader--radio-option .vxe-radio--icon {
+  color: var(--vxe-ui-input-border-color);
+  border-radius: 50%;
+  vertical-align: middle;
+  font-weight: 700;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-cascader--radio-option.is--checked {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--radio-option.is--checked .vxe-radio--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--radio-option:not(.is--disabled):hover .vxe-radio--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-cascader--radio-option.is--readonly {
+  cursor: auto;
+}
+.vxe-cascader--radio-option.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-cascader--radio-option.is--disabled .vxe-radio--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-cascader--radio-option .vxe-radio--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+}
+
+.vxe-cascader--panel-body {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
+.vxe-cascader-chunk--wrapper {
   position: relative;
-  overflow: auto;
-  padding: var(--vxe-ui-layout-padding-default);
+  display: flex;
+  flex-direction: row;
   outline: 0;
 }
 
+.vxe-cascader-chunk--item-wrapper {
+  flex-shrink: 0;
+  border-left: 1px solid var(--vxe-ui-base-popup-border-color);
+  padding: var(--vxe-ui-current-padding) 0;
+}
+.vxe-cascader-chunk--item-wrapper:first-child {
+  border-left: 0;
+}
+.vxe-cascader-chunk--item-wrapper .vxe-list .vxe-list--virtual-wrapper {
+  height: var(--vxe-ui-cascader-chunk-height);
+  width: var(--vxe-ui-cascader-node-width);
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.vxe-cascader-chunk--item-wrapper .vxe-list .vxe-list--virtual-wrapper:hover {
+  overflow-y: auto;
+}
+.vxe-cascader-chunk--item-wrapper .vxe-list .vxe-list--body {
+  width: var(--vxe-ui-cascader-node-width);
+}
+
+.vxe-cascader-chunk--node-item {
+  display: flex;
+  flex-direction: row;
+  height: var(--vxe-ui-cascader-node-height);
+  line-height: var(--vxe-ui-cascader-node-height);
+  padding: 0 calc(var(--vxe-ui-current-padding) + 18px) 0 var(--vxe-ui-current-padding);
+  cursor: pointer;
+}
+.vxe-cascader-chunk--node-item:hover {
+  background-color: var(--vxe-ui-cascader-node-hover-background-color);
+}
+.vxe-cascader-chunk--node-item.is--current, .vxe-cascader-chunk--node-item.is--expand {
+  font-weight: 700;
+}
+.vxe-cascader-chunk--node-item.is--current {
+  background-color: var(--vxe-ui-cascader-node-current-background-color);
+}
+.vxe-cascader-chunk--node-item.is-checkbox--indeterminate {
+  color: var(--vxe-ui-cascader-node-checkbox-indeterminate-color);
+}
+.vxe-cascader-chunk--node-item.is-radio--checked, .vxe-cascader-chunk--node-item.is-checkbox--checked {
+  color: var(--vxe-ui-cascader-node-checkbox-checked-color);
+}
+
+.vxe-cascader-chunk--node-item-inner {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.vxe-cascader-chunk--node-item-title {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-cascader-chunk--node-item-switcher {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  width: 1em;
+  position: relative;
+}
+.vxe-cascader-chunk--node-item-switcher .vxe-cascader--node-item-icon > i {
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
+}
+
+.vxe-cascader,
+.vxe-cascader--panel {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-cascader.size--small, .vxe-cascader.size--mini,
+.vxe-cascader--panel.size--small,
+.vxe-cascader--panel.size--mini {
+  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
+}
+
 .vxe-cascader,
 .vxe-cascader--panel {
   font-size: var(--vxe-ui-font-size-default);