vxe-pc-ui 3.15.24 → 3.15.26

package/es/list/src/list.js

@@ -1,14 +1,16 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, getIcon, getI18n, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, getIcon, getI18n, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store';
 import { addClass, getTpImg, isScale, removeClass, toCssUnit } from '../../ui/src/dom';
 import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
+import { getItemCacheObj } from './util';
 import VxeLoadingComponent from '../../loading/src/loading';
-const { errLog } = createComponentLog('tree');
+const { warnLog, errLog } = createComponentLog('tree');
+let crossListDragRowObj = null;
 function eqRowKey(rowKey1, rowKey2) {
     return ('' + rowKey1) === ('' + rowKey2);
 }
@@ -38,15 +40,20 @@ function createReactData() {
         updateCheckboxFlag: 1,
         isAllChecked: false,
         isAllIndeterminate: false,
+        insertRowFlag: 1,
+        removeRowFlag: 1,
         dragRow: null,
-        dragTipText: ''
+        dragTipText: '',
+        isCrossDragRow: false
     };
 }
 function createInternalData() {
     return {
         resizeObserver: undefined,
         fullData: [],
+        afterList: [],
         fullKeyMaps: {},
+        rowMaps: {},
         lastScrollLeft: 0,
         lastScrollTop: 0,
         scrollYStore: {
@@ -57,7 +64,9 @@ function createInternalData() {
             rowHeight: 0
         },
         currentRow: null,
-        selectCheckboxMaps: {}
+        selectCheckboxMaps: {},
+        insertRowMaps: {},
+        removeRowMaps: {}
         // prevDragRow: null,
         // prevDragPos: ''
     };
@@ -82,6 +91,10 @@ export default {
             default: () => getConfig().list.autoResize
         },
         syncResize: [Boolean, String, Number],
+        showSeq: {
+            type: Boolean,
+            default: () => getConfig().list.showSeq
+        },
         showRadio: {
             type: Boolean,
             default: () => getConfig().list.showRadio
@@ -96,6 +109,7 @@ export default {
         checkboxConfig: Object,
         rowConfig: Object,
         dragConfig: Object,
+        menuConfig: Object,
         virtualYConfig: Object,
         scrollY: Object
     },
@@ -149,6 +163,11 @@ export default {
             const props = $xeList;
             return Object.assign({ showIcon: true }, getConfig().list.checkboxConfig, props.checkboxConfig);
         },
+        computeMenuOpts() {
+            const $xeList = this;
+            const props = $xeList;
+            return Object.assign({}, getConfig().list.menuConfig, props.menuConfig);
+        },
         computeWrapperStyles() {
             const $xeList = this;
             const rowHeight = $xeList.computeRowHeight;
@@ -243,6 +262,30 @@ export default {
             internalData.selectCheckboxMaps = selectMaps;
             $xeList.updateCheckboxStatus();
         },
+        updateAfterDataIndex() {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const { afterList, rowMaps } = internalData;
+            const keyField = $xeList.computeKeyField;
+            let vtIndex = 0;
+            afterList.forEach((item, index) => {
+                const roweid = getRowIdByField(item, keyField);
+                const rowRest = rowMaps[roweid];
+                if (rowRest) {
+                    rowRest._index = vtIndex;
+                }
+                else {
+                    const rest = {
+                        item,
+                        index,
+                        $index: -1,
+                        _index: vtIndex
+                    };
+                    rowMaps[roweid] = rest;
+                }
+                vtIndex++;
+            });
+        },
         cacheRowMap() {
             const $xeList = this;
             const internalData = $xeList.internalData;
@@ -265,17 +308,21 @@ export default {
             const internalData = $xeList.internalData;
             const { scrollYStore } = internalData;
             const sYOpts = $xeList.computeSYOpts;
-            const fullData = datas || [];
+            const fullData = datas ? datas.slice(0) : [];
             Object.assign(scrollYStore, {
                 startIndex: 0,
                 endIndex: 1,
                 visibleSize: 0
             });
             internalData.fullData = fullData;
+            internalData.insertRowMaps = {};
+            reactData.insertRowFlag++;
+            internalData.removeRowMaps = {};
+            reactData.removeRowFlag++;
             // 如果gt为0，则总是启用
             reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
             $xeList.cacheRowMap();
-            $xeList.handleData();
+            $xeList.handleData(true);
             $xeList.updateRadioModeValue();
             $xeList.updateCheckboxModeValue();
             return $xeList.computeScrollLoad().then(() => {
@@ -339,13 +386,35 @@ export default {
             reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
             reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
         },
-        handleData() {
+        updateAfterFullData() {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const { fullData } = internalData;
+            internalData.afterList = fullData.slice(0);
+            $xeList.updateAfterDataIndex();
+        },
+        handleData(force) {
             const $xeList = this;
             const reactData = $xeList.reactData;
             const internalData = $xeList.internalData;
             const { scrollYLoad } = reactData;
-            const { fullData, scrollYStore } = internalData;
-            reactData.rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            const { fullData, scrollYStore, rowMaps } = internalData;
+            const keyField = $xeList.computeKeyField;
+            if (force) {
+                // 更新数据，处理筛选和排序
+                $xeList.updateAfterFullData();
+            }
+            const rowList = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
+            if (keyField) {
+                rowList.forEach((item, $index) => {
+                    const rowid = getRowIdByField(item, keyField);
+                    const rowRest = rowMaps[rowid];
+                    if (rowRest) {
+                        rowRest.$index = $index;
+                    }
+                });
+            }
+            reactData.rowList = rowList;
             return $xeList.$nextTick();
         },
         updateYData() {
@@ -887,6 +956,12 @@ export default {
             $xeList.emitRadioMode(value);
             $xeList.dispatchEvent('radio-change', { row, value, checked: isChecked }, evnt);
         },
+        handleRowDragEndClearStatus() {
+            const $xeList = this;
+            $xeList.clearRowDragData();
+            $xeList.clearCrossListDragStatus();
+            $xeList.recalculate();
+        },
         clearRowDropOrigin() {
             const $xeList = this;
             const el = $xeList.$refs.refElem;
@@ -945,7 +1020,7 @@ export default {
         clearCrossListDragStatus() {
             const $xeList = this;
             const crossListDragRowInfo = getCrossListDragRowInfo($xeList);
-            // crossListDragRowObj = null
+            crossListDragRowObj = null;
             crossListDragRowInfo.row = null;
         },
         clearDragStatus() {
@@ -962,10 +1037,11 @@ export default {
         handleRowDragMousedownEvent(evnt, params) {
             const $xeList = this;
             const reactData = $xeList.reactData;
+            const crossListDragRowInfo = getCrossListDragRowInfo($xeList);
             evnt.stopPropagation();
             const { row } = params;
             const dragConfig = $xeList.computeDragOpts;
-            const { trigger, dragStartMethod } = dragConfig;
+            const { isCrossListDrag, trigger, dragStartMethod } = dragConfig;
             const dragEl = evnt.currentTarget;
             const rowEl = trigger === 'row' ? dragEl : dragEl.parentElement.parentElement;
             $xeList.clearRowDropOrigin();
@@ -975,6 +1051,10 @@ export default {
                 $xeList.hideDropTip();
                 return;
             }
+            if (isCrossListDrag) {
+                crossListDragRowInfo.row = row;
+                crossListDragRowObj = { $oldList: $xeList, $newList: null };
+            }
             const dragstartEventParams = {
                 row
             };
@@ -1191,6 +1271,16 @@ export default {
             const internalData = $xeList.internalData;
             const { dragRow } = reactData;
             const { prevDragRow, prevDragPos } = internalData;
+            const dragConfig = $xeList.computeDragOpts;
+            const { isCrossListDrag } = dragConfig;
+            // 跨列表拖拽
+            if (isCrossListDrag && crossListDragRowObj) {
+                const { $newList } = crossListDragRowObj;
+                if ($newList && $newList.xID !== $xeList.xID) {
+                    $newList.handleCrossListRowDragInsertEvent(evnt);
+                    return;
+                }
+            }
             $xeList.handleRowDragSwapEvent(evnt, dragRow, prevDragRow, prevDragPos);
         },
         handleRowDragDragoverEvent(evnt) {
@@ -1278,6 +1368,445 @@ export default {
             const $xeList = this;
             $xeList.dispatchEvent('row-dblclick', { row }, evnt);
         },
+        insertListRow(newRecords, isAppend) {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const { fullData, rowMaps } = internalData;
+            const keyField = $xeList.computeKeyField;
+            const funcName = isAppend ? 'push' : 'unshift';
+            newRecords.forEach((item) => {
+                const rowid = getRowIdByField(item, keyField);
+                const rowRest = getItemCacheObj(item);
+                fullData[funcName](item);
+                rowMaps[rowid] = rowRest;
+            });
+        },
+        handleInsertRowAt(records, targetRowOrRowKey, isInsertNextRow) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const { fullData, rowMaps, removeRowMaps, insertRowMaps } = internalData;
+            const keyField = $xeList.computeKeyField;
+            if (!keyField) {
+                errLog('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'row-config.keyField']);
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            if (!XEUtils.isArray(records)) {
+                records = [records];
+            }
+            let targetRow = targetRowOrRowKey;
+            if (XEUtils.isString(targetRowOrRowKey) || XEUtils.isNumber(targetRowOrRowKey)) {
+                const rowRest = rowMaps[targetRowOrRowKey];
+                if (rowRest) {
+                    targetRow = rowRest.item;
+                }
+            }
+            if (!records.length) {
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            const newRecords = records.map(record => XEUtils.assign({}, record));
+            if (XEUtils.eqNull(targetRow)) {
+                $xeList.insertListRow(newRecords, false);
+            }
+            else {
+                if (targetRow === -1) {
+                    $xeList.insertListRow(newRecords, true);
+                }
+                else {
+                    const rowIndex = fullData.findIndex(item => targetRow[keyField] === item[keyField]);
+                    if (rowIndex > -1) {
+                        newRecords.forEach(item => {
+                            const rowid = getRowIdByField(item, keyField);
+                            const rowRest = getItemCacheObj(item);
+                            rowMaps[rowid] = rowRest;
+                        });
+                        let targetIndex = rowIndex;
+                        if (isInsertNextRow) {
+                            targetIndex = targetIndex + 1;
+                        }
+                        fullData.splice(targetIndex, 0, ...newRecords);
+                    }
+                    else {
+                        warnLog('vxe.error.unableInsert');
+                        $xeList.insertListRow(newRecords, true);
+                    }
+                }
+            }
+            newRecords.forEach((newItem) => {
+                const rowid = getRowIdByField(newItem, keyField);
+                // 如果是被删除的数据，则还原状态
+                if (removeRowMaps[rowid]) {
+                    delete removeRowMaps[rowid];
+                    if (insertRowMaps[rowid]) {
+                        delete insertRowMaps[rowid];
+                    }
+                }
+                else {
+                    insertRowMaps[rowid] = newItem;
+                }
+            });
+            reactData.removeRowFlag++;
+            reactData.insertRowFlag++;
+            $xeList.cacheRowMap();
+            $xeList.handleData(true);
+            $xeList.updateAfterDataIndex();
+            $xeList.updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                $xeList.updateYSpace();
+            }
+            return $xeList.$nextTick().then(() => {
+                return {
+                    row: newRecords.length ? newRecords[newRecords.length - 1] : null,
+                    rows: newRecords
+                };
+            });
+        },
+        insert(records) {
+            const $xeList = this;
+            return $xeList.handleInsertRowAt(records, null);
+        },
+        insertAt(records, targetRowOrRowKey) {
+            const $xeList = this;
+            return $xeList.handleInsertRowAt(records, targetRowOrRowKey);
+        },
+        insertNextAt(records, targetRowOrRowKey) {
+            const $xeList = this;
+            return $xeList.handleInsertRowAt(records, targetRowOrRowKey, true);
+        },
+        getInsertRecords() {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const { insertRowMaps } = internalData;
+            const insertRecords = [];
+            XEUtils.each(insertRowMaps, (item) => {
+                insertRecords.push(item);
+            });
+            return insertRecords;
+        },
+        isInsertByRow(row) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const rowid = $xeList.getRowId(row);
+            return !!reactData.insertRowFlag && !!internalData.insertRowMaps[rowid];
+        },
+        remove(rows) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const { fullData, insertRowMaps, removeRowMaps } = internalData;
+            const keyField = $xeList.computeKeyField;
+            if (!keyField) {
+                errLog('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'row-config.keyField']);
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            let delList = [];
+            if (!rows) {
+                rows = fullData;
+            }
+            else if (!XEUtils.isArray(rows)) {
+                rows = [rows];
+            }
+            if (!rows.length) {
+                return Promise.resolve({ row: null, rows: [] });
+            }
+            // 如果是新增，则保存记录
+            rows.forEach((item) => {
+                if (!$xeList.isInsertByRow(item)) {
+                    const rowid = $xeList.getRowId(item);
+                    removeRowMaps[rowid] = item;
+                }
+            });
+            // 从数据源中移除
+            if (fullData === rows) {
+                rows = delList = fullData.slice(0);
+                internalData.fullData = [];
+            }
+            else {
+                rows.forEach((item) => {
+                    const rowid = $xeList.getRowId(item);
+                    const rowIndex = XEUtils.findIndexOf(fullData, item => rowid === $xeList.getRowId(item));
+                    if (rowIndex > -1) {
+                        const rItems = fullData.splice(rowIndex, 1);
+                        delList.push(rItems[0]);
+                    }
+                });
+            }
+            // 从新增中移除已删除的数据
+            rows.forEach((item) => {
+                const rowid = $xeList.getRowId(item);
+                if (insertRowMaps[rowid]) {
+                    delete insertRowMaps[rowid];
+                }
+            });
+            reactData.removeRowFlag++;
+            reactData.insertRowFlag++;
+            $xeList.cacheRowMap();
+            $xeList.handleData(true);
+            $xeList.updateAfterDataIndex();
+            $xeList.updateCheckboxStatus();
+            if (reactData.scrollYLoad) {
+                $xeList.updateYSpace();
+            }
+            return $xeList.$nextTick().then(() => {
+                return $xeList.recalculate();
+            }).then(() => {
+                return { row: delList.length ? delList[delList.length - 1] : null, rows: delList };
+            });
+        },
+        getRemoveRecords() {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const { removeRowMaps } = internalData;
+            const removeRecords = [];
+            XEUtils.each(removeRowMaps, (item) => {
+                removeRecords.push(item);
+            });
+            return removeRecords;
+        },
+        isRemoveByRow(row) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const rowid = $xeList.getRowId(row);
+            return !!reactData.removeRowFlag && !!internalData.removeRowMaps[rowid];
+        },
+        handleCrossListRowDragCancelEvent() {
+            const $xeList = this;
+            $xeList.clearRowDragData();
+            $xeList.clearCrossListDragStatus();
+        },
+        /**
+           * 处理跨树拖拽完成
+           */
+        handleCrossListRowDragFinishEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const crossListDragRowInfo = getCrossListDragRowInfo($xeList);
+            const { rowList } = reactData;
+            const { rowMaps } = internalData;
+            const dragOpts = $xeList.computeDragOpts;
+            const { animation, isCrossListDrag } = dragOpts;
+            const el = $xeList.$refs.refElem;
+            if (!el) {
+                return;
+            }
+            if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+                const { row: dragRow } = crossListDragRowInfo;
+                if (dragRow) {
+                    const dragRowid = $xeList.getRowId(dragRow);
+                    const dragRowRest = rowMaps[dragRowid];
+                    let dragRowHeight = 0;
+                    let rsIndex = -1;
+                    if (dragRowRest) {
+                        if (animation) {
+                            const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${dragRowid}"]`);
+                            const targetItemEl = oldItemEl;
+                            if (targetItemEl) {
+                                dragRowHeight = targetItemEl.offsetHeight;
+                            }
+                        }
+                        rsIndex = dragRowRest.$index;
+                    }
+                    const dragRangeList = rsIndex > -1 && rsIndex < rowList.length - 1 ? rowList.slice(rsIndex + 1) : [];
+                    const dragList = [dragRow];
+                    $xeList.remove(dragList).then(() => {
+                        if (animation && dragRowHeight && dragRangeList.length) {
+                            const wrapperEl = el;
+                            const dtClss = [];
+                            dragRangeList.forEach(item => {
+                                const rowid = $xeList.getRowId(item);
+                                dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                            });
+                            const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                            moveRowAnimateToTb(dtTrList, dragRowHeight);
+                        }
+                    });
+                    $xeList.dispatchEvent('row-remove-dragend', {
+                        row: dragRow
+                    }, evnt);
+                    $xeList.handleRowDragEndClearStatus();
+                }
+            }
+        },
+        /**
+           * 处理跨树拖至新的空树
+           */
+        handleCrossListRowDragoverEmptyEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const { rowList } = reactData;
+            const dragOpts = $xeList.computeDragOpts;
+            const { isCrossListDrag } = dragOpts;
+            if (isCrossListDrag && crossListDragRowObj && !rowList.length) {
+                const { $oldList, $newList } = crossListDragRowObj;
+                if ($oldList) {
+                    const oldListReactData = $oldList;
+                    if ($oldList.xID !== $xeList.xID) {
+                        if ($newList && $newList.xID !== $xeList.xID) {
+                            $newList.hideCrossListRowDropClearStatus();
+                        }
+                        evnt.preventDefault();
+                        $oldList.hideCrossListRowDropClearStatus();
+                        crossListDragRowObj.$newList = $xeList;
+                        internalData.prevDragRow = null;
+                        reactData.dragTipText = oldListReactData.dragTipText;
+                        $xeList.showDropTip(evnt, evnt.currentTarget, true, '');
+                    }
+                }
+            }
+        },
+        /**
+           * 处理跨树拖插入
+           */
+        handleCrossListRowDragInsertEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const crossListDragRowInfo = getCrossListDragRowInfo($xeList);
+            const { prevDragRow, prevDragPos } = internalData;
+            const dragOpts = $xeList.computeDragOpts;
+            const { animation, isCrossListDrag, dragEndMethod } = dragOpts;
+            // 跨表拖拽
+            if (isCrossListDrag && crossListDragRowObj && crossListDragRowInfo) {
+                const { row: oldRow } = crossListDragRowInfo;
+                const { $oldList } = crossListDragRowObj;
+                const el = $xeList.$refs.refElem;
+                if (!el) {
+                    return;
+                }
+                if ($oldList && oldRow) {
+                    const dragRow = oldRow;
+                    let dragOffsetIndex = -1;
+                    if (prevDragRow) {
+                        dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+                    }
+                    const dragParams = {
+                        oldRow: dragRow,
+                        newRow: prevDragRow,
+                        dragRow,
+                        dragPos: prevDragPos,
+                        offsetIndex: dragOffsetIndex
+                    };
+                    const errRest = {
+                        status: false
+                    };
+                    Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
+                        if (!status) {
+                            if ($oldList) {
+                                if ($oldList.xID !== $xeList.xID) {
+                                    $oldList.handleCrossListRowDragCancelEvent(evnt);
+                                }
+                            }
+                            $xeList.handleRowDragEndClearStatus();
+                            return errRest;
+                        }
+                        let insertRest = Promise.resolve();
+                        const dragList = [dragRow];
+                        $oldList.handleCrossListRowDragFinishEvent(evnt);
+                        if (prevDragRow) {
+                            if (prevDragPos === 'bottom') {
+                                insertRest = $xeList.insertNextAt(dragList, prevDragRow);
+                            }
+                            else {
+                                insertRest = $xeList.insertAt(dragList, prevDragRow);
+                            }
+                        }
+                        else {
+                            insertRest = $xeList.insert(dragList);
+                        }
+                        $xeList.dispatchEvent('row-insert-dragend', {
+                            oldRow,
+                            newRow: prevDragRow,
+                            dragRow,
+                            dragPos: prevDragPos,
+                            offsetIndex: dragOffsetIndex
+                        }, evnt);
+                        $xeList.clearRowDragData();
+                        insertRest.then(() => {
+                            const { rowList } = reactData;
+                            const { rowMaps } = internalData;
+                            const oldRowid = $xeList.getRowId(dragRow);
+                            const oldRowRest = rowMaps[oldRowid];
+                            let dragRowHeight = 0;
+                            let rsIndex = -1;
+                            if (oldRowRest) {
+                                if (animation) {
+                                    const oldItemEl = el.querySelector(`.vxe-list--row[rowid="${oldRowid}"]`);
+                                    const targetItemEl = oldItemEl;
+                                    if (targetItemEl) {
+                                        dragRowHeight = targetItemEl.offsetHeight;
+                                    }
+                                }
+                                rsIndex = oldRowRest.$index;
+                            }
+                            const dragRangeList = rsIndex > -1 ? rowList.slice(rsIndex) : [];
+                            if (animation && dragRowHeight && dragRangeList.length) {
+                                const wrapperEl = el;
+                                const dtClss = [];
+                                dragRangeList.forEach(item => {
+                                    const rowid = $xeList.getRowId(item);
+                                    dtClss.push(`.vxe-list--row[rowid="${rowid}"]`);
+                                });
+                                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                moveRowAnimateToTb(dtTrList, -dragRowHeight);
+                            }
+                        });
+                    });
+                }
+            }
+        },
+        hideCrossListRowDropClearStatus() {
+            const $xeList = this;
+            $xeList.hideDropTip();
+        },
+        handleContextmenuEvent(evnt, row) {
+            const $xeList = this;
+            const props = $xeList;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const { menuConfig } = props;
+            const menuOpts = $xeList.computeMenuOpts;
+            const rowOpts = $xeList.computeRowOpts;
+            const { isCurrent } = rowOpts;
+            if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+                const { options, visibleMethod } = menuOpts;
+                if (!visibleMethod || visibleMethod({ $list: $xeList, options, row })) {
+                    if (isCurrent) {
+                        $xeList.changeCurrentEvent(evnt, row);
+                    }
+                    else if (internalData.currentRow) {
+                        internalData.currentRow = null;
+                        reactData.currRowFlag++;
+                    }
+                    if (VxeUI.contextMenu) {
+                        VxeUI.contextMenu.openByEvent(evnt, {
+                            options,
+                            events: {
+                                optionClick(eventParams) {
+                                    const { option } = eventParams;
+                                    const gMenuOpts = menus.get(option.code);
+                                    const tmMethod = gMenuOpts ? gMenuOpts.listMenuMethod : null;
+                                    const params = {
+                                        menu: option,
+                                        row,
+                                        $event: evnt,
+                                        $list: $xeList
+                                    };
+                                    if (tmMethod) {
+                                        tmMethod(params, evnt);
+                                    }
+                                    $xeList.dispatchEvent('menu-click', params, eventParams.$event);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+            $xeList.dispatchEvent('row-menu', { row }, evnt);
+        },
         //
         // Render
         //
@@ -1396,6 +1925,7 @@ export default {
             const { selectRadioRow, currRowFlag, updateCheckboxFlag } = reactData;
             const { selectCheckboxMaps, currentRow } = internalData;
             const contentSlot = slots.content;
+            const extraSlot = slots.extra;
             const dragOpts = $xeList.computeDragOpts;
             const { trigger, icon, disabledMethod, visibleMethod } = dragOpts;
             const rowOpts = $xeList.computeRowOpts;
@@ -1452,6 +1982,12 @@ export default {
                 key: 'ct5',
                 class: 'vxe-list--row-content'
             }, contentSlot ? contentSlot(rowParams) : (contentField ? getText(row[contentField]) : '')));
+            if (extraSlot) {
+                ctVNs.push(h('div', {
+                    key: 'ct7',
+                    class: 'vxe-list--row-extra'
+                }, extraSlot(rowParams)));
+            }
             const rowOns = {
                 mousedown(evnt) {
                     $xeList.handleRowMousedownEvent(evnt, row);
@@ -1462,6 +1998,9 @@ export default {
                 },
                 dblclick(evnt) {
                     $xeList.handleRowDblclickEvent(evnt, row);
+                },
+                contextmenu(evnt) {
+                    $xeList.handleContextmenuEvent(evnt, row);
                 }
             };
             // 拖拽行事件
@@ -1502,16 +2041,21 @@ export default {
             const radioOpts = $xeList.computeRadioOpts;
             const checkboxOpts = $xeList.computeCheckboxOpts;
             const dragOpts = $xeList.computeDragOpts;
-            const { trigger } = dragOpts;
+            const { trigger, isCrossListDrag } = dragOpts;
             const rowOpts = $xeList.computeRowOpts;
             const { isHover, padding } = rowOpts;
             const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
+            const leOns = {};
+            if (isCrossListDrag && !rowList.length) {
+                leOns.dragover = $xeList.handleCrossListRowDragoverEmptyEvent;
+            }
             return h('div', {
                 ref: 'refElem',
                 class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
                         [`size--${vSize}`]: vSize,
                         'is--loading': loading
                     }],
+                on: leOns,
                 style: wrapperStyles
             }, [
                 headerSlot || showDefChekboxHead
@@ -1643,11 +2187,14 @@ export default {
         const $xeList = this;
         const props = $xeList;
         const internalData = $xeList.internalData;
-        const { showRadio, showCheckbox } = props;
+        const { showSeq, showRadio, showCheckbox } = props;
         const rowOpts = $xeList.computeRowOpts;
         const { useKey, keyField } = rowOpts;
         const isDrag = $xeList.computeIsDrag;
         if (!keyField) {
+            if (showSeq) {
+                errLog('vxe.error.reqSupportProp', ['show-seq', 'row-config.keyField']);
+            }
             if (showRadio) {
                 errLog('vxe.error.reqSupportProp', ['show-radio', 'row-config.keyField']);
             }