vxe-pc-ui 4.15.11 → 4.15.13

package/es/list/src/list.js

@@ -1,24 +1,49 @@
 import { h, ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, globalEvents, globalResize, createEvent, useSize } from '../../ui';
-import { isScale } from '../../ui/src/dom';
+import { getConfig, getIcon, getI18n, globalEvents, globalResize, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { getCrossListDragRowInfo } from './store';
+import { isScale, removeClass, addClass, getTpImg, toCssUnit } from '../../ui/src/dom';
+import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils';
+import { createComponentLog } from '../../ui/src/log';
+import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import VxeLoadingComponent from '../../loading/src/loading';
+const { errLog } = 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() {
     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() {
     return {
         resizeObserver: undefined,
         fullData: [],
+        fullKeyMaps: {},
         lastScrollLeft: 0,
         lastScrollTop: 0,
         scrollYStore: {
@@ -27,7 +52,11 @@ function createInternalData() {
             visibleSize: 0,
             offsetSize: 0,
             rowHeight: 0
-        }
+        },
+        currentRow: null,
+        selectCheckboxMaps: {}
+        // prevDragRow: null,
+        // prevDragPos: ''
     };
 }
 export default defineVxeComponent({
@@ -47,11 +76,36 @@ export default defineVxeComponent({
             default: () => getConfig().list.autoResize
         },
         syncResize: [Boolean, String, Number],
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig().list.showRadio
+        },
+        checkRowKey: [String, Number],
+        radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig().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;
@@ -60,9 +114,14 @@ export default defineVxeComponent({
         const { computeSize } = useSize(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
+        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
         };
@@ -74,25 +133,70 @@ export default defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
+        const computeRowOpts = computed(() => {
+            return Object.assign({}, getConfig().list.rowConfig, props.rowConfig);
+        });
+        const computeDragOpts = computed(() => {
+            return Object.assign({}, getConfig().list.dragConfig, props.dragConfig);
+        });
         const computeSYOpts = computed(() => {
             return Object.assign({}, getConfig().list.virtualYConfig || getConfig().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().list.radioConfig, props.radioConfig);
+        });
+        const computeCheckboxOpts = computed(() => {
+            return Object.assign({ showIcon: true }, getConfig().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];
@@ -114,6 +218,10 @@ export default 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');
         };
@@ -126,7 +234,7 @@ export default 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 = () => {
@@ -140,17 +248,17 @@ export default 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;
@@ -264,6 +372,44 @@ export default 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 数据
@@ -280,11 +426,685 @@ export default 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('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,
@@ -296,29 +1116,286 @@ export default 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().LIST_DRAG_STATUS_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-list--drag-sort-tip-disabled-status', getIcon().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().RADIO_CHECKED : getIcon().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().CHECKBOX_CHECKED : getIcon().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().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().CHECKBOX_CHECKED : (isAllIndeterminate ? getIcon().CHECKBOX_INDETERMINATE : getIcon().CHECKBOX_UNCHECKED)]
+                                    }),
+                                    h('span', {
+                                        class: 'vxe-checkbox--label'
+                                    }, XEUtils.eqNull(headerTitle) ? getI18n('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', {
@@ -329,12 +1406,28 @@ export default 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(),
                 /**
                  * 加载中
                  */
@@ -354,17 +1447,36 @@ export default 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, () => {
+            reFlag.value++;
+        });
+        watch(computeRowHeight, () => {
+            reFlag.value++;
         });
-        watch(() => props.syncResize, (value) => {
-            if (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());
@@ -373,7 +1485,25 @@ export default 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('vxe.error.reqSupportProp', ['show-radio', 'row-config.keyField']);
+                }
+                if (showCheckbox) {
+                    errLog('vxe.error.reqSupportProp', ['show-checkbox', 'row-config.keyField']);
+                }
+                if (isDrag) {
+                    errLog('vxe.error.reqSupportProp', ['drag-config', 'row-config.keyField']);
+                }
+            }
+            if (useKey && !keyField) {
+                errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
+            }
             if (props.autoResize) {
                 const el = refElem.value;
                 const resizeObserver = globalResize.create(() => recalculate());
@@ -383,6 +1513,7 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
+            recalculate();
             globalEvents.on($xeList, 'resize', recalculate);
         });
         onBeforeUnmount(() => {