vxe-pc-ui 4.15.11 → 4.15.13

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.15.11"}`;
+const uiVersion = `ui v${"4.15.13"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$b = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.15.11";
+const version = "4.15.13";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -315,6 +315,12 @@ setConfig$1({
     listView: {},
     list: {
         // size: null,
+        dragConfig: {
+            showIcon: true,
+            animation: true,
+            showGuidesStatus: true,
+            showDragTip: true
+        },
         virtualYConfig: {
             enabled: true,
             gt: 100
@@ -470,6 +476,7 @@ setConfig$1({
             }
         }
     },
+    tableTransfer: {},
     tabs: {
     // destroyOnClose: false
     },
@@ -497,6 +504,7 @@ setConfig$1({
         leaveDelay: 300,
         isArrow: true
     },
+    transfer: {},
     tree: {
         // autoResize: false,
         indent: 20,
@@ -758,7 +766,11 @@ setIcon({
     // cascader
     CASCADER_NODE_OPEN: iconPrefix + 'arrow-right',
     CASCADER_NODE_CLOSE: iconPrefix + 'arrow-right',
-    CASCADER_NODE_LOADED: iconPrefix + 'spinner roll'
+    CASCADER_NODE_LOADED: iconPrefix + 'spinner roll',
+    // list
+    LIST_DRAG: iconPrefix + 'drag-handle',
+    LIST_DRAG_STATUS_NODE: iconPrefix + 'sort',
+    LIST_DRAG_DISABLED: iconPrefix + 'no-drop'
 });
 
 var zhCN = {
@@ -876,6 +888,10 @@ var zhCN = {
             overSizeErr: '已超出最大可选数量 {0} 个，超出部分将被忽略！',
             searchEmpty: '未匹配到数据！'
         },
+        list: {
+            allChecked: '全选',
+            dragTip: '移动：{0}'
+        },
         tree: {
             searchEmpty: '未匹配到数据！',
             dragTip: '移动：{0}'
@@ -2484,6 +2500,12 @@ function getFuncText(content, args) {
     const translate = getConfig$3().translate;
     return `${translate ? translate('' + content, args) : content}`;
 }
+function getText(content) {
+    if (XEUtils.eqNull(content)) {
+        return '';
+    }
+    return '' + content;
+}
 /**
  * 判断值为：'' | null | undefined 时都属于空值
  */
@@ -2493,6 +2515,12 @@ function eqEmptyValue(cellValue) {
 function handleBooleanDefaultValue(value) {
     return XEUtils.isBoolean(value) ? value : null;
 }
+function enModelValue(nodeid) {
+    return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
+}
+function deModelValue(nodeid) {
+    return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
+}
 
 var VxeTooltipComponent = defineVxeComponent({
     name: 'VxeTooltip',
@@ -3803,13 +3831,13 @@ dynamicApp.use(VxeButton);
 VxeUI.component(VxeButtonComponent);
 const Button = VxeButton;
 
-const { errLog: errLog$g } = createComponentLog('backtop');
-function createInternalData$f() {
+const { errLog: errLog$h } = createComponentLog('backtop');
+function createInternalData$h() {
     return {
         targetEl: null
     };
 }
-function createReactData$g() {
+function createReactData$i() {
     return {
         showBtn: false,
         backtopZindex: 0
@@ -3888,8 +3916,8 @@ var VxeBacktopComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$f();
-        const reactData = reactive(createReactData$g());
+        const internalData = createInternalData$h();
+        const reactData = reactive(createReactData$i());
         const refMaps = {
             refElem
         };
@@ -3981,13 +4009,13 @@ var VxeBacktopComponent = defineVxeComponent({
                 const { target } = props;
                 if (!target) {
                     removeScrollEvent();
-                    errLog$g('vxe.error.reqProp', ['target']);
+                    errLog$h('vxe.error.reqProp', ['target']);
                     return;
                 }
                 if (XEUtils.isString(target)) {
                     const tEl = document.querySelector(target);
                     if (!tEl) {
-                        errLog$g('vxe.error.errProp', [`target=${target}`, 'body']);
+                        errLog$h('vxe.error.errProp', [`target=${target}`, 'body']);
                     }
                     const { targetEl } = internalData;
                     if (targetEl !== tEl) {
@@ -4066,8 +4094,8 @@ var VxeBacktopComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             removeScrollEvent();
-            XEUtils.assign(reactData, createReactData$g());
-            XEUtils.assign(internalData, createInternalData$f());
+            XEUtils.assign(reactData, createReactData$i());
+            XEUtils.assign(internalData, createInternalData$h());
         });
         $xeBacktop.renderVN = renderVN;
         return $xeBacktop;
@@ -4688,7 +4716,7 @@ function checkDateInputFormat(numStr, formatKey) {
     return numVal;
 }
 
-const { errLog: errLog$f } = createComponentLog('calendar');
+const { errLog: errLog$g } = createComponentLog('calendar');
 const { menus: menus$2, getConfig: getConfig$2, getI18n: getI18n$1 } = VxeUI;
 var VxeCalendarComponent = defineVxeComponent({
     name: 'VxeCalendar',
@@ -5956,7 +5984,7 @@ var VxeCalendarComponent = defineVxeComponent({
             const { menuConfig } = props;
             const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
             if (menuConfig && !VxeUIContextMenu) {
-                errLog$f('vxe.error.reqComp', ['vxe-context-menu']);
+                errLog$g('vxe.error.reqComp', ['vxe-context-menu']);
             }
             dateOpenPanel();
         });
@@ -6731,28 +6759,80 @@ dynamicApp.use(VxeCarouselItem);
 VxeUI.component(VxeCarouselItemComponent);
 const CarouselItem = VxeCarouselItem;
 
-function enNodeValue$1(nodeid) {
+function enNodeValue(nodeid) {
     return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
 }
-function deNodeValue$1(nodeid) {
+function deNodeValue(nodeid) {
     return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
 
-function createReactData$f() {
+// 跨列表拖拽
+const crossListDragRowInfo = reactive({
+    row: null
+});
+function getCrossListDragRowInfo() {
+    return crossListDragRowInfo;
+}
+
+const rowMoveCls = 'row--drag-move';
+/**
+ * 上下拖拽
+ */
+function moveRowAnimateToTb(elemList, offsetTop) {
+    XEUtils.arrayEach(elemList, trEl => {
+        trEl.style.transform = `translateY(${offsetTop}px)`;
+    });
+    requestAnimationFrame(() => {
+        XEUtils.arrayEach(elemList, trEl => {
+            addClass(trEl, rowMoveCls);
+            trEl.style.transform = '';
+        });
+    });
+}
+function clearRowAnimate(elem, clss) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
+        }
+    }, 500);
+}
+
+const { errLog: errLog$f } = createComponentLog('tree');
+function getRowKeyByField(row, keyField) {
+    return row ? ('' + (row[keyField] || '')) : '';
+}
+function getRowIdByField(row, keyField) {
+    if (!row) {
+        return '';
+    }
+    const rowKey = getRowKeyByField(row, keyField);
+    return enModelValue(rowKey);
+}
+function createReactData$h() {
     return {
         scrollYLoad: false,
         bodyHeight: 0,
+        headHeight: 0,
+        footHeight: 0,
         customHeight: 0,
         customMaxHeight: 0,
         parentHeight: 0,
         topSpaceHeight: 0,
-        items: []
+        rowList: [],
+        selectRadioRow: null,
+        currRowFlag: 1,
+        updateCheckboxFlag: 1,
+        isAllChecked: false,
+        isAllIndeterminate: false,
+        dragRow: null,
+        dragTipText: ''
     };
 }
-function createInternalData$e() {
+function createInternalData$g() {
     return {
         resizeObserver: undefined,
         fullData: [],
+        fullKeyMaps: {},
         lastScrollLeft: 0,
         lastScrollTop: 0,
         scrollYStore: {
@@ -6761,7 +6841,11 @@ function createInternalData$e() {
             visibleSize: 0,
             offsetSize: 0,
             rowHeight: 0
-        }
+        },
+        currentRow: null,
+        selectCheckboxMaps: {}
+        // prevDragRow: null,
+        // prevDragPos: ''
     };
 }
 var VxeListComponent = defineVxeComponent({
@@ -6781,22 +6865,52 @@ var VxeListComponent = defineVxeComponent({
             default: () => getConfig$3().list.autoResize
         },
         syncResize: [Boolean, String, Number],
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig$3().list.showRadio
+        },
+        checkRowKey: [String, Number],
+        radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig$3().list.showCheckbox
+        },
+        checkRowKeys: Array,
+        checkboxConfig: Object,
+        rowConfig: Object,
+        dragConfig: Object,
         virtualYConfig: Object,
         scrollY: Object
     },
     emits: [
-        'scroll'
+        'update:checkRowKey',
+        'update:checkRowKeys',
+        'row-click',
+        'row-dblclick',
+        'current-change',
+        'radio-change',
+        'checkbox-change',
+        'checkbox-all',
+        'scroll',
+        'row-dragstart',
+        'row-dragover',
+        'row-dragend'
     ],
     setup(props, context) {
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$f());
-        const internalData = createInternalData$e();
+        const reactData = reactive(createReactData$h());
+        const internalData = createInternalData$g();
+        const crossListDragRowInfo = getCrossListDragRowInfo();
         const refElem = ref();
+        const refHeaderElem = ref();
+        const refFooterElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
+        const refDragRowLineElem = ref();
+        const refDragTipElem = ref();
         const refMaps = {
             refElem
         };
@@ -6808,25 +6922,70 @@ var VxeListComponent = defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
+        const computeRowOpts = computed(() => {
+            return Object.assign({}, getConfig$3().list.rowConfig, props.rowConfig);
+        });
+        const computeDragOpts = computed(() => {
+            return Object.assign({}, getConfig$3().list.dragConfig, props.dragConfig);
+        });
         const computeSYOpts = computed(() => {
             return Object.assign({}, getConfig$3().list.virtualYConfig || getConfig$3().list.scrollY, props.virtualYConfig || props.scrollY);
         });
-        const computeStyles = computed(() => {
+        const computeKeyField = computed(() => {
+            const rowOpts = computeRowOpts.value;
+            const { keyField } = rowOpts;
+            return keyField || '';
+        });
+        const computeIsDrag = computed(() => {
+            const { dragConfig } = props;
+            const dragOpts = computeDragOpts.value;
+            return dragConfig && isEnableConf(dragOpts);
+        });
+        const computeRowHeight = computed(() => {
+            const rowOpts = computeRowOpts.value;
+            const { height } = rowOpts;
+            return height;
+        });
+        const computeRadioOpts = computed(() => {
+            return Object.assign({ showIcon: true }, getConfig$3().list.radioConfig, props.radioConfig);
+        });
+        const computeCheckboxOpts = computed(() => {
+            return Object.assign({ showIcon: true }, getConfig$3().list.checkboxConfig, props.checkboxConfig);
+        });
+        const computeWrapperStyles = computed(() => {
+            const rowHeight = computeRowHeight.value;
+            const style = {};
+            if (rowHeight) {
+                style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
+            }
+            return style;
+        });
+        const computeVirtualStyles = computed(() => {
             const { height, maxHeight } = props;
-            const { customHeight, customMaxHeight } = reactData;
+            const { customHeight, customMaxHeight, headHeight, footHeight } = reactData;
             const style = {};
             if (height) {
-                style.height = `${customHeight}px`;
+                style.height = toCssUnit(Math.max(20, customHeight - headHeight - footHeight));
             }
             else if (maxHeight) {
                 style.height = 'auto';
-                style.maxHeight = `${customMaxHeight}px`;
+                style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
             }
             return style;
         });
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $list: $xeList }, params));
         };
+        const emitCheckboxMode = (value) => {
+            emit('update:checkRowKeys', value);
+        };
+        const emitRadioMode = (value) => {
+            emit('update:checkRowKey', value);
+        };
+        const getRowId = (row) => {
+            const keyField = computeKeyField.value;
+            return getRowIdByField(row, keyField);
+        };
         const calcTableHeight = (key) => {
             const { parentHeight } = reactData;
             const val = props[key];
@@ -6848,6 +7007,10 @@ var VxeListComponent = defineVxeComponent({
             return num;
         };
         const updateHeight = () => {
+            const headEl = refHeaderElem.value;
+            const footEl = refFooterElem.value;
+            reactData.headHeight = headEl ? Math.floor(headEl.offsetHeight) : 0;
+            reactData.footHeight = footEl ? Math.floor(footEl.offsetHeight) : 0;
             reactData.customHeight = calcTableHeight('height');
             reactData.customMaxHeight = calcTableHeight('maxHeight');
         };
@@ -6860,7 +7023,7 @@ var VxeListComponent = defineVxeComponent({
         const handleData = () => {
             const { scrollYLoad } = reactData;
             const { fullData, scrollYStore } = internalData;
-            reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            reactData.rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
             return nextTick();
         };
         const updateYData = () => {
@@ -6874,17 +7037,17 @@ var VxeListComponent = defineVxeComponent({
                 const virtualBodyElem = refVirtualBody.value;
                 const sYOpts = computeSYOpts.value;
                 let rowHeight = 0;
-                let firstItemElem;
+                let firstRowElem;
                 if (virtualBodyElem) {
                     if (sYOpts.sItem) {
-                        firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
+                        firstRowElem = virtualBodyElem.querySelector(sYOpts.sItem);
                     }
-                    if (!firstItemElem) {
-                        firstItemElem = virtualBodyElem.children[0];
+                    if (!firstRowElem) {
+                        firstRowElem = virtualBodyElem.children[0];
                     }
                 }
-                if (firstItemElem) {
-                    rowHeight = firstItemElem.offsetHeight;
+                if (firstRowElem) {
+                    rowHeight = firstRowElem.offsetHeight;
                 }
                 rowHeight = Math.max(12, rowHeight);
                 scrollYStore.rowHeight = rowHeight;
@@ -6998,6 +7161,44 @@ var VxeListComponent = defineVxeComponent({
             }
             dispatchEvent('scroll', { scrollLeft, scrollTop, isX, isY }, evnt);
         };
+        const updateRadioModeValue = () => {
+            const { checkRowKey } = props;
+            const { fullKeyMaps } = internalData;
+            if (checkRowKey) {
+                const row = fullKeyMaps[checkRowKey];
+                reactData.selectRadioRow = row || null;
+            }
+            else {
+                reactData.selectRadioRow = null;
+            }
+        };
+        const updateCheckboxModeValue = () => {
+            const { checkRowKeys } = props;
+            const { fullKeyMaps } = internalData;
+            const keyField = computeKeyField.value;
+            const selectMaps = {};
+            if (checkRowKeys && checkRowKeys.length) {
+                for (const rowKey of checkRowKeys) {
+                    const row = fullKeyMaps[rowKey];
+                    if (row) {
+                        const rowid = getRowIdByField(row, keyField);
+                        selectMaps[rowid] = row;
+                    }
+                }
+            }
+            internalData.selectCheckboxMaps = selectMaps;
+            updateCheckboxStatus();
+        };
+        const cacheRowMap = () => {
+            const { fullData } = internalData;
+            const keyField = computeKeyField.value;
+            const keyMaps = {};
+            fullData.forEach(row => {
+                const rowKey = getRowKeyByField(row, keyField);
+                keyMaps[rowKey] = row;
+            });
+            internalData.fullKeyMaps = keyMaps;
+        };
         /**
          * 加载数据
          * @param {Array} datas 数据
@@ -7014,11 +7215,685 @@ var VxeListComponent = defineVxeComponent({
             internalData.fullData = fullData;
             // 如果gt为0，则总是启用
             reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
+            cacheRowMap();
             handleData();
+            updateRadioModeValue();
+            updateCheckboxModeValue();
             return computeScrollLoad().then(() => {
                 refreshScroll();
             });
         };
+        const clearRowDropOrigin = () => {
+            const el = refElem.value;
+            if (el) {
+                const clss = 'row--drag-origin';
+                XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+                    elem.draggable = false;
+                    removeClass(elem, clss);
+                });
+            }
+        };
+        const updateRowDropOrigin = (row) => {
+            const sYOpts = computeSYOpts.value;
+            const { sItem } = sYOpts;
+            const el = refElem.value;
+            if (el) {
+                const clss = 'row--drag-origin';
+                const rowid = getRowId(row);
+                XEUtils.arrayEach(el.querySelectorAll(`.vxe-list--row[rowid="${rowid}"]` + (sItem ? `${sItem}[rowid="${rowid}"]` : '')), (elem) => {
+                    addClass(elem, clss);
+                });
+            }
+        };
+        const updateRowDropTipContent = (rowEl) => {
+            const { dragRow } = reactData;
+            const dragOpts = computeDragOpts.value;
+            const { tooltipMethod } = dragOpts;
+            const rTooltipMethod = tooltipMethod;
+            let tipContent = '';
+            if (rTooltipMethod) {
+                const rtParams = {
+                    $list: $xeList,
+                    row: dragRow
+                };
+                tipContent = `${rTooltipMethod(rtParams) || ''}`;
+            }
+            else {
+                tipContent = getI18n$2('vxe.list.dragTip', [rowEl.textContent || '']);
+            }
+            reactData.dragTipText = tipContent;
+        };
+        const hideDropTip = () => {
+            const rdTipEl = refDragTipElem.value;
+            const rdLineEl = refDragRowLineElem.value;
+            if (rdTipEl) {
+                rdTipEl.style.display = '';
+            }
+            if (rdLineEl) {
+                rdLineEl.style.display = '';
+            }
+        };
+        const clearCrossListDragStatus = () => {
+            // crossListDragRowObj = null
+            crossListDragRowInfo.row = null;
+        };
+        const clearDragStatus = () => {
+            const { dragRow } = reactData;
+            if (dragRow) {
+                hideDropTip();
+                clearRowDropOrigin();
+                clearCrossListDragStatus();
+                reactData.dragRow = null;
+            }
+        };
+        const handleRowDragMousedownEvent = (evnt, params) => {
+            evnt.stopPropagation();
+            const { row } = params;
+            const dragConfig = computeDragOpts.value;
+            const { trigger, dragStartMethod } = dragConfig;
+            const dragEl = evnt.currentTarget;
+            const rowEl = trigger === 'row' ? dragEl : dragEl.parentElement.parentElement;
+            clearRowDropOrigin();
+            if (dragStartMethod && !dragStartMethod(params)) {
+                rowEl.draggable = false;
+                reactData.dragRow = null;
+                hideDropTip();
+                return;
+            }
+            const dragstartEventParams = {
+                row
+            };
+            reactData.dragRow = row;
+            rowEl.draggable = true;
+            updateRowDropOrigin(row);
+            updateRowDropTipContent(rowEl);
+            dispatchEvent('row-dragstart', dragstartEventParams, evnt);
+        };
+        const handleRowDragMouseupEvent = () => {
+            clearDragStatus();
+        };
+        const showDropTip = (evnt, rowEl, showLine, dragPos) => {
+            const wrapperEl = refElem.value;
+            if (!wrapperEl) {
+                return;
+            }
+            const wrapperRect = wrapperEl.getBoundingClientRect();
+            const wrapperHeight = wrapperEl.clientHeight;
+            if (rowEl) {
+                const rdLineEl = refDragRowLineElem.value;
+                if (rdLineEl) {
+                    if (showLine) {
+                        const trRect = rowEl.getBoundingClientRect();
+                        let rowHeight = rowEl.clientHeight;
+                        const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+                        if (offsetTop + rowHeight > wrapperHeight) {
+                            rowHeight = wrapperHeight - offsetTop;
+                        }
+                        rdLineEl.style.display = 'block';
+                        rdLineEl.style.top = `${offsetTop}px`;
+                        rdLineEl.style.height = `${rowHeight}px`;
+                        rdLineEl.setAttribute('drag-pos', dragPos);
+                    }
+                    else {
+                        rdLineEl.style.display = '';
+                    }
+                }
+            }
+            const rdTipEl = refDragTipElem.value;
+            if (rdTipEl) {
+                rdTipEl.style.display = 'block';
+                rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+                rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 1, evnt.clientX - wrapperRect.x)}px`;
+                rdTipEl.setAttribute('drag-status', showLine ? 'normal' : 'disabled');
+            }
+        };
+        const clearRowDragData = () => {
+            const wrapperEl = refElem.value;
+            const dtClss = ['.vxe-list--row'];
+            hideDropTip();
+            clearRowDropOrigin();
+            clearRowAnimate(wrapperEl, dtClss);
+            reactData.dragRow = null;
+        };
+        const handleRowDragSwapEvent = (evnt, dragRow, prevDragRow, prevDragPos) => {
+            const { fullData } = internalData;
+            const dragConfig = computeDragOpts.value;
+            const { animation, dragEndMethod } = dragConfig;
+            const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+            const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+            const el = refElem.value;
+            const errRest = {
+                status: false
+            };
+            if (!(el && prevDragRow && dragRow)) {
+                return Promise.resolve(errRest);
+            }
+            // 判断是否有拖动
+            if (prevDragRow !== dragRow) {
+                const dragParams = {
+                    oldRow: dragRow,
+                    newRow: prevDragRow,
+                    dragRow,
+                    dragPos: prevDragPos,
+                    offsetIndex: dragOffsetIndex
+                };
+                const dragRowid = getRowId(dragRow);
+                const _dragRowIndex = findRowIndexOfByKey(fullData, dragRowid);
+                const newRowid = getRowKey(prevDragRow);
+                let dragRowHeight = 0;
+                let dragOffsetTop = -1;
+                if (animation) {
+                    const prevRowEl = el.querySelector(`.vxe-list--row[rowid="${newRowid}"]`);
+                    const oldRowEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
+                    const targetRowEl = prevRowEl || oldRowEl;
+                    if (targetRowEl) {
+                        dragRowHeight = targetRowEl.offsetHeight;
+                    }
+                    if (oldRowEl) {
+                        dragOffsetTop = oldRowEl.offsetTop;
+                    }
+                }
+                let oafIndex = -1;
+                let nafIndex = -1;
+                return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
+                    if (!status) {
+                        return errRest;
+                    }
+                    // 移出
+                    oafIndex = findRowIndexOf(fullData, dragRow);
+                    fullData.splice(oafIndex, 1);
+                    // 插入
+                    const pafIndex = findRowIndexOf(fullData, prevDragRow);
+                    nafIndex = pafIndex + dragOffsetIndex;
+                    fullData.splice(nafIndex, 0, dragRow);
+                    handleData();
+                    if (reactData.scrollYLoad) {
+                        updateYSpace();
+                    }
+                    if (evnt) {
+                        const dragendEventParams = {
+                            oldRow: dragRow,
+                            newRow: prevDragRow,
+                            dragRow,
+                            dragPos: prevDragPos,
+                            offsetIndex: dragOffsetIndex,
+                            _index: {
+                                newIndex: nafIndex,
+                                oldIndex: oafIndex
+                            }
+                        };
+                        dispatchEvent('row-dragend', dragendEventParams, evnt);
+                    }
+                    return nextTick().then(() => {
+                        if (animation) {
+                            const { rowList } = reactData;
+                            const { fullData } = internalData;
+                            const _newRowIndex = findRowIndexOfByKey(fullData, dragRowid);
+                            const firstRow = fullData[0];
+                            const _firstRowIndex = findRowIndexOf(fullData, firstRow);
+                            const wrapperEl = el;
+                            if (_firstRowIndex > -1) {
+                                const _lastRowIndex = _firstRowIndex + fullData.length;
+                                let rsIndex = -1;
+                                let reIndex = -1;
+                                let offsetRate = 1;
+                                if (_dragRowIndex < _firstRowIndex) {
+                                    // 从上往下虚拟拖拽
+                                    rsIndex = 0;
+                                    reIndex = _newRowIndex - _firstRowIndex;
+                                }
+                                else if (_dragRowIndex > _lastRowIndex) {
+                                    // 从下往上虚拟拖拽
+                                    const $newRowIndex = findRowIndexOfByKey(rowList, dragRowid);
+                                    rsIndex = $newRowIndex + 1;
+                                    reIndex = fullData.length;
+                                    offsetRate = -1;
+                                }
+                                else {
+                                    if (_newRowIndex > _dragRowIndex) {
+                                        // 从上往下拖拽
+                                        rsIndex = _dragRowIndex - _firstRowIndex;
+                                        reIndex = rsIndex + _newRowIndex - _dragRowIndex;
+                                    }
+                                    else {
+                                        // 从下往上拖拽
+                                        rsIndex = _newRowIndex - _firstRowIndex;
+                                        reIndex = rsIndex + _dragRowIndex - _newRowIndex + 1;
+                                        offsetRate = -1;
+                                    }
+                                }
+                                const dragRangeList = fullData.slice(rsIndex, reIndex);
+                                if (dragRangeList.length) {
+                                    const dtClss = [];
+                                    dragRangeList.forEach(obj => {
+                                        const rowid = getRowId(obj);
+                                        dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                                    });
+                                    const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                    moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
+                                }
+                            }
+                            const drClss = [`.vxe-list--row[rowid="${dragRowid}"]`];
+                            const newDtTrList = wrapperEl.querySelectorAll(drClss.join(','));
+                            const newTrEl = newDtTrList[0];
+                            if (dragOffsetTop > -1 && newTrEl) {
+                                moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
+                            }
+                        }
+                        recalculate();
+                    }).then(() => {
+                        return {
+                            status: true
+                        };
+                    });
+                }).catch(() => {
+                    return errRest;
+                }).then((rest) => {
+                    clearRowDragData();
+                    clearCrossListDragStatus();
+                    return rest;
+                });
+            }
+            clearRowDragData();
+            clearCrossListDragStatus();
+            return Promise.resolve(errRest);
+        };
+        const handleRowDragDragstartEvent = (evnt) => {
+            if (evnt.dataTransfer) {
+                evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
+            }
+        };
+        const handleRowDragDragendEvent = (evnt) => {
+            const { dragRow } = reactData;
+            const { prevDragRow, prevDragPos } = internalData;
+            handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
+        };
+        const handleRowDragDragoverEvent = (evnt) => {
+            const { dragRow } = reactData;
+            const { fullData } = internalData;
+            if (!dragRow) {
+                evnt.preventDefault();
+            }
+            const rowEl = evnt.currentTarget;
+            const rowid = rowEl.getAttribute('rowid') || '';
+            const row = findRowByKey(fullData, rowid);
+            if (row) {
+                evnt.preventDefault();
+                const offsetY = evnt.clientY - rowEl.getBoundingClientRect().y;
+                const dragPos = offsetY < rowEl.clientHeight / 2 ? 'top' : 'bottom';
+                internalData.prevDragRow = row;
+                internalData.prevDragPos = dragPos;
+                if ((dragRow && getRowId(dragRow) === rowid)) {
+                    showDropTip(evnt, rowEl, false, dragPos);
+                    return;
+                }
+                const dragOffsetIndex = dragPos === 'bottom' ? 1 : 0;
+                const offsetIndex = dragOffsetIndex;
+                const dragoverEventParams = {
+                    oldRow: dragRow,
+                    targetRow: row,
+                    dragPos,
+                    dragRow,
+                    offsetIndex
+                };
+                showDropTip(evnt, rowEl, true, dragPos);
+                dispatchEvent('row-dragover', dragoverEventParams, evnt);
+            }
+        };
+        const handleRowMousedownEvent = (evnt, row) => {
+            const dragConfig = computeDragOpts.value;
+            const isDrag = computeIsDrag.value;
+            const { trigger, disabledMethod } = dragConfig;
+            let isRowDrag = false;
+            if (isDrag) {
+                isRowDrag = trigger === 'row';
+            }
+            const params = { row, $list: $xeList };
+            if (isRowDrag && !(disabledMethod && disabledMethod(params))) {
+                handleRowDragMousedownEvent(evnt, params);
+            }
+        };
+        const handleRowClickEvent = (evnt, row) => {
+            const { currentRow } = internalData;
+            const rowOpts = computeRowOpts.value;
+            const { isCurrent } = rowOpts;
+            let triggerCurrent = false;
+            if (isCurrent) {
+                triggerCurrent = true;
+                changeCurrentEvent(evnt, row);
+            }
+            else if (currentRow) {
+                internalData.currentRow = null;
+                reactData.currRowFlag++;
+            }
+            dispatchEvent('row-click', { row, triggerCurrent }, evnt);
+        };
+        const handleRowDblclickEvent = (evnt, row) => {
+            dispatchEvent('row-dblclick', { row }, evnt);
+        };
+        const getRowKey = (row) => {
+            const keyField = computeKeyField.value;
+            return getRowKeyByField(row, keyField);
+        };
+        const eqRowKey = (rowKey1, rowKey2) => {
+            return ('' + rowKey1) === ('' + rowKey2);
+        };
+        const eqRow = (row1, row2) => {
+            if (row1 && row2) {
+                if (row1 === row2) {
+                    return true;
+                }
+                return eqRowKey(getRowId(row1), getRowId(row2));
+            }
+            return false;
+        };
+        const eqRowByKey = (row, rowKey) => {
+            return row && eqRowKey(getRowKey(row), rowKey);
+        };
+        const findRow = (list, row) => {
+            return row ? XEUtils.find(list, obj => eqRow(obj, row)) : null;
+        };
+        const findRowByKey = (list, rowKey) => {
+            const keyField = computeKeyField.value;
+            return XEUtils.find(list, obj => eqRowKey(getRowIdByField(obj, keyField), rowKey));
+        };
+        const findRowIndexOf = (list, row) => {
+            return row ? XEUtils.findIndexOf(list, obj => eqRow(obj, row)) : -1;
+        };
+        const findRowIndexOfByKey = (list, rowKey) => {
+            const keyField = computeKeyField.value;
+            return XEUtils.findIndexOf(list, obj => eqRowKey(getRowIdByField(obj, keyField), rowKey));
+        };
+        const isCheckedByRadioRowKey = (rowKey) => {
+            const { selectRadioRow } = reactData;
+            return getRowKey(selectRadioRow) === rowKey;
+        };
+        const isCheckedByRadioRow = (row) => {
+            return isCheckedByRadioRowKey(getRowKey(row));
+        };
+        const isCheckedByCheckboxRowKey = (rowid) => {
+            const { updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps } = internalData;
+            return !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
+        };
+        const isCheckedByCheckboxRow = (row) => {
+            return isCheckedByCheckboxRowKey(getRowKey(row));
+        };
+        const setCurrentRow = (row) => {
+            internalData.currentRow = row;
+            reactData.currRowFlag++;
+            return nextTick();
+        };
+        const setCurrentRowByKey = (rowKey) => {
+            const { fullData } = internalData;
+            internalData.currentRow = findRowByKey(fullData, rowKey);
+            reactData.currRowFlag++;
+            return nextTick();
+        };
+        const getCurrentRow = () => {
+            const { currentRow } = internalData;
+            return currentRow;
+        };
+        const getCurrentRowKey = () => {
+            const { currentRow } = internalData;
+            return currentRow ? getRowKey(currentRow) : null;
+        };
+        const clearCurrentRow = () => {
+            internalData.currentRow = null;
+            reactData.currRowFlag++;
+            return nextTick();
+        };
+        const setRadioRow = (row) => {
+            reactData.selectRadioRow = row;
+            const value = getRowKey(row);
+            emitRadioMode(value);
+            return nextTick();
+        };
+        const setRadioRowByKey = (rowKey) => {
+            const { fullData } = internalData;
+            reactData.selectRadioRow = findRowByKey(fullData, rowKey);
+            const value = rowKey;
+            emitRadioMode(value);
+            return nextTick();
+        };
+        const getRadioRow = () => {
+            const { selectRadioRow } = reactData;
+            return selectRadioRow;
+        };
+        const getRadioRowKey = () => {
+            const { selectRadioRow } = reactData;
+            return selectRadioRow ? getRowKey(selectRadioRow) : null;
+        };
+        const clearRadioRow = () => {
+            const value = null;
+            reactData.selectRadioRow = value;
+            emitRadioMode(value);
+            return nextTick();
+        };
+        const setCheckboxRow = (row, checked) => {
+            const { selectCheckboxMaps } = internalData;
+            const keyField = computeKeyField.value;
+            const rowList = row ? (XEUtils.isArray(row) ? row : [row]) : [];
+            rowList.forEach(checked
+                ? (obj) => {
+                    const rowid = getRowIdByField(obj, keyField);
+                    if (!selectCheckboxMaps[rowid]) {
+                        selectCheckboxMaps[rowid] = obj;
+                    }
+                }
+                : (obj) => {
+                    const rowid = getRowIdByField(obj, keyField);
+                    if (selectCheckboxMaps[rowid]) {
+                        delete selectCheckboxMaps[rowid];
+                    }
+                });
+            const value = getCheckboxRowKeys();
+            emitCheckboxMode(value);
+            return updateCheckboxStatus();
+        };
+        const setCheckboxRowByKey = (rowKey, checked) => {
+            const { selectCheckboxMaps, fullKeyMaps } = internalData;
+            const keyField = computeKeyField.value;
+            const rowKeys = rowKey ? (XEUtils.isArray(rowKey) ? rowKey : [rowKey]) : [];
+            rowKeys.forEach(checked
+                ? (key) => {
+                    const row = fullKeyMaps[key || ''];
+                    if (row) {
+                        const rowid = getRowIdByField(row, keyField);
+                        if (row && !selectCheckboxMaps[rowid]) {
+                            selectCheckboxMaps[rowid] = row;
+                        }
+                    }
+                }
+                : (key) => {
+                    const row = fullKeyMaps[key || ''];
+                    if (row) {
+                        const rowid = getRowIdByField(row, keyField);
+                        if (selectCheckboxMaps[rowid]) {
+                            delete selectCheckboxMaps[rowid];
+                        }
+                    }
+                });
+            const value = getCheckboxRowKeys();
+            emitCheckboxMode(value);
+            return updateCheckboxStatus();
+        };
+        const getCheckboxRows = () => {
+            const { updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps } = internalData;
+            const rowList = [];
+            if (updateCheckboxFlag) {
+                XEUtils.each(selectCheckboxMaps, row => {
+                    if (row) {
+                        rowList.push(row);
+                    }
+                });
+            }
+            return rowList;
+        };
+        const getCheckboxRowKeys = () => {
+            const { updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps } = internalData;
+            const keyField = computeKeyField.value;
+            const rowKeys = [];
+            if (updateCheckboxFlag) {
+                XEUtils.each(selectCheckboxMaps, row => {
+                    if (row) {
+                        const rowKey = getRowKeyByField(row, keyField);
+                        rowKeys.push(rowKey);
+                    }
+                });
+            }
+            return rowKeys;
+        };
+        const clearCheckboxRow = () => {
+            internalData.selectCheckboxMaps = {};
+            reactData.updateCheckboxFlag++;
+            reactData.isAllChecked = false;
+            reactData.isAllIndeterminate = false;
+            const value = [];
+            emitCheckboxMode(value);
+            return nextTick();
+        };
+        const setAllCheckboxRow = (checked) => {
+            const { fullData, selectCheckboxMaps } = internalData;
+            const keyField = computeKeyField.value;
+            if (checked) {
+                const value = [];
+                for (const row of fullData) {
+                    const rowKey = getRowKeyByField(row, keyField);
+                    const rowid = getRowIdByField(row, keyField);
+                    selectCheckboxMaps[rowid] = row;
+                    value.push(rowKey);
+                }
+                emitCheckboxMode(value);
+                return updateCheckboxStatus();
+            }
+            return clearCheckboxRow();
+        };
+        const updateCheckboxStatus = () => {
+            const { selectCheckboxMaps, fullData } = internalData;
+            const keyField = computeKeyField.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { checkMethod } = checkboxOpts;
+            let hasChecked = false;
+            let hasUnchecked = false;
+            if (checkMethod) {
+                for (const row of fullData) {
+                    if (checkMethod({ row, $list: $xeList })) {
+                        const rowid = getRowIdByField(row, keyField);
+                        if (selectCheckboxMaps[rowid]) {
+                            hasChecked = true;
+                        }
+                        else {
+                            hasUnchecked = true;
+                            if (hasChecked) {
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                for (const row of fullData) {
+                    const rowid = getRowIdByField(row, keyField);
+                    if (selectCheckboxMaps[rowid]) {
+                        hasChecked = true;
+                    }
+                    else {
+                        hasUnchecked = true;
+                        if (hasChecked) {
+                            break;
+                        }
+                    }
+                }
+            }
+            reactData.isAllChecked = hasChecked && !hasUnchecked;
+            reactData.isAllIndeterminate = hasChecked && hasUnchecked;
+            reactData.updateCheckboxFlag++;
+            return nextTick();
+        };
+        const changeCheckboxAllEvent = (evnt) => {
+            const { isAllChecked } = reactData;
+            const isChecked = !isAllChecked;
+            if (isChecked) {
+                setAllCheckboxRow(true);
+            }
+            else {
+                clearCheckboxRow();
+            }
+            dispatchEvent('checkbox-all', { checked: isChecked }, evnt);
+        };
+        const changeCheckboxEvent = (evnt, row) => {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { selectCheckboxMaps } = internalData;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { checkMethod } = checkboxOpts;
+            const rowid = getRowId(row);
+            const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+            if (isDisabled) {
+                return;
+            }
+            let isChecked = false;
+            if (selectCheckboxMaps[rowid]) {
+                delete selectCheckboxMaps[rowid];
+            }
+            else {
+                isChecked = true;
+                selectCheckboxMaps[rowid] = row;
+            }
+            reactData.updateCheckboxFlag++;
+            updateCheckboxStatus();
+            const rowids = XEUtils.keys(selectCheckboxMaps);
+            const value = rowids.map(deModelValue);
+            emitCheckboxMode(value);
+            dispatchEvent('checkbox-change', { row, value, checked: isChecked }, evnt);
+        };
+        const changeCurrentEvent = (evnt, row) => {
+            evnt.preventDefault();
+            const rowOpts = computeRowOpts.value;
+            const { currentMethod } = rowOpts;
+            let isDisabled = false;
+            if (currentMethod) {
+                isDisabled = !currentMethod({ row });
+            }
+            if (isDisabled) {
+                return;
+            }
+            const isChecked = true;
+            internalData.currentRow = row;
+            reactData.currRowFlag++;
+            dispatchEvent('current-change', { row, checked: isChecked }, evnt);
+        };
+        const changeRadioEvent = (evnt, row) => {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            const { selectRadioRow } = reactData;
+            const radioOpts = computeRadioOpts.value;
+            const { strict, checkMethod } = radioOpts;
+            const rowKey = getRowKey(row);
+            const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+            if (isDisabled) {
+                return;
+            }
+            const value = rowKey;
+            let isChecked = true;
+            if (strict) {
+                if (selectRadioRow && rowKey === getRowKey(selectRadioRow)) {
+                    isChecked = false;
+                    reactData.selectRadioRow = null;
+                }
+                else {
+                    reactData.selectRadioRow = row;
+                }
+            }
+            else {
+                reactData.selectRadioRow = row;
+            }
+            emitRadioMode(value);
+            dispatchEvent('radio-change', { row, value, checked: isChecked }, evnt);
+        };
         const listMethods = {
             dispatchEvent,
             loadData,
@@ -7030,29 +7905,286 @@ var VxeListComponent = defineVxeComponent({
                 clearScroll();
                 return loadData(datas);
             },
+            getFullData() {
+                const { fullData } = internalData;
+                return fullData;
+            },
             recalculate,
             scrollTo,
             refreshScroll,
-            clearScroll
+            clearScroll,
+            getRowKey,
+            eqRowKey,
+            eqRow,
+            eqRowByKey,
+            findRow,
+            findRowByKey,
+            findRowIndexOf,
+            findRowIndexOfByKey,
+            isCheckedByRadioRowKey,
+            isCheckedByRadioRow,
+            isCheckedByCheckboxRowKey,
+            isCheckedByCheckboxRow,
+            setCurrentRow,
+            setCurrentRowByKey,
+            getCurrentRow,
+            getCurrentRowKey,
+            clearCurrentRow,
+            setRadioRow,
+            setRadioRowByKey,
+            getRadioRow,
+            getRadioRowKey,
+            clearRadioRow,
+            setCheckboxRow,
+            setCheckboxRowByKey,
+            getCheckboxRows,
+            getCheckboxRowKeys,
+            clearCheckboxRow,
+            setAllCheckboxRow
+        };
+        const listPrivateMethods = {};
+        Object.assign($xeList, listMethods, listPrivateMethods);
+        const renderDragTip = () => {
+            const { dragRow, dragTipText } = reactData;
+            const dragOpts = computeDragOpts.value;
+            const isDrag = computeIsDrag.value;
+            const dRow = dragRow;
+            if (isDrag) {
+                return h('div', {
+                    class: 'vxe-list--drag-wrapper'
+                }, [
+                    h('div', {
+                        ref: refDragRowLineElem,
+                        class: ['vxe-list--drag-row-line', {
+                                'is--guides': dragOpts.showGuidesStatus
+                            }]
+                    }),
+                    dRow && dragOpts.showDragTip
+                        ? h('div', {
+                            ref: refDragTipElem,
+                            class: 'vxe-list--drag-sort-tip'
+                        }, [
+                            h('div', {
+                                class: 'vxe-list--drag-sort-tip-wrapper'
+                            }, [
+                                h('div', {
+                                    class: 'vxe-list--drag-sort-tip-status'
+                                }, [
+                                    h('span', {
+                                        class: ['vxe-list--drag-sort-tip-normal-status', getIcon$2().LIST_DRAG_STATUS_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-list--drag-sort-tip-disabled-status', getIcon$2().LIST_DRAG_DISABLED]
+                                    })
+                                ]),
+                                h('div', {
+                                    class: 'vxe-list--drag-sort-tip-content'
+                                }, dragTipText)
+                            ])
+                        ])
+                        : renderEmptyElement($xeList)
+                ]);
+            }
+            return renderEmptyElement($xeList);
+        };
+        const renderRadio = (row, rowid, isChecked) => {
+            const { showRadio } = props;
+            const radioOpts = computeRadioOpts.value;
+            const { showIcon, checkMethod, visibleMethod } = radioOpts;
+            const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
+            if (showRadio && showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+                return h('div', {
+                    key: 'ct2',
+                    class: ['vxe-list--radio-option', {
+                            'is--checked': isChecked,
+                            'is--disabled': isDisabled
+                        }],
+                    onClick(evnt) {
+                        if (!isDisabled) {
+                            changeRadioEvent(evnt, row);
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-radio--icon', isChecked ? getIcon$2().RADIO_CHECKED : getIcon$2().RADIO_UNCHECKED]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeList);
+        };
+        const renderCheckbox = (row, rowid, isChecked) => {
+            const { showCheckbox } = props;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { showIcon, checkMethod, visibleMethod } = checkboxOpts;
+            const isVisible = !visibleMethod || visibleMethod({ $list: $xeList, row });
+            if (showCheckbox && showIcon && isVisible) {
+                const isDisabled = checkMethod ? !checkMethod({ $list: $xeList, row }) : false;
+                return h('div', {
+                    key: 'ct3',
+                    class: ['vxe-list--checkbox-option', {
+                            'is--checked': isChecked,
+                            'is--disabled': isDisabled
+                        }],
+                    onClick(evnt) {
+                        if (!isDisabled) {
+                            changeCheckboxEvent(evnt, row);
+                        }
+                    }
+                }, [
+                    h('span', {
+                        class: ['vxe-checkbox--icon', isChecked ? getIcon$2().CHECKBOX_CHECKED : getIcon$2().CHECKBOX_UNCHECKED]
+                    })
+                ]);
+            }
+            return renderEmptyElement($xeList);
+        };
+        const renderRow = (row, rowIndex) => {
+            const { showRadio, showCheckbox } = props;
+            const { selectRadioRow, currRowFlag, updateCheckboxFlag } = reactData;
+            const { selectCheckboxMaps, currentRow } = internalData;
+            const contentSlot = slots.content;
+            const dragOpts = computeDragOpts.value;
+            const { trigger, icon, disabledMethod, visibleMethod } = dragOpts;
+            const rowOpts = computeRowOpts.value;
+            const { useKey, contentField, className: rowClassName, isCurrent } = rowOpts;
+            const isDrag = computeIsDrag.value;
+            const keyField = computeKeyField.value;
+            const isRowFnCls = rowClassName && XEUtils.isFunction(rowClassName);
+            const hasKey = keyField || useKey || isDrag || isCurrent || showRadio || showCheckbox;
+            const rowKey = hasKey && keyField ? getRowIdByField(row, keyField) : '';
+            const rowid = enModelValue(rowKey);
+            const rowParams = { row, $list: $xeList };
+            let isRadioChecked = false;
+            if (showRadio) {
+                isRadioChecked = selectRadioRow && (row === selectRadioRow || eqRowByKey(selectRadioRow, rowKey));
+            }
+            let isCheckboxChecked = false;
+            if (showCheckbox) {
+                isCheckboxChecked = !!(updateCheckboxFlag && selectCheckboxMaps[rowid]);
+            }
+            const ctVNs = [];
+            let isDragDisabled = false;
+            if (isDrag && keyField && (!visibleMethod || visibleMethod(rowParams))) {
+                const handleOns = {};
+                if (trigger !== 'row') {
+                    isDragDisabled = !!(disabledMethod && disabledMethod(rowParams));
+                    handleOns.onMousedown = (evnt) => {
+                        if (!isDragDisabled) {
+                            handleRowDragMousedownEvent(evnt, rowParams);
+                        }
+                    };
+                    handleOns.onMouseup = handleRowDragMouseupEvent;
+                }
+                ctVNs.push(h('div', {
+                    key: 'ct1',
+                    class: 'vxe-list--row-drag'
+                }, [
+                    h('span', Object.assign({ class: 'vxe-list--drag-handle' }, handleOns), [
+                        h('i', {
+                            class: icon || getIcon$2().LIST_DRAG
+                        })
+                    ])
+                ]));
+            }
+            if (showRadio) {
+                ctVNs.push(renderRadio(row, rowid, isRadioChecked));
+            }
+            if (showCheckbox) {
+                ctVNs.push(renderCheckbox(row, rowid, isCheckboxChecked));
+            }
+            ctVNs.push(h('div', {
+                key: 'ct5',
+                class: 'vxe-list--row-content'
+            }, contentSlot ? contentSlot(rowParams) : (contentField ? getText(row[contentField]) : '')));
+            const rowOns = {
+                onMousedown(evnt) {
+                    handleRowMousedownEvent(evnt, row);
+                },
+                onMouseup: handleRowDragMouseupEvent,
+                onClick(evnt) {
+                    handleRowClickEvent(evnt, row);
+                },
+                onDblclick(evnt) {
+                    handleRowDblclickEvent(evnt, row);
+                }
+            };
+            // 拖拽行事件
+            if (isDrag) {
+                rowOns.onDragstart = handleRowDragDragstartEvent;
+                rowOns.onDragend = handleRowDragDragendEvent;
+                rowOns.onDragover = handleRowDragDragoverEvent;
+            }
+            return h('div', Object.assign({ key: hasKey && keyField ? rowid : rowIndex, class: ['vxe-list--row', isRowFnCls ? rowClassName(rowParams) : (rowClassName || ''), {
+                        'is--drag-disabled': isDragDisabled,
+                        'is--current': currRowFlag && currentRow && eqRowByKey(currentRow, rowKey),
+                        'is-radio--checked': isRadioChecked,
+                        'is-checkbox--checked': isCheckboxChecked
+                    }], rowid: hasKey && keyField ? rowid : undefined }, rowOns), ctVNs);
         };
-        Object.assign($xeList, listMethods);
         const renderVN = () => {
-            const { className, loading } = props;
-            const { bodyHeight, topSpaceHeight, items } = reactData;
+            const { showCheckbox, className, loading } = props;
+            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
             const defaultSlot = slots.default;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
             const vSize = computeSize.value;
-            const styles = computeStyles.value;
+            const wrapperStyles = computeWrapperStyles.value;
+            const virtualStyles = computeVirtualStyles.value;
+            const radioOpts = computeRadioOpts.value;
+            const checkboxOpts = computeCheckboxOpts.value;
+            const { showHeader, headerTitle } = checkboxOpts;
+            const dragOpts = computeDragOpts.value;
+            const { trigger } = dragOpts;
+            const rowOpts = computeRowOpts.value;
+            const { isHover, padding } = rowOpts;
+            const isDrag = computeIsDrag.value;
+            const showDefChekboxHead = showCheckbox && showHeader !== false;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
                         [`size--${vSize}`]: vSize,
+                        'is--drag': isDrag,
                         'is--loading': loading
-                    }]
+                    }],
+                style: wrapperStyles
             }, [
+                headerSlot || showDefChekboxHead
+                    ? h('div', {
+                        ref: refHeaderElem,
+                        class: 'vxe-list--header-wrapper'
+                    }, [
+                        showDefChekboxHead
+                            ? h('div', {
+                                class: 'vxe-list--header-left'
+                            }, [
+                                h('div', {
+                                    class: ['vxe-list--checkbox-header', {
+                                            'is--checked': isAllChecked,
+                                            'is--indeterminate': isAllIndeterminate
+                                        }],
+                                    onClick: changeCheckboxAllEvent
+                                }, [
+                                    h('span', {
+                                        class: ['vxe-checkbox--icon', isAllChecked ? getIcon$2().CHECKBOX_CHECKED : (isAllIndeterminate ? getIcon$2().CHECKBOX_INDETERMINATE : getIcon$2().CHECKBOX_UNCHECKED)]
+                                    }),
+                                    h('span', {
+                                        class: 'vxe-checkbox--label'
+                                    }, XEUtils.eqNull(headerTitle) ? getI18n$2('vxe.list.allChecked') : getText(headerTitle))
+                                ])
+                            ])
+                            : renderEmptyElement($xeList),
+                        headerSlot
+                            ? h('div', {
+                                class: 'vxe-list--header-content'
+                            }, headerSlot({ items: rowList, $list: $xeList }))
+                            : renderEmptyElement($xeList)
+                    ])
+                    : renderEmptyElement($xeList),
                 h('div', {
                     ref: refVirtualWrapper,
                     class: 'vxe-list--virtual-wrapper',
-                    style: styles,
+                    style: virtualStyles,
                     onScroll: scrollEvent
                 }, [
                     h('div', {
@@ -7063,12 +8195,28 @@ var VxeListComponent = defineVxeComponent({
                     }),
                     h('div', {
                         ref: refVirtualBody,
-                        class: 'vxe-list--body',
+                        class: ['vxe-list--body', {
+                                'trigger--row': trigger === 'row',
+                                'checkbox--highlight': checkboxOpts.highlight,
+                                'radio--highlight': radioOpts.highlight,
+                                'row--hover': isHover,
+                                'is--padding': padding
+                            }],
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, defaultSlot ? defaultSlot({ items, $list: $xeList }) : [])
+                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
                 ]),
+                footerSlot
+                    ? h('div', {
+                        ref: refFooterElem,
+                        class: 'vxe-list--footer-wrapper'
+                    }, footerSlot({ items: rowList, $list: $xeList }))
+                    : renderEmptyElement($xeList),
+                /**
+                 * 拖拽提示
+                 */
+                renderDragTip(),
                 /**
                  * 加载中
                  */
@@ -7088,17 +8236,36 @@ var VxeListComponent = defineVxeComponent({
         watch(dataFlag, () => {
             loadData(props.data || []);
         });
+        const reFlag = ref(0);
         watch(() => props.height, () => {
-            recalculate();
+            reFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            recalculate();
+            reFlag.value++;
         });
-        watch(() => props.syncResize, (value) => {
-            if (value) {
+        watch(() => props.syncResize, () => {
+            reFlag.value++;
+        });
+        watch(computeRowHeight, () => {
+            reFlag.value++;
+        });
+        watch(reFlag, () => {
+            nextTick(() => {
                 recalculate();
-                nextTick(() => setTimeout(() => recalculate()));
-            }
+            });
+        });
+        watch(() => props.checkRowKey, () => {
+            updateRadioModeValue();
+        });
+        const checkKeyFlag = ref(0);
+        watch(() => props.checkRowKeys ? props.checkRowKeys.length : -1, () => {
+            checkKeyFlag.value++;
+        });
+        watch(() => props.checkRowKeys, () => {
+            checkKeyFlag.value++;
+        });
+        watch(checkKeyFlag, () => {
+            updateCheckboxModeValue();
         });
         onActivated(() => {
             recalculate().then(() => refreshScroll());
@@ -7107,7 +8274,25 @@ var VxeListComponent = defineVxeComponent({
             loadData(props.data || []);
         });
         onMounted(() => {
-            recalculate();
+            const { showRadio, showCheckbox } = props;
+            const rowOpts = computeRowOpts.value;
+            const { useKey } = rowOpts;
+            const isDrag = computeIsDrag.value;
+            const keyField = computeKeyField.value;
+            if (!keyField) {
+                if (showRadio) {
+                    errLog$f('vxe.error.reqSupportProp', ['show-radio', 'row-config.keyField']);
+                }
+                if (showCheckbox) {
+                    errLog$f('vxe.error.reqSupportProp', ['show-checkbox', 'row-config.keyField']);
+                }
+                if (isDrag) {
+                    errLog$f('vxe.error.reqSupportProp', ['drag-config', 'row-config.keyField']);
+                }
+            }
+            if (useKey && !keyField) {
+                errLog$f('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
+            }
             if (props.autoResize) {
                 const el = refElem.value;
                 const resizeObserver = globalResize.create(() => recalculate());
@@ -7117,6 +8302,7 @@ var VxeListComponent = defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
+            recalculate();
             globalEvents.on($xeList, 'resize', recalculate);
         });
         onBeforeUnmount(() => {
@@ -7125,8 +8311,8 @@ var VxeListComponent = defineVxeComponent({
                 resizeObserver.disconnect();
             }
             globalEvents.off($xeList, 'resize');
-            XEUtils.assign(reactData, createReactData$f());
-            XEUtils.assign(internalData, createInternalData$e());
+            XEUtils.assign(reactData, createReactData$h());
+            XEUtils.assign(internalData, createInternalData$g());
         });
         $xeList.renderVN = renderVN;
         return $xeList;
@@ -9839,7 +11025,7 @@ var VxeInputComponent = defineVxeComponent({
 function getNodeUniqueId$1() {
     return XEUtils.uniqueId('node_');
 }
-function createReactData$e() {
+function createReactData$g() {
     return {
         initialized: false,
         searchValue: '',
@@ -9862,7 +11048,7 @@ function createReactData$e() {
         lazyOptFlag: 1
     };
 }
-function createInternalData$d() {
+function createInternalData$f() {
     return {
         // hpTimeout: undefined,
         listVirtualYOpts: {
@@ -9989,8 +11175,8 @@ var VxeCascaderComponent = defineVxeComponent({
         const refInpSearch = ref();
         const refChunkWrapper = ref();
         const refOptionPanel = ref();
-        const reactData = reactive(createReactData$e());
-        const internalData = createInternalData$d();
+        const reactData = reactive(createReactData$g());
+        const internalData = createInternalData$f();
         const refMaps = {
             refElem
         };
@@ -10139,7 +11325,7 @@ var VxeCascaderComponent = defineVxeComponent({
             }
             const valueField = computeValueField.value;
             const nodeKey = node[valueField];
-            return enNodeValue$1(nodeKey);
+            return enNodeValue(nodeKey);
         };
         const isCheckedByCheckboxNodeId = (nodeid) => {
             const { updateCheckboxFlag } = reactData;
@@ -10191,7 +11377,7 @@ var VxeCascaderComponent = defineVxeComponent({
                 }
                 const nodeList = [];
                 nodeKeys.forEach((nodeKey) => {
-                    const nodeid = enNodeValue$1(nodeKey);
+                    const nodeid = enNodeValue(nodeKey);
                     const nodeItem = nodeMaps[nodeid];
                     if (nodeItem) {
                         nodeList.push(nodeItem.item);
@@ -10216,7 +11402,7 @@ var VxeCascaderComponent = defineVxeComponent({
             }
             else {
                 if (modelValue) {
-                    const nodeid = enNodeValue$1(XEUtils.isArray(modelValue) ? modelValue[0] : modelValue);
+                    const nodeid = enNodeValue(XEUtils.isArray(modelValue) ? modelValue[0] : modelValue);
                     const itemRest = nodeMaps[nodeid];
                     if (itemRest) {
                         itemRest.nodes.forEach(item => {
@@ -10519,7 +11705,7 @@ var VxeCascaderComponent = defineVxeComponent({
             const stItems = [];
             const expandedMaps = {};
             if (selectVals.length) {
-                const lastVal = enNodeValue$1(XEUtils.last(selectVals));
+                const lastVal = enNodeValue(XEUtils.last(selectVals));
                 const stRest = XEUtils.findTree(afterTreeList, (item) => lastVal === getNodeId(item), { children: transform ? mapChildrenField : childrenField });
                 if (stRest) {
                     const { nodes } = stRest;
@@ -10637,7 +11823,7 @@ var VxeCascaderComponent = defineVxeComponent({
             });
         };
         const changeEvent = (evnt, selectValue, node) => {
-            const value = XEUtils.isArray(selectValue) ? selectValue.map(deNodeValue$1) : deNodeValue$1(selectValue);
+            const value = XEUtils.isArray(selectValue) ? selectValue.map(deNodeValue) : deNodeValue(selectValue);
             emitModel(value);
             if (value !== props.modelValue) {
                 dispatchEvent('change', { value, node, option: node }, evnt);
@@ -11562,7 +12748,7 @@ var VxeCascaderComponent = defineVxeComponent({
             globalEvents.off($xeCascader, 'mousedown');
             globalEvents.off($xeCascader, 'blur');
             globalEvents.off($xeCascader, 'resize');
-            XEUtils.assign(internalData, createInternalData$d());
+            XEUtils.assign(internalData, createInternalData$f());
         });
         provide('$xeCascader', $xeCascader);
         $xeCascader.renderVN = renderVN;
@@ -11895,10 +13081,10 @@ dynamicApp.use(VxeCheckboxButton);
 VxeUI.component(VxeCheckboxButtonComponent);
 const CheckboxButton = VxeCheckboxButton;
 
-function createReactData$d() {
+function createReactData$f() {
     return {};
 }
-function createInternalData$c() {
+function createInternalData$e() {
     return {
     // isLoaded: false
     };
@@ -11937,8 +13123,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
-        const reactData = reactive(createReactData$d());
-        const internalData = createInternalData$c();
+        const reactData = reactive(createReactData$f());
+        const internalData = createInternalData$e();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -12097,8 +13283,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(reactData, createReactData$d());
-            XEUtils.assign(internalData, createInternalData$c());
+            XEUtils.assign(reactData, createReactData$f());
+            XEUtils.assign(internalData, createInternalData$e());
         });
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
         $xeCheckboxGroup.renderVN = renderVN;
@@ -12231,17 +13417,19 @@ dynamicApp.use(VxeCol);
 VxeUI.component(VxeColComponent);
 const Col = VxeCol;
 
-function createReactData$c() {
+function createReactData$e() {
     return {
         staticPanes: [],
-        activeNames: [],
-        initNames: [],
-        cachePaneMaps: {}
+        cachePaneMaps: {},
+        activeKeyFlag: 0,
+        openKeyFlag: 0
     };
 }
-function createInternalData$b() {
+function createInternalData$d() {
     return {
-    // esTime: null
+        // esTime: null,
+        activeKeyMaps: {},
+        openKeyMaps: {}
     };
 }
 var VxeCollapseComponent = defineVxeComponent({
@@ -12274,8 +13462,8 @@ var VxeCollapseComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
         const refElem = ref();
-        const reactData = reactive(createReactData$c());
-        const internalData = createInternalData$b();
+        const reactData = reactive(createReactData$e());
+        const internalData = createInternalData$d();
         const refMaps = {
             refElem
         };
@@ -12300,6 +13488,15 @@ var VxeCollapseComponent = defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $collapse: $xeCollapse }, params));
+        };
+        const collapseMethods = {
+            dispatchEvent
+        };
+        const emitModel = (value) => {
+            emit('update:modelValue', value);
+        };
         const handleFilterItem = (item) => {
             const { permissionCode } = item;
             if (permissionCode) {
@@ -12309,46 +13506,51 @@ var VxeCollapseComponent = defineVxeComponent({
             }
             return true;
         };
-        const addInitName = (name) => {
-            const { initNames } = reactData;
-            if (name && !initNames.includes(name)) {
-                initNames.push(name);
+        const updateModel = () => {
+            const { modelValue } = props;
+            const { openKeyMaps } = internalData;
+            const activeMaps = {};
+            if (modelValue) {
+                modelValue.forEach(name => {
+                    if (!openKeyMaps[name]) {
+                        openKeyMaps[name] = true;
+                    }
+                    activeMaps[name] = true;
+                });
+            }
+            internalData.activeKeyMaps = activeMaps;
+            reactData.activeKeyFlag++;
+            reactData.openKeyFlag++;
+        };
+        const handleOpen = (name) => {
+            const { openKeyMaps } = internalData;
+            if (name && !openKeyMaps[name]) {
+                openKeyMaps[name] = true;
                 dispatchEvent('load', { name }, null);
                 return true;
             }
             return false;
         };
         const initDefaultName = (list) => {
-            const { activeNames } = reactData;
+            const { activeKeyMaps } = internalData;
             const nameMaps = {};
             if (list && list.length) {
                 list.forEach((item) => {
                     const { name, preload } = item || {};
                     if (name) {
-                        const isActive = activeNames.includes(name);
-                        nameMaps[`${name}`] = {
+                        const isActive = activeKeyMaps[name];
+                        nameMaps[name] = {
                             height: 0,
                             loading: false
                         };
-                        if (isActive) {
-                            addInitName(name);
-                        }
-                        if (preload) {
-                            if (!isActive) {
-                                activeNames.push(name);
-                            }
+                        if (isActive || preload) {
+                            handleOpen(name);
                         }
                     }
                 });
             }
-            reactData.activeNames = activeNames ? activeNames.slice(0) : [];
             reactData.cachePaneMaps = nameMaps;
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $collapse: $xeCollapse }, params));
-        };
-        const collapseMethods = {
-            dispatchEvent
+            reactData.openKeyFlag++;
         };
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
@@ -12362,8 +13564,10 @@ var VxeCollapseComponent = defineVxeComponent({
             return [];
         };
         const handleClickEvent = (evnt, item) => {
-            const { activeNames } = reactData;
+            let { activeKeyMaps } = internalData;
             const { esTime } = internalData;
+            const expandOpts = computeExpandOpts.value;
+            const { accordion } = expandOpts;
             const { name } = item;
             if (esTime) {
                 clearTimeout(esTime);
@@ -12371,14 +13575,16 @@ var VxeCollapseComponent = defineVxeComponent({
             if (name) {
                 const headEl = evnt.currentTarget;
                 const bodyEl = headEl.nextElementSibling;
-                const aIndex = activeNames.indexOf(name);
                 let expanded = false;
-                if (aIndex === -1) {
-                    expanded = true;
-                    activeNames.push(name);
+                if (activeKeyMaps[name]) {
+                    delete activeKeyMaps[name];
                 }
                 else {
-                    activeNames.splice(aIndex, 1);
+                    if (accordion) {
+                        activeKeyMaps = {};
+                    }
+                    expanded = true;
+                    activeKeyMaps[name] = true;
                 }
                 const startAnimation = () => {
                     const itemEl = bodyEl.firstElementChild;
@@ -12399,6 +13605,11 @@ var VxeCollapseComponent = defineVxeComponent({
                         }
                     }
                 };
+                const value = Object.keys(activeKeyMaps);
+                internalData.activeKeyMaps = activeKeyMaps;
+                handleOpen(name);
+                reactData.activeKeyFlag++;
+                reactData.openKeyFlag++;
                 if (bodyEl) {
                     const itemEl = bodyEl.firstElementChild;
                     if (itemEl) {
@@ -12409,21 +13620,22 @@ var VxeCollapseComponent = defineVxeComponent({
                         nextTick(startAnimation);
                     }
                 }
-                addInitName(name);
-                dispatchEvent('change', { value: activeNames, name }, evnt);
-                dispatchEvent('toggle-expand', { value: activeNames, name, expanded }, evnt);
+                emitModel(value);
+                dispatchEvent('change', { value, name }, evnt);
+                dispatchEvent('toggle-expand', { value, name, expanded }, evnt);
             }
         };
         const collapsePrivateMethods = {};
         Object.assign($xeCollapse, collapseMethods, collapsePrivateMethods);
         const renderList = (itemList) => {
-            const { activeNames, initNames } = reactData;
+            const { activeKeyFlag, openKeyFlag } = reactData;
+            const { activeKeyMaps, openKeyMaps } = internalData;
             const expandOpts = computeExpandOpts.value;
             return itemList.map(item => {
                 const { icon, name, title, slots } = item;
                 const titleSlot = slots ? slots.title : null;
                 const defaultSlot = slots ? slots.default : null;
-                const isActive = name && activeNames.includes(name);
+                const isActive = name && activeKeyFlag && activeKeyMaps[name];
                 return h('div', {
                     class: 'vxe-collapse-item'
                 }, [
@@ -12461,7 +13673,7 @@ var VxeCollapseComponent = defineVxeComponent({
                                 'is--hidden': !isActive
                             }]
                     }, [
-                        name && initNames.includes(name)
+                        name && openKeyFlag && openKeyMaps[name]
                             ? h('div', {
                                 class: 'vxe-collapse--item-inner'
                             }, [
@@ -12493,8 +13705,15 @@ var VxeCollapseComponent = defineVxeComponent({
                 renderList(itemList)
             ]);
         };
-        watch(() => props.modelValue, (val) => {
-            reactData.activeNames = val || [];
+        const valFlag = ref(0);
+        watch(() => props.modelValue ? props.modelValue.length : -1, () => {
+            valFlag.value++;
+        });
+        watch(() => props.modelValue, () => {
+            valFlag.value++;
+        });
+        watch(valFlag, () => {
+            updateModel();
         });
         const optsFlag = ref(0);
         watch(() => props.options ? props.options.length : -1, () => {
@@ -12516,15 +13735,15 @@ var VxeCollapseComponent = defineVxeComponent({
         watch(stFlag, () => {
             initDefaultName(reactData.staticPanes);
         });
-        reactData.activeNames = props.modelValue || [];
+        updateModel();
         initDefaultName(reactData.staticPanes.length ? reactData.staticPanes : props.options);
         onUnmounted(() => {
             const { esTime } = internalData;
             if (esTime) {
                 clearTimeout(esTime);
             }
-            XEUtils.assign(reactData, createReactData$c());
-            XEUtils.assign(internalData, createInternalData$b());
+            XEUtils.assign(reactData, createReactData$e());
+            XEUtils.assign(internalData, createInternalData$d());
         });
         provide('$xeCollapse', $xeCollapse);
         $xeCollapse.renderVN = renderVN;
@@ -14900,12 +16119,12 @@ dynamicApp.use(VxeColorPicker);
 VxeUI.component(VxeColorPickerComponent);
 const ColorPicker = VxeColorPicker;
 
-function createInternalData$a() {
+function createInternalData$c() {
     return {
     // leaveTime: null
     };
 }
-function createReactData$b() {
+function createReactData$d() {
     return {
         visible: false,
         activeOption: null,
@@ -14960,8 +16179,8 @@ var VxeContextMenuComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$a();
-        const reactData = reactive(createReactData$b());
+        const internalData = createInternalData$c();
+        const reactData = reactive(createReactData$d());
         const refMaps = {
             refElem
         };
@@ -15516,8 +16735,8 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents.off($xeContextMenu, 'keydown');
             globalEvents.off($xeContextMenu, 'mousedown');
             globalEvents.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$b());
-            XEUtils.assign(internalData, createInternalData$a());
+            XEUtils.assign(reactData, createReactData$d());
+            XEUtils.assign(internalData, createInternalData$c());
         });
         $xeContextMenu.renderVN = renderVN;
         return $xeContextMenu;
@@ -17791,7 +19010,7 @@ const parseInputKayMaps = {};
 inputMaskedKeys.forEach(key => {
     parseInputKayMaps[key] = true;
 });
-function createReactData$a() {
+function createReactData$c() {
     return {
         initialized: false,
         panelIndex: 0,
@@ -17804,7 +19023,7 @@ function createReactData$a() {
         labelFlag: 0
     };
 }
-function createInternalData$9() {
+function createInternalData$b() {
     return {
         // hpTimeout: undefined,
         // fsTimeout: undefined,
@@ -17944,8 +19163,8 @@ var VxeDatePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$a());
-        const internalData = createInternalData$9();
+        const reactData = reactive(createReactData$c());
+        const internalData = createInternalData$b();
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -19368,6 +20587,7 @@ var VxeDatePickerComponent = defineVxeComponent({
         onUnmounted(() => {
             globalEvents.off($xeDatePicker, 'mousewheel');
             globalEvents.off($xeDatePicker, 'mousedown');
+            globalEvents.off($xeDatePicker, 'keydown');
             globalEvents.off($xeDatePicker, 'blur');
             globalEvents.off($xeDatePicker, 'resize');
         });
@@ -22855,7 +24075,7 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
-function createReactData$9() {
+function createReactData$b() {
     return {
         collapseAll: false,
         staticItems: [],
@@ -22863,7 +24083,7 @@ function createReactData$9() {
         itemWidth: 0
     };
 }
-function createInternalData$8() {
+function createInternalData$a() {
     return {
         meTimeout: undefined,
         stTimeout: undefined,
@@ -22972,8 +24192,8 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$9());
-        const internalData = createInternalData$8();
+        const reactData = reactive(createReactData$b());
+        const internalData = createInternalData$a();
         const refElem = ref();
         const refTooltip = ref();
         let formMethods = {};
@@ -23667,7 +24887,7 @@ var VxeFormComponent = defineVxeComponent({
         });
         onUnmounted(() => {
             globalEvents.off($xeForm, 'resize');
-            XEUtils.assign(internalData, createInternalData$8());
+            XEUtils.assign(internalData, createInternalData$a());
         });
         reactData.collapseAll = !!props.collapseStatus;
         if (props.items) {
@@ -25071,13 +26291,13 @@ const openPreviewImage = (options) => {
     return Promise.resolve();
 };
 
-function createInternalData$7() {
+function createInternalData$9() {
     return {
     // dgTime: 0,
     // mdTime: 0
     };
 }
-function createReactData$8() {
+function createReactData$a() {
     return {};
 }
 var VxeImageComponent = defineVxeComponent({
@@ -25136,26 +26356,14 @@ var VxeImageComponent = defineVxeComponent({
         const $xeImageGroup = inject('$xeImageGroup', null);
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$7();
-        const reactData = reactive(createReactData$8());
+        const internalData = createInternalData$9();
+        const reactData = reactive(createReactData$a());
         const refMaps = {
             refElem
         };
         const computeWrapperStyle = computed(() => {
-            const { width, height, minWidth, minHeight, maxWidth, maxHeight, circle } = props;
+            const { width, height, circle } = props;
             const stys = {};
-            if (minWidth) {
-                stys.minWidth = toCssUnit(minWidth);
-            }
-            if (minHeight) {
-                stys.minHeight = toCssUnit(minHeight);
-            }
-            if (maxWidth) {
-                stys.maxWidth = toCssUnit(maxWidth);
-            }
-            if (maxHeight) {
-                stys.maxHeight = toCssUnit(maxHeight);
-            }
             if (circle) {
                 // 圆形只能生效一个
                 if (width) {
@@ -25178,7 +26386,7 @@ var VxeImageComponent = defineVxeComponent({
             return stys;
         });
         const computeImgStyle = computed(() => {
-            const { width, height } = props;
+            const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
             const stys = {};
             if (width && height) {
                 stys.maxWidth = toCssUnit(width);
@@ -25191,6 +26399,18 @@ var VxeImageComponent = defineVxeComponent({
                 if (height) {
                     stys.height = toCssUnit(height);
                 }
+                if (minWidth) {
+                    stys.minWidth = toCssUnit(minWidth);
+                }
+                if (minHeight) {
+                    stys.minHeight = toCssUnit(minHeight);
+                }
+                if (maxWidth) {
+                    stys.maxWidth = toCssUnit(maxWidth);
+                }
+                if (maxHeight) {
+                    stys.maxHeight = toCssUnit(maxHeight);
+                }
             }
             return stys;
         });
@@ -25323,8 +26543,8 @@ var VxeImageComponent = defineVxeComponent({
             ]);
         };
         onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$8());
-            XEUtils.assign(internalData, createInternalData$7());
+            XEUtils.assign(reactData, createReactData$a());
+            XEUtils.assign(internalData, createInternalData$9());
         });
         $xeImage.renderVN = renderVN;
         return $xeImage;
@@ -25613,10 +26833,10 @@ dynamicApp.use(VxeLayoutAside);
 VxeUI.component(VxeLayoutAsideComponent);
 const LayoutAside = VxeLayoutAside;
 
-function createInternalData$6() {
+function createInternalData$8() {
     return {};
 }
-function createReactData$7() {
+function createReactData$9() {
     return {};
 }
 var VxeLayoutBodyComponent = defineVxeComponent({
@@ -25641,8 +26861,8 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         const backtopId = `vxe_layout_body_backtop_${xID}`;
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$6();
-        const reactData = reactive(createReactData$7());
+        const internalData = createInternalData$8();
+        const reactData = reactive(createReactData$9());
         const refMaps = {
             refElem
         };
@@ -28438,7 +29658,7 @@ function isOptionVisible(option) {
 function getOptUniqueId$1() {
     return XEUtils.uniqueId('opt_');
 }
-function createReactData$6() {
+function createReactData$8() {
     return {
         initialized: false,
         scrollYLoad: false,
@@ -28459,7 +29679,7 @@ function createReactData$6() {
         isActivated: false
     };
 }
-function createInternalData$5() {
+function createInternalData$7() {
     return {
         // isLoaded: false,
         synchData: [],
@@ -28634,8 +29854,8 @@ var VxeSelectComponent = defineVxeComponent({
         const refOptionPanel = ref();
         const refVirtualBody = ref();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$6());
-        const internalData = createInternalData$5();
+        const reactData = reactive(createReactData$8());
+        const internalData = createInternalData$7();
         const refMaps = {
             refElem
         };
@@ -30156,8 +31376,8 @@ var VxeSelectComponent = defineVxeComponent({
             globalEvents.off($xeSelect, 'keydown');
             globalEvents.off($xeSelect, 'blur');
             globalEvents.off($xeSelect, 'resize');
-            XEUtils.assign(reactData, createReactData$6());
-            XEUtils.assign(internalData, createInternalData$5());
+            XEUtils.assign(reactData, createReactData$8());
+            XEUtils.assign(internalData, createInternalData$7());
         });
         provide('$xeSelect', $xeSelect);
         $xeSelect.renderVN = renderVN;
@@ -31228,7 +32448,6 @@ dynamicApp.use(VxePasswordInput);
 VxeUI.component(VxePasswordInputComponent);
 const PasswordInput = VxePasswordInput;
 
-const browseObj = XEUtils.browse();
 // 打印
 let printFrame;
 // 默认导出或打印的 HTML 样式
@@ -31363,6 +32582,7 @@ function createHtmlPage(opts, printHtml) {
     ].join('');
 }
 function handlePrint(opts, printHtml = '') {
+    const browseObj = XEUtils.browse();
     const { beforeMethod, styleUrls } = opts;
     if (styleUrls && styleUrls.length) {
         styleUrls.forEach(url => {
@@ -32176,7 +33396,7 @@ var VxePulldownComponent = defineVxeComponent({
                     ref: refPulldownContent,
                     class: 'vxe-pulldown--content',
                     onClick: clickTargetEvent
-                }, defaultSlot ? defaultSlot({ $pulldown: $xePulldown }) : []),
+                }, defaultSlot ? defaultSlot({ options, $pulldown: $xePulldown }) : []),
                 h(Teleport, {
                     to: 'body',
                     disabled: btnTransfer ? !initialized : true
@@ -32201,19 +33421,19 @@ var VxePulldownComponent = defineVxeComponent({
                                 headerSlot
                                     ? h('div', {
                                         class: 'vxe-pulldown--panel-header'
-                                    }, headerSlot({ $pulldown: $xePulldown }))
+                                    }, headerSlot({ options, $pulldown: $xePulldown }))
                                     : renderEmptyElement($xePulldown),
                                 h('div', {
                                     class: 'vxe-pulldown--panel-body'
                                 }, dropdownSlot
-                                    ? dropdownSlot({ $pulldown: $xePulldown })
+                                    ? dropdownSlot({ options, $pulldown: $xePulldown })
                                     : [
                                         renderDefaultPanel(options)
                                     ]),
                                 footerSlot
                                     ? h('div', {
                                         class: 'vxe-pulldown--panel-footer'
-                                    }, footerSlot({ $pulldown: $xePulldown }))
+                                    }, footerSlot({ options, $pulldown: $xePulldown }))
                                     : renderEmptyElement($xePulldown)
                             ]
                             : [])
@@ -32596,10 +33816,10 @@ dynamicApp.use(VxeRadioButton);
 VxeUI.component(VxeRadioButtonComponent);
 const RadioButton = VxeRadioButton;
 
-function createReactData$5() {
+function createReactData$7() {
     return {};
 }
-function createInternalData$4() {
+function createInternalData$6() {
     return {
     // isLoaded: false
     };
@@ -32640,8 +33860,8 @@ var VxeRadioGroupComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$5());
-        const internalData = createInternalData$4();
+        const reactData = reactive(createReactData$7());
+        const internalData = createInternalData$6();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -32777,8 +33997,8 @@ var VxeRadioGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(reactData, createReactData$5());
-            XEUtils.assign(internalData, createInternalData$4());
+            XEUtils.assign(reactData, createReactData$7());
+            XEUtils.assign(internalData, createInternalData$6());
         });
         provide('$xeRadioGroup', $xeRadioGroup);
         $xeRadioGroup.renderVN = renderVN;
@@ -33163,7 +34383,7 @@ dynamicApp.use(VxeRow);
 VxeUI.component(VxeRowComponent);
 const Row = VxeRow;
 
-function createReactData$4() {
+function createReactData$6() {
     return {
         groupName: XEUtils.uniqueId('xe_group_'),
         selectStyle: {
@@ -33204,7 +34424,7 @@ var VxeSegmentedComponent = defineVxeComponent({
         const refElem = ref();
         const refWrapperElem = ref();
         const refSelectedElem = ref();
-        const reactData = reactive(createReactData$4());
+        const reactData = reactive(createReactData$6());
         const refMaps = {
             refElem
         };
@@ -33377,7 +34597,7 @@ var VxeSegmentedComponent = defineVxeComponent({
             updateStyle();
         });
         onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$4());
+            XEUtils.assign(reactData, createReactData$6());
         });
         $xeSegmented.renderVN = renderVN;
         return $xeSegmented;
@@ -35188,7 +36408,7 @@ const { errLog: errLog$4 } = createComponentLog('table-select');
 function getRowUniqueId() {
     return XEUtils.uniqueId('row_');
 }
-function createReactData$3() {
+function createReactData$5() {
     return {
         initialized: false,
         tableColumns: [],
@@ -35202,7 +36422,7 @@ function createReactData$3() {
         isActivated: false
     };
 }
-function createInternalData$3() {
+function createInternalData$5() {
     return {
         // hpTimeout: undefined,
         // vpTimeout: undefined,
@@ -35281,8 +36501,8 @@ var VxeTableSelectComponent = defineVxeComponent({
         const refGridWrapper = ref();
         const refOptionPanel = ref();
         const refGrid = ref();
-        const reactData = reactive(createReactData$3());
-        const internalData = createInternalData$3();
+        const reactData = reactive(createReactData$5());
+        const internalData = createInternalData$5();
         const refMaps = {
             refElem
         };
@@ -35885,8 +37105,8 @@ var VxeTableSelectComponent = defineVxeComponent({
             globalEvents.off($xeTableSelect, 'mousedown');
             globalEvents.off($xeTableSelect, 'blur');
             globalEvents.off($xeTableSelect, 'resize');
-            XEUtils.assign(reactData, createReactData$3());
-            XEUtils.assign(internalData, createInternalData$3());
+            XEUtils.assign(reactData, createReactData$5());
+            XEUtils.assign(internalData, createInternalData$5());
         });
         nextTick(() => {
             if (!VxeTableGridComponent) {
@@ -35911,6 +37131,77 @@ dynamicApp.use(VxeTableSelect);
 VxeUI.component(VxeTableSelectComponent);
 const TableSelect = VxeTableSelect;
 
+function createReactData$4() {
+    return {};
+}
+function createInternalData$4() {
+    return {};
+}
+var VxeTableTransferComponent = defineVxeComponent({
+    name: 'VxeTableTransfer',
+    props: {
+        modelValue: Array,
+        options: Array,
+        size: {
+            type: String,
+            default: () => getConfig$3().tableTransfer.size || getConfig$3().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive(createReactData$4());
+        const internalData = createInternalData$4();
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeTableTransfer = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $tableTransfer: $xeTableTransfer }, params));
+        };
+        const tableTransferMethods = {
+            dispatchEvent
+        };
+        const tableTransferPrivateMethods = {};
+        Object.assign($xeTableTransfer, tableTransferMethods, tableTransferPrivateMethods);
+        const renderVN = () => {
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-table-transfer'
+            }, []);
+        };
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData$4());
+            XEUtils.assign(internalData, createInternalData$4());
+        });
+        $xeTableTransfer.renderVN = renderVN;
+        return $xeTableTransfer;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeTableTransfer = Object.assign({}, VxeTableTransferComponent, {
+    install(app) {
+        app.component(VxeTableTransferComponent.name, VxeTableTransferComponent);
+    }
+});
+dynamicApp.use(VxeTableTransfer);
+VxeUI.component(VxeTableTransferComponent);
+const TableTransfer = VxeTableTransfer;
+
 const { warnLog: warnLog$3, errLog: errLog$3 } = createComponentLog('tabs');
 const scrollbarOffsetSize = 20;
 var VxeTabsComponent = defineVxeComponent({
@@ -37887,12 +39178,103 @@ dynamicApp.use(VxeTour);
 VxeUI.component(VxeTourComponent);
 const Tour = VxeTour;
 
-function enNodeValue(nodeid) {
-    return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
+function createReactData$3() {
+    return {};
 }
-function deNodeValue(nodeid) {
-    return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
+function createInternalData$3() {
+    return {};
 }
+var VxeTransferComponent = defineVxeComponent({
+    name: 'VxeTransfer',
+    props: {
+        modelValue: Array,
+        options: Array,
+        size: {
+            type: String,
+            default: () => getConfig$3().transfer.size || getConfig$3().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { emit, slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive(createReactData$3());
+        const internalData = createInternalData$3();
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeTransfer = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $transfer: $xeTransfer }, params));
+        };
+        const transferMethods = {
+            dispatchEvent
+        };
+        const transferPrivateMethods = {};
+        Object.assign($xeTransfer, transferMethods, transferPrivateMethods);
+        const renderVN = () => {
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-transfer'
+            }, [
+                headerSlot
+                    ? h('div', {
+                        class: 'vxe-transfer--header'
+                    }, headerSlot({ $transfer: $xeTransfer }))
+                    : renderEmptyElement($xeTransfer),
+                h('div', {
+                    class: 'vxe-transfer--body'
+                }, [
+                    h('div', {
+                        class: 'vxe-transfer--left-wrapper'
+                    }),
+                    h('div', {
+                        class: 'vxe-transfer--buttons-wrapper'
+                    }),
+                    h('div', {
+                        class: 'vxe-transfer--right-wrapper'
+                    })
+                ]),
+                footerSlot
+                    ? h('div', {
+                        class: 'vxe-transfer--footer'
+                    }, footerSlot({ $transfer: $xeTransfer }))
+                    : renderEmptyElement($xeTransfer)
+            ]);
+        };
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData$3());
+            XEUtils.assign(internalData, createInternalData$3());
+        });
+        $xeTransfer.renderVN = renderVN;
+        return $xeTransfer;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeTransfer = Object.assign({}, VxeTransferComponent, {
+    install(app) {
+        app.component(VxeTransferComponent.name, VxeTransferComponent);
+    }
+});
+dynamicApp.use(VxeTransfer);
+VxeUI.component(VxeTransferComponent);
+const Transfer = VxeTransfer;
+
 function countTreeExpand($xeTree, prevNode) {
     let count = 1;
     if (!prevNode) {
@@ -37934,29 +39316,6 @@ function getCrossTreeDragNodeInfo() {
     return crossTreeDragNodeInfo;
 }
 
-const rowMoveCls = 'row--drag-move';
-/**
- * 上下拖拽
- */
-function moveRowAnimateToTb(elemList, offsetTop) {
-    XEUtils.arrayEach(elemList, trEl => {
-        trEl.style.transform = `translateY(${offsetTop}px)`;
-    });
-    requestAnimationFrame(() => {
-        XEUtils.arrayEach(elemList, trEl => {
-            addClass(trEl, rowMoveCls);
-            trEl.style.transform = '';
-        });
-    });
-}
-function clearRowAnimate(elem, clss) {
-    setTimeout(() => {
-        if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
-        }
-    }, 500);
-}
-
 const { errLog: errLog$2 } = createComponentLog('tree');
 const { menus, getConfig, getI18n, getIcon } = VxeUI;
 /**
@@ -38086,19 +39445,13 @@ var VxeTreeComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig().tree.showRadio
         },
-        checkNodeKey: {
-            type: [String, Number],
-            default: () => getConfig().tree.checkNodeKey
-        },
+        checkNodeKey: [String, Number],
         radioConfig: Object,
         showCheckbox: {
             type: Boolean,
             default: () => getConfig().tree.showCheckbox
         },
-        checkNodeKeys: {
-            type: Array,
-            default: () => getConfig().tree.checkNodeKeys
-        },
+        checkNodeKeys: Array,
         checkboxConfig: Object,
         nodeConfig: Object,
         lazy: Boolean,
@@ -38294,7 +39647,7 @@ var VxeTreeComponent = defineVxeComponent({
             }
             const valueField = computeValueField.value;
             const nodeKey = XEUtils.get(node, valueField);
-            return enNodeValue(nodeKey);
+            return enModelValue(nodeKey);
         };
         const isExpandByNode = (node) => {
             const { updateExpandedFlag } = reactData;
@@ -38339,7 +39692,7 @@ var VxeTreeComponent = defineVxeComponent({
                 }
                 const nodeList = [];
                 nodeKeys.forEach((nodeKey) => {
-                    const nodeid = enNodeValue(nodeKey);
+                    const nodeid = enModelValue(nodeKey);
                     const nodeItem = nodeMaps[nodeid];
                     if (nodeItem) {
                         nodeList.push(nodeItem.item);
@@ -39220,7 +40573,7 @@ var VxeTreeComponent = defineVxeComponent({
             reactData.updateCheckboxFlag++;
             updateCheckboxStatus();
             const nodeids = XEUtils.keys(selectCheckboxMaps);
-            const value = nodeids.map(deNodeValue);
+            const value = nodeids.map(deModelValue);
             emitCheckboxMode(value);
             dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt);
         };
@@ -39269,7 +40622,7 @@ var VxeTreeComponent = defineVxeComponent({
                 return;
             }
             const isChecked = true;
-            const value = deNodeValue(nodeid);
+            const value = deModelValue(nodeid);
             reactData.selectRadioKey = nodeid;
             emitRadioMode(value);
             dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
@@ -39307,7 +40660,7 @@ var VxeTreeComponent = defineVxeComponent({
             getCurrentNodeId() {
                 const { currentNode } = reactData;
                 if (currentNode) {
-                    return deNodeValue(getNodeId(currentNode));
+                    return deModelValue(getNodeId(currentNode));
                 }
                 return null;
             },
@@ -39324,7 +40677,7 @@ var VxeTreeComponent = defineVxeComponent({
             },
             setCurrentNodeId(nodeKey) {
                 const { nodeMaps } = internalData;
-                const nodeItem = nodeMaps[enNodeValue(nodeKey)];
+                const nodeItem = nodeMaps[enModelValue(nodeKey)];
                 reactData.currentNode = nodeItem ? nodeItem.item : null;
                 return nextTick();
             },
@@ -39352,7 +40705,7 @@ var VxeTreeComponent = defineVxeComponent({
                 return null;
             },
             setRadioNodeId(nodeKey) {
-                reactData.selectRadioKey = enNodeValue(nodeKey);
+                reactData.selectRadioKey = enModelValue(nodeKey);
                 emitRadioMode(nodeKey);
                 return nextTick();
             },
@@ -39360,7 +40713,7 @@ var VxeTreeComponent = defineVxeComponent({
                 if (node) {
                     const nodeid = getNodeId(node);
                     reactData.selectRadioKey = nodeid;
-                    emitRadioMode(deNodeValue(nodeid));
+                    emitRadioMode(deModelValue(nodeid));
                 }
                 else {
                     emitRadioMode(null);
@@ -39386,7 +40739,7 @@ var VxeTreeComponent = defineVxeComponent({
                 const { selectCheckboxMaps } = internalData;
                 const nodeKeys = [];
                 XEUtils.each(selectCheckboxMaps, (item, nodeId) => {
-                    nodeKeys.push(deNodeValue(nodeId));
+                    nodeKeys.push(deModelValue(nodeId));
                 });
                 return nodeKeys;
             },
@@ -39464,7 +40817,7 @@ var VxeTreeComponent = defineVxeComponent({
                         nodeKeys = [nodeKeys];
                     }
                     nodeKeys.forEach((nodeKey) => {
-                        const nodeid = enNodeValue(nodeKey);
+                        const nodeid = enModelValue(nodeKey);
                         handleSetExpand(nodeid, expanded, treeExpandedMaps);
                     });
                     reactData.updateExpandedFlag++;
@@ -39477,7 +40830,7 @@ var VxeTreeComponent = defineVxeComponent({
                 const { treeExpandedMaps } = internalData;
                 const nodeKeys = [];
                 XEUtils.each(treeExpandedMaps, (item, nodeId) => {
-                    nodeKeys.push(deNodeValue(nodeId));
+                    nodeKeys.push(deModelValue(nodeId));
                 });
                 return nodeKeys;
             },
@@ -39515,7 +40868,7 @@ var VxeTreeComponent = defineVxeComponent({
                         nodeKeys = [nodeKeys];
                     }
                     nodeKeys.forEach((nodeKey) => {
-                        const nodeid = enNodeValue(nodeKey);
+                        const nodeid = enModelValue(nodeKey);
                         handleSetExpand(nodeid, !treeExpandedMaps[`${nodeid}`], treeExpandedMaps);
                     });
                     reactData.updateExpandedFlag++;
@@ -39847,10 +41200,11 @@ var VxeTreeComponent = defineVxeComponent({
                 const dragNodeid = getNodeId(dragNode);
                 const dragNodeRest = nodeMaps[dragNodeid] || {};
                 const _dragNodeIndex = dragNodeRest._index;
+                const newNodeid = getNodeId(prevDragNode);
                 let dragNodeHeight = 0;
                 let dragOffsetTop = -1;
                 if (animation) {
-                    const prevItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${prevDragNode}"]`);
+                    const prevItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${newNodeid}"]`);
                     const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`);
                     const targetItemEl = prevItemEl || oldItemEl;
                     if (targetItemEl) {
@@ -39865,7 +41219,6 @@ var VxeTreeComponent = defineVxeComponent({
                 const oldAllMaps = {};
                 let isSelfToChildStatus = false;
                 const oldRest = dragNodeRest;
-                const newNodeid = getNodeId(prevDragNode);
                 const newRest = nodeMaps[newNodeid];
                 if (transform) {
                     if (oldRest && newRest) {
@@ -40571,7 +41924,7 @@ var VxeTreeComponent = defineVxeComponent({
             loadData(props.data || []);
         });
         watch(() => props.checkNodeKey, (nodeKey) => {
-            reactData.selectRadioKey = enNodeValue(nodeKey);
+            reactData.selectRadioKey = enModelValue(nodeKey);
         });
         const checkboxFlag = ref(0);
         watch(() => props.checkNodeKeys ? props.checkNodeKeys.length : 0, () => {
@@ -40642,7 +41995,7 @@ var VxeTreeComponent = defineVxeComponent({
             XEUtils.assign(reactData, createReactData$2());
             XEUtils.assign(internalData, createInternalData$2());
         });
-        reactData.selectRadioKey = enNodeValue(props.checkNodeKey);
+        reactData.selectRadioKey = enModelValue(props.checkNodeKey);
         loadData(props.data || []);
         $xeTree.renderVN = renderVN;
         provide('$xeTree', $xeTree);
@@ -40748,10 +42101,12 @@ var VxeTreeSelectComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().treeSelect.showRadio
         },
+        radioConfig: Object,
         showCheckbox: {
             type: Boolean,
             default: () => getConfig$3().treeSelect.showCheckbox
         },
+        checkboxConfig: Object,
         popupConfig: Object,
         treeConfig: Object,
         menuConfig: Object,
@@ -40884,20 +42239,20 @@ var VxeTreeSelectComponent = defineVxeComponent({
             return Object.assign({ isHover: true }, treeOpts.nodeConfig);
         });
         const computeTreeCheckboxOpts = computed(() => {
-            const { showCheckbox } = props;
+            const { showCheckbox, checkboxConfig } = props;
             const treeOpts = computeTreeOpts.value;
             return Object.assign({
                 showIcon: XEUtils.isBoolean(showCheckbox) ? showCheckbox : !!treeOpts.showCheckbox
-            }, treeOpts.checkboxConfig, {
+            }, treeOpts.checkboxConfig, checkboxConfig, {
                 trigger: 'node'
             });
         });
         const computeTreeRadioOpts = computed(() => {
-            const { showRadio } = props;
+            const { showRadio, radioConfig } = props;
             const treeOpts = computeTreeOpts.value;
             return Object.assign({
                 showIcon: XEUtils.isBoolean(showRadio) ? showRadio : !!treeOpts.showRadio
-            }, treeOpts.radioConfig, {
+            }, treeOpts.radioConfig, radioConfig, {
                 trigger: 'node'
             });
         });
@@ -41145,7 +42500,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             dispatchEvent('visible-change', { visible: false }, evnt || null);
         };
         const changeEvent = (evnt, selectValue, node) => {
-            const value = XEUtils.isArray(selectValue) ? selectValue.map(deNodeValue) : deNodeValue(selectValue);
+            const value = XEUtils.isArray(selectValue) ? selectValue.map(deModelValue) : deModelValue(selectValue);
             emitModel(value);
             if (value !== props.modelValue) {
                 dispatchEvent('change', { value, node, option: node }, evnt);
@@ -43974,6 +45329,7 @@ const components = [
     VxeSwitch,
     VxeTabPane,
     VxeTableSelect,
+    VxeTableTransfer,
     VxeTabs,
     VxeTag,
     VxeTextEllipsis,
@@ -43984,6 +45340,7 @@ const components = [
     VxeTip,
     VxeTooltip,
     VxeTour,
+    VxeTransfer,
     VxeTree,
     VxeTreeSelect,
     VxeUpload,
@@ -44088,6 +45445,7 @@ var VxeUIExport = /*#__PURE__*/Object.freeze({
     Switch: Switch,
     TabPane: TabPane,
     TableSelect: TableSelect,
+    TableTransfer: TableTransfer,
     Tabs: Tabs,
     Tag: Tag,
     Text: Text,
@@ -44099,6 +45457,7 @@ var VxeUIExport = /*#__PURE__*/Object.freeze({
     Tips: Tips,
     Tooltip: Tooltip,
     Tour: Tour,
+    Transfer: Transfer,
     Tree: Tree,
     TreeSelect: TreeSelect,
     Upload: Upload,
@@ -44177,6 +45536,7 @@ var VxeUIExport = /*#__PURE__*/Object.freeze({
     VxeSwitch: VxeSwitch,
     VxeTabPane: VxeTabPane,
     VxeTableSelect: VxeTableSelect,
+    VxeTableTransfer: VxeTableTransfer,
     VxeTabs: VxeTabs,
     VxeTag: VxeTag,
     VxeText: VxeText,
@@ -44187,6 +45547,7 @@ var VxeUIExport = /*#__PURE__*/Object.freeze({
     VxeTip: VxeTip,
     VxeTooltip: VxeTooltip,
     VxeTour: VxeTour,
+    VxeTransfer: VxeTransfer,
     VxeTree: VxeTree,
     VxeTreeSelect: VxeTreeSelect,
     VxeUpload: VxeUpload,
@@ -44206,4 +45567,4 @@ var VxeUIExport = /*#__PURE__*/Object.freeze({
     watermark: watermark
 });
 
-export { Alert, Anchor, AnchorLink, Avatar, Backtop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, CheckboxGroup, Col, Collapse, CollapsePane, ColorPicker, ContextMenu, ContextMenuController, Countdown, DatePanel, DatePicker, DateRangePicker, Drawer, DrawerController, Empty, Form, FormGather, FormGroup, FormItem, Icon, IconPicker, Image$1 as Image, ImageGroup, ImagePreview, Input, LayoutAside, LayoutBody, LayoutContainer, LayoutFooter, LayoutHeader, Link, List, Loading, LoadingController, Menu, Modal, ModalController, NoticeBar, NumberInput, Optgroup, Option, Pager, PasswordInput, Print, PrintPageBreak, Pulldown, Radio, RadioButton, RadioGroup, Rate, Result, Row, Segmented, Select, Slider, Split, SplitPane, Splitter, SplitterPanel, Steps, Switch, TabPane, TableSelect, Tabs, Tag, Text, TextEllipsis, Textarea, Timeline, TimelineItem, Tip, Tips, Tooltip, Tour, Tree, TreeSelect, Upload, VxeAlert, VxeAnchor, VxeAnchorLink, VxeAvatar, VxeBacktop, VxeBadge, VxeBreadcrumb, VxeBreadcrumbItem, VxeButton, VxeButtonGroup, VxeCalendar, VxeCard, VxeCarousel, VxeCarouselItem, VxeCascader, VxeCheckbox, VxeCheckboxButton, VxeCheckboxGroup, VxeCol, VxeCollapse, VxeCollapsePane, VxeColorPicker, VxeContextMenu, VxeCountdown, VxeDatePanel, VxeDatePicker, VxeDateRangePicker, VxeDrawer, VxeEmpty, VxeForm, VxeFormGather, VxeFormGroup, VxeFormItem, VxeIcon, VxeIconPicker, VxeImage, VxeImageGroup, VxeImagePreview, VxeInput, VxeLayoutAside, VxeLayoutBody, VxeLayoutContainer, VxeLayoutFooter, VxeLayoutHeader, VxeLink, VxeList, VxeLoading, VxeMenu, VxeModal, VxeNoticeBar, VxeNumberInput, VxeOptgroup, VxeOption, VxePager, VxePasswordInput, VxePrint, VxePrintPageBreak, VxePulldown, VxeRadio, VxeRadioButton, VxeRadioGroup, VxeRate, VxeResult, VxeRow, VxeSegmented, VxeSelect, VxeSlider, VxeSplit, VxeSplitPane, VxeSplitter, VxeSplitterPanel, VxeSteps, VxeSwitch, VxeTabPane, VxeTableSelect, VxeTabs, VxeTag, VxeText, VxeTextEllipsis, VxeTextarea, VxeTimeline, VxeTimelineItem, VxeTip, VxeTooltip, VxeTour, VxeTree, VxeTreeSelect, VxeUpload, VxeWatermark, Watermark, WatermarkController, config, VxeUIExport as default, drawer, install, loading, modal, print, readFile, saveFile, setup, version, watermark };
+export { Alert, Anchor, AnchorLink, Avatar, Backtop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, CarouselItem, Cascader, Checkbox, CheckboxButton, CheckboxGroup, Col, Collapse, CollapsePane, ColorPicker, ContextMenu, ContextMenuController, Countdown, DatePanel, DatePicker, DateRangePicker, Drawer, DrawerController, Empty, Form, FormGather, FormGroup, FormItem, Icon, IconPicker, Image$1 as Image, ImageGroup, ImagePreview, Input, LayoutAside, LayoutBody, LayoutContainer, LayoutFooter, LayoutHeader, Link, List, Loading, LoadingController, Menu, Modal, ModalController, NoticeBar, NumberInput, Optgroup, Option, Pager, PasswordInput, Print, PrintPageBreak, Pulldown, Radio, RadioButton, RadioGroup, Rate, Result, Row, Segmented, Select, Slider, Split, SplitPane, Splitter, SplitterPanel, Steps, Switch, TabPane, TableSelect, TableTransfer, Tabs, Tag, Text, TextEllipsis, Textarea, Timeline, TimelineItem, Tip, Tips, Tooltip, Tour, Transfer, Tree, TreeSelect, Upload, VxeAlert, VxeAnchor, VxeAnchorLink, VxeAvatar, VxeBacktop, VxeBadge, VxeBreadcrumb, VxeBreadcrumbItem, VxeButton, VxeButtonGroup, VxeCalendar, VxeCard, VxeCarousel, VxeCarouselItem, VxeCascader, VxeCheckbox, VxeCheckboxButton, VxeCheckboxGroup, VxeCol, VxeCollapse, VxeCollapsePane, VxeColorPicker, VxeContextMenu, VxeCountdown, VxeDatePanel, VxeDatePicker, VxeDateRangePicker, VxeDrawer, VxeEmpty, VxeForm, VxeFormGather, VxeFormGroup, VxeFormItem, VxeIcon, VxeIconPicker, VxeImage, VxeImageGroup, VxeImagePreview, VxeInput, VxeLayoutAside, VxeLayoutBody, VxeLayoutContainer, VxeLayoutFooter, VxeLayoutHeader, VxeLink, VxeList, VxeLoading, VxeMenu, VxeModal, VxeNoticeBar, VxeNumberInput, VxeOptgroup, VxeOption, VxePager, VxePasswordInput, VxePrint, VxePrintPageBreak, VxePulldown, VxeRadio, VxeRadioButton, VxeRadioGroup, VxeRate, VxeResult, VxeRow, VxeSegmented, VxeSelect, VxeSlider, VxeSplit, VxeSplitPane, VxeSplitter, VxeSplitterPanel, VxeSteps, VxeSwitch, VxeTabPane, VxeTableSelect, VxeTableTransfer, VxeTabs, VxeTag, VxeText, VxeTextEllipsis, VxeTextarea, VxeTimeline, VxeTimelineItem, VxeTip, VxeTooltip, VxeTour, VxeTransfer, VxeTree, VxeTreeSelect, VxeUpload, VxeWatermark, Watermark, WatermarkController, config, VxeUIExport as default, drawer, install, loading, modal, print, readFile, saveFile, setup, version, watermark };