vxe-table 3.11.26 → 3.11.27-beta.1

package/es/table/src/body.js

@@ -271,7 +271,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
             getClass(className, params),
             getClass(allCellClassName, params)
         ],
-        key: columnKey || columnOpts.useKey || rowOpts.useKey ? column.id : $columnIndex,
+        key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? column.id : $columnIndex,
         attrs,
         style: Object.assign({
             height: cellHeight
@@ -375,7 +375,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
                     rowid
                 },
                 style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-                key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+                key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
                 nativeOn: trOn
             }, tdVNs)
             : h('tr', {

package/es/table/src/cell.js

@@ -94,10 +94,10 @@ function renderHeaderCellDragIcon(h, params) {
     const { $table, column } = params;
     const columnOpts = $table.computeColumnOpts;
     const columnDragOpts = $table.computeColumnDragOpts;
-    const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts;
+    const { showIcon, icon, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts;
     const isDisabled = disabledMethod && disabledMethod(params);
     if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
-        if (!(column.fixed || column.parentId)) {
+        if (!column.fixed && (isCrossDrag || !column.parentId)) {
             return h('span', {
                 key: 'dg',
                 class: ['vxe-cell--drag-handle', {

package/es/table/src/column.js

@@ -1,6 +1,7 @@
 import Cell from './cell';
+import { defineVxeComponent } from '../../ui/src/comp';
 import { assembleColumn, destroyColumn } from './util';
-const props = {
+export const columnProps = {
     // 列唯一主键
     colId: [String, Number],
     // 渲染类型 seq,radio,checkbox,expand,html
@@ -92,9 +93,9 @@ const props = {
     // 额外的参数
     params: Object
 };
-const watch = {};
-Object.keys(props).forEach(name => {
-    watch[name] = function (value) {
+export const columnWatch = {};
+Object.keys(columnProps).forEach(name => {
+    columnWatch[name] = function (value) {
         this.columnConfig.update(name, value);
         if (this.$xetable) {
             if (name === 'filters') {
@@ -107,9 +108,9 @@ Object.keys(props).forEach(name => {
         }
     };
 });
-export default {
+export default defineVxeComponent({
     name: 'VxeColumn',
-    props,
+    props: columnProps,
     provide() {
         return {
             $xecolumn: this,
@@ -124,11 +125,12 @@ export default {
             default: null
         }
     },
-    watch,
+    watch: columnWatch,
     created() {
         this.columnConfig = this.createColumn(this.$xetable, this);
     },
     mounted() {
+        this.columnConfig.slots = this.$scopedSlots;
         assembleColumn(this);
     },
     destroyed() {
@@ -138,4 +140,4 @@ export default {
         return h('div', this.$slots.default);
     },
     methods: Cell
-};
+});

package/es/table/src/group.js

@@ -1,11 +1,42 @@
-import VxeTableColumn from './column';
-export default {
+import Cell from './cell';
+import { defineVxeComponent } from '../../ui/src/comp';
+import { assembleColumn, destroyColumn } from './util';
+import { columnProps, columnWatch } from './column';
+export default defineVxeComponent({
     name: 'VxeColgroup',
-    extends: VxeTableColumn,
+    props: columnProps,
     provide() {
         return {
-            xecolgroup: this,
+            $xecolumn: this,
             $xegrid: null
         };
-    }
-};
+    },
+    inject: {
+        $xetable: {
+            default: null
+        },
+        $xecolumn: {
+            default: null
+        }
+    },
+    watch: columnWatch,
+    created() {
+        this.columnConfig = this.createColumn(this.$xetable, this);
+    },
+    mounted() {
+        const { $scopedSlots } = this;
+        const columnSlots = {};
+        if ($scopedSlots.header) {
+            columnSlots.header = $scopedSlots.header;
+        }
+        this.columnConfig.slots = columnSlots;
+        assembleColumn(this);
+    },
+    destroyed() {
+        destroyColumn(this);
+    },
+    render(h) {
+        return h('div', this.$slots.default);
+    },
+    methods: Cell
+});

package/es/table/src/methods.js

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils';
-import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
+import { tpImg, browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
@@ -446,11 +446,19 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         if (cdLineEl) {
             if (showLine) {
                 const thRect = thEl.getBoundingClientRect();
+                const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
                 cdLineEl.style.display = 'block';
+                cdLineEl.style.top = `${offsetTop}px`;
                 cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
                 cdLineEl.style.width = `${thRect.width}px`;
-                cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+                if (prevDragToChild) {
+                    cdLineEl.style.height = `${thRect.height}px`;
+                }
+                else {
+                    cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+                }
                 cdLineEl.setAttribute('drag-pos', dragPos);
+                cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
             }
             else {
                 cdLineEl.style.display = '';
@@ -941,12 +949,12 @@ const Methods = {
             if (!cacheItem) {
                 cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 };
             }
+            cacheItem.row = row;
+            cacheItem.items = items;
+            cacheItem.parent = parent;
+            cacheItem.level = level;
+            cacheItem.index = treeConfig && parent ? -1 : index;
             if (isSource) {
-                cacheItem.row = row;
-                cacheItem.items = items;
-                cacheItem.parent = parent;
-                cacheItem.level = level;
-                cacheItem.index = treeConfig && parent ? -1 : index;
                 fullDataRowIdMaps[rowid] = cacheItem;
             }
             fullAllDataRowIdMaps[rowid] = cacheItem;
@@ -1030,11 +1038,20 @@ const Methods = {
      * 牺牲数据组装的耗时，用来换取使用过程中的流畅
      */
     cacheColumnMap() {
-        const { tableFullColumn, collectColumn, fullColumnMap, showOverflow, columnOpts, rowOpts } = this;
-        const fullColumnIdData = this.fullColumnIdData = {};
-        const fullColumnFieldData = this.fullColumnFieldData = {};
+        const $xeTable = this;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { tableFullColumn, collectColumn } = internalData;
+        const fullColumnIdData = internalData.fullColumnIdData = {};
+        const fullColumnFieldData = internalData.fullColumnFieldData = {};
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const columnOpts = $xeTable.computeColumnOpts;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { isCrossDrag, isSelfToChildDrag } = columnDragOpts;
+        const rowOpts = $xeTable.computeRowOpts;
         const isGroup = collectColumn.some(hasChildrenList);
-        let isAllOverflow = !!showOverflow;
+        let isAllOverflow = !!props.showOverflow;
         let expandColumn;
         let treeNodeColumn;
         let checkboxColumn;
@@ -1043,15 +1060,18 @@ const Methods = {
         let hasFixed;
         const handleFunc = (column, index, items, path, parent) => {
             const { id: colid, field, fixed, type, treeNode } = column;
-            const rest = { column, colid, index, items, parent: parent || null, width: 0 };
+            const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parent || null, width: 0 };
             if (field) {
-                if (process.env.NODE_ENV === 'development') {
-                    if (fullColumnFieldData[field]) {
-                        warnLog('vxe.error.colRepet', ['field', field]);
-                    }
+                if (fullColumnFieldData[field]) {
+                    errLog('vxe.error.colRepet', ['field', field]);
                 }
                 fullColumnFieldData[field] = rest;
             }
+            else {
+                if (isCrossDrag || isSelfToChildDrag) {
+                    errLog('vxe.error.emptyProp', ['column.field']);
+                }
+            }
             if (!hasFixed && fixed) {
                 hasFixed = fixed;
             }
@@ -1096,27 +1116,6 @@ const Methods = {
                     }
                 }
             }
-            if (process.env.NODE_ENV === 'development') {
-                if (this.showOverflow && column.showOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-overflow=${this.showOverflow}`, `column.show-overflow=${column.showOverflow}`]);
-                }
-                if (this.showHeaderOverflow && column.showHeaderOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-header-overflow=${this.showHeaderOverflow}`, `column.show-header-overflow=${column.showHeaderOverflow}`]);
-                }
-                if (this.showFooterOverflow && column.showFooterOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-footer-overflow=${this.showFooterOverflow}`, `column.show-footer-overflow=${column.showFooterOverflow}`]);
-                }
-            }
-            if (process.env.NODE_ENV === 'development') {
-                if (htmlColumn) {
-                    if (!columnOpts.useKey) {
-                        errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html']);
-                    }
-                    if (!rowOpts.useKey) {
-                        errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html']);
-                    }
-                }
-            }
             if (isAllOverflow && column.showOverflow === false) {
                 isAllOverflow = false;
             }
@@ -1124,9 +1123,7 @@ const Methods = {
                 errLog('vxe.error.colRepet', ['colId', colid]);
             }
             fullColumnIdData[colid] = rest;
-            fullColumnMap.set(column, rest);
         };
-        fullColumnMap.clear();
         if (isGroup) {
             XEUtils.eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
                 column.level = nodes.length;
@@ -1137,14 +1134,24 @@ const Methods = {
             tableFullColumn.forEach(handleFunc);
         }
         if (process.env.NODE_ENV === 'development') {
-            if (expandColumn && this.mouseOpts.area) {
+            if (expandColumn && mouseOpts.area) {
                 errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']);
             }
         }
-        this.isGroup = isGroup;
-        this.treeNodeColumn = treeNodeColumn;
-        this.expandColumn = expandColumn;
-        this.isAllOverflow = isAllOverflow;
+        if (process.env.NODE_ENV === 'development') {
+            if (htmlColumn) {
+                if (!columnOpts.useKey) {
+                    errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html']);
+                }
+                if (!rowOpts.useKey) {
+                    errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html']);
+                }
+            }
+        }
+        reactData.isGroup = isGroup;
+        reactData.treeNodeColumn = treeNodeColumn;
+        reactData.expandColumn = expandColumn;
+        reactData.isAllOverflow = isAllOverflow;
     },
     /**
      * 根据 tr 元素获取对应的 row 信息
@@ -2668,6 +2675,10 @@ const Methods = {
             const $xeTable = this;
             const internalData = $xeTable;
             const { rceTimeout } = internalData;
+            const el = $xeTable.$refs.refElem;
+            if (!el || !el.clientWidth) {
+                $xeTable.autoCellWidth();
+            }
             if (rceTimeout) {
                 clearTimeout(rceTimeout);
                 $xeTable.$nextTick(() => {
@@ -5078,8 +5089,9 @@ const Methods = {
      * 行拖拽
      */
     handleRowDragDragstartEvent(evnt) {
-        const img = new Image();
         if (evnt.dataTransfer) {
+            const img = new Image();
+            img.src = tpImg;
             evnt.dataTransfer.setDragImage(img, 0, 0);
         }
     },
@@ -5137,8 +5149,8 @@ const Methods = {
                                         return;
                                     }
                                     if (oldAllMaps[newRowid]) {
+                                        isSelfToChildStatus = true;
                                         if (!isSelfToChildDrag) {
-                                            isSelfToChildStatus = true;
                                             if (VxeUI.modal) {
                                                 VxeUI.modal.message({
                                                     status: 'error',
@@ -5216,7 +5228,7 @@ const Methods = {
                     }
                     reactData.isDragRowMove = true;
                     $xeTable.handleTableData(treeConfig && transform);
-                    $xeTable.cacheRowMap(true);
+                    $xeTable.cacheRowMap();
                     $xeTable.updateScrollYStatus();
                     if (!(treeConfig && transform)) {
                         $xeTable.updateAfterDataIndex();
@@ -5245,6 +5257,7 @@ const Methods = {
         }
         hideDropTip($xeTable);
         clearRowDropOrigin($xeTable);
+        internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
         setTimeout(() => {
@@ -5297,7 +5310,6 @@ const Methods = {
         const $xeTable = this;
         const props = $xeTable;
         const reactData = $xeTable;
-        evnt.stopPropagation();
         const { dragConfig } = props;
         const rowDragOpts = $xeTable.computeRowDragOpts;
         const { dragStartMethod } = rowDragOpts;
@@ -5335,8 +5347,9 @@ const Methods = {
      * 列拖拽
      */
     handleHeaderCellDragDragstartEvent(evnt) {
-        const img = new Image();
         if (evnt.dataTransfer) {
+            const img = new Image();
+            img.src = tpImg;
             evnt.dataTransfer.setDragImage(img, 0, 0);
         }
     },
@@ -5347,17 +5360,19 @@ const Methods = {
         const internalData = $xeTable;
         const { mouseConfig } = props;
         const columnDragOpts = $xeTable.computeColumnDragOpts;
-        const { dragEndMethod } = columnDragOpts;
+        const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
         const { dragCol } = reactData;
-        const { collectColumn, prevDragCol, prevDragPos } = internalData;
+        const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData;
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
         if (prevDragCol && dragCol) {
             // 判断是否有拖动
             if (prevDragCol !== dragCol) {
+                const oldColumn = dragCol;
+                const newColumn = prevDragCol;
                 Promise.resolve(dragEndMethod
                     ? dragEndMethod({
-                        oldColumn: dragCol,
-                        newColumn: prevDragCol,
+                        oldColumn,
+                        newColumn,
                         dragPos: prevDragPos,
                         offsetIndex: dragOffsetIndex
                     })
@@ -5365,24 +5380,102 @@ const Methods = {
                     if (!status) {
                         return;
                     }
+                    let oafIndex = -1;
+                    let nafIndex = -1;
+                    const oldAllMaps = {};
+                    XEUtils.eachTree([oldColumn], column => {
+                        oldAllMaps[column.id] = column;
+                    });
+                    let isSelfToChildStatus = false;
+                    if (oldColumn.parentId && newColumn.parentId) {
+                        // 子到子
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                        if (oldAllMaps[newColumn.id]) {
+                            isSelfToChildStatus = true;
+                            if (!isSelfToChildDrag) {
+                                if (VxeUI.modal) {
+                                    VxeUI.modal.message({
+                                        status: 'error',
+                                        content: getI18n('vxe.error.treeDragChild')
+                                    });
+                                }
+                                return;
+                            }
+                        }
+                    }
+                    else if (oldColumn.parentId) {
+                        // 子到根
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                    }
+                    else if (newColumn.parentId) {
+                        // 根到子
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                        if (oldAllMaps[newColumn.id]) {
+                            isSelfToChildStatus = true;
+                            if (!isSelfToChildDrag) {
+                                if (VxeUI.modal) {
+                                    VxeUI.modal.message({
+                                        status: 'error',
+                                        content: getI18n('vxe.error.treeDragChild')
+                                    });
+                                }
+                                return;
+                            }
+                        }
+                    }
+                    else {
+                        // 根到根
+                    }
+                    const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === oldColumn.id);
+                    // 改变层级
+                    if (isSelfToChildStatus && isSelfToChildDrag) {
+                        if (oldewMatchRest) {
+                            const { items: oCols, index: oIndex } = oldewMatchRest;
+                            const childList = oldColumn.children || [];
+                            childList.forEach(column => {
+                                column.parentId = oldColumn.parentId;
+                            });
+                            oCols.splice(oIndex, 1, ...childList);
+                            oldColumn.children = [];
+                        }
+                    }
+                    else {
+                        if (oldewMatchRest) {
+                            const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest;
+                            oCols.splice(oIndex, 1);
+                            if (!oParent) {
+                                oafIndex = oIndex;
+                            }
+                        }
+                    }
+                    const newMatchRest = XEUtils.findTree(collectColumn, item => item.id === newColumn.id);
+                    if (newMatchRest) {
+                        const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
+                        // 转子级
+                        if (isToChildDrag && prevDragToChild) {
+                            oldColumn.parentId = newColumn.id;
+                            newColumn.children = (newColumn.children || []).concat([oldColumn]);
+                        }
+                        else {
+                            oldColumn.parentId = newColumn.parentId;
+                            nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+                        }
+                        if (!nParent) {
+                            nafIndex = nIndex;
+                        }
+                    }
                     XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                         if (!parent) {
                             const sortIndex = index + 1;
                             column.renderSortNumber = sortIndex;
                         }
                     });
-                    const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id);
-                    const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
-                    const newTargetCol = collectColumn[nafIndex];
-                    if (newTargetCol) {
-                        // 插入最后位置
-                        dragCol.renderSortNumber = newTargetCol.renderSortNumber;
-                        newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
-                    }
-                    else {
-                        // 插入新位置
-                        dragCol.renderSortNumber = collectColumn.length + 1.5;
-                    }
                     reactData.isDragColMove = true;
                     if (mouseConfig) {
                         if ($xeTable.clearSelected) {
@@ -5393,14 +5486,12 @@ const Methods = {
                             $xeTable.clearCopyCellArea();
                         }
                     }
-                    $xeTable.analyColumnWidth();
-                    $xeTable.$nextTick().then(() => {
+                    $xeTable.refreshColumn(true).then(() => {
                         $xeTable.updateCellAreas();
-                        $xeTable.refreshColumn(true);
                     });
                     $xeTable.dispatchEvent('column-dragend', {
-                        oldColumn: dragCol,
-                        newColumn: prevDragCol,
+                        oldColumn,
+                        newColumn,
                         dragPos: prevDragPos,
                         offsetIndex: dragOffsetIndex,
                         _index: {
@@ -5415,6 +5506,7 @@ const Methods = {
         }
         hideDropTip($xeTable);
         clearColDropOrigin($xeTable);
+        internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
         setTimeout(() => {
@@ -5426,10 +5518,13 @@ const Methods = {
         const reactData = $xeTable;
         const internalData = $xeTable;
         const { dragCol } = reactData;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { isToChildDrag, isCrossDrag } = columnDragOpts;
         if (!dragCol) {
             evnt.preventDefault();
             return;
         }
+        const hasCtrlKey = evnt.ctrlKey;
         const thEl = evnt.currentTarget;
         const colid = thEl.getAttribute('colid');
         const column = $xeTable.getColumnById(colid);
@@ -5438,11 +5533,11 @@ const Methods = {
             const { dragCol } = reactData;
             const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
             const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-            if (dragCol.id === column.id || column.parentId) {
+            if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
                 showDropTip($xeTable, evnt, null, thEl, false, dragPos);
                 return;
             }
-            internalData.prevDragToChild = false;
+            internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey);
             internalData.prevDragCol = column;
             internalData.prevDragPos = dragPos;
             showDropTip($xeTable, evnt, null, thEl, true, dragPos);
@@ -5457,7 +5552,6 @@ const Methods = {
         var _a;
         const $xeTable = this;
         const reactData = $xeTable;
-        evnt.stopPropagation();
         const columnDragOpts = $xeTable.computeColumnDragOpts;
         const { dragStartMethod } = columnDragOpts;
         const { column } = params;

package/es/table/src/table.js

@@ -764,7 +764,7 @@ export default {
             });
         },
         staticColumns(value) {
-            this.handleColumn(value);
+            this.handleColumn(XEUtils.clone(value));
         },
         tableColumn() {
             this.analyColumnWidth();

package/es/table/src/util.js

@@ -123,7 +123,6 @@ export function handleFieldOrColumn(_vm, fieldOrColumn) {
 export function assembleColumn(_vm) {
     const { $el, $xetable, $xecolumn, columnConfig } = _vm;
     const groupConfig = $xecolumn ? $xecolumn.columnConfig : null;
-    columnConfig.slots = _vm.$scopedSlots;
     if (groupConfig) {
         if (process.env.NODE_ENV === 'development') {
             if ($xecolumn.$options._componentTag === 'vxe-table-column') {