vxe-table 3.11.31 → 3.11.32

package/es/table/src/cell.js

@@ -46,22 +46,24 @@ function renderCellDragIcon(h, params) {
     const tableProps = $table;
     const { dragConfig } = tableProps;
     const rowDragOpts = $table.computeRowDragOpts;
-    const { icon, disabledMethod } = rowDragOpts;
+    const { icon, trigger, disabledMethod } = rowDragOpts;
     const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null);
     const isDisabled = rDisabledMethod && rDisabledMethod(params);
+    const ons = {};
+    if (trigger !== 'cell') {
+        ons.mousedown = (evnt) => {
+            if (!isDisabled) {
+                $table.handleCellDragMousedownEvent(evnt, params);
+            }
+        };
+        ons.mouseup = $table.handleCellDragMouseupEvent;
+    }
     return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
                 'is--disabled': isDisabled
             }],
-        on: {
-            mousedown(evnt) {
-                if (!isDisabled) {
-                    $table.handleCellDragMousedownEvent(evnt, params);
-                }
-            },
-            mouseup: $table.handleCellDragMouseupEvent
-        }
+        on: ons
     }, [
         h('i', {
             class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
@@ -94,23 +96,25 @@ function renderHeaderCellDragIcon(h, params) {
     const { $table, column } = params;
     const columnOpts = $table.computeColumnOpts;
     const columnDragOpts = $table.computeColumnDragOpts;
-    const { showIcon, icon, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts;
-    const isDisabled = disabledMethod && disabledMethod(params);
+    const { showIcon, icon, trigger, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts;
     if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
         if (!column.fixed && (isCrossDrag || !column.parentId)) {
+            const isDisabled = disabledMethod && disabledMethod(params);
+            const ons = {};
+            if (trigger !== 'cell') {
+                ons.mousedown = (evnt) => {
+                    if (!isDisabled) {
+                        $table.handleHeaderCellDragMousedownEvent(evnt, params);
+                    }
+                };
+                ons.mouseup = $table.handleHeaderCellDragMouseupEvent;
+            }
             return h('span', {
                 key: 'dg',
                 class: ['vxe-cell--drag-handle', {
                         'is--disabled': isDisabled
                     }],
-                on: {
-                    mousedown(evnt) {
-                        if (!isDisabled) {
-                            $table.handleHeaderCellDragMousedownEvent(evnt, params);
-                        }
-                    },
-                    mouseup: $table.handleHeaderCellDragMouseupEvent
-                }
+                on: ons
             }, [
                 h('i', {
                     class: icon || getIcon().TABLE_DRAG_COLUMN

package/es/table/src/header.js

@@ -6,8 +6,12 @@ import { convertHeaderColumnToRows, getColReMinWidth } from './util';
 const { renderer } = VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, cols, $rowIndex) => {
-    const { $parent: $xetable, fixedType } = _vm;
-    const { $listeners: tableListeners, resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, highlightCurrentColumn, currentColumn, scrollXLoad, overflowX, scrollbarWidth, sortOpts, mouseConfig, columnOpts } = $xetable;
+    const $xeTable = _vm.$parent;
+    const $xeGrid = $xeTable.xegrid;
+    const { fixedType } = _vm;
+    const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, currentColumn, scrollXLoad, overflowX, scrollbarWidth, mouseConfig, columnOpts } = $xeTable;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const { disabledMethod: dragDisabledMethod } = columnDragOpts;
     return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column;
         // const { enabled } = tooltipOpts
@@ -22,30 +26,40 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
         const showTitle = headOverflow === 'title';
         const showTooltip = headOverflow === true || headOverflow === 'tooltip';
         let hasEllipsis = showTitle || showTooltip || showEllipsis;
-        const thOns = {};
         const hasFilter = column.filters && column.filters.some((item) => item.checked);
-        const columnIndex = $xetable.getColumnIndex(column);
-        const _columnIndex = $xetable.getVTColumnIndex(column);
-        const params = { $table: $xetable, $grid: $xetable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter };
+        const columnIndex = $xeTable.getColumnIndex(column);
+        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const params = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter };
+        const thAttrs = {
+            colid,
+            colspan: column.colSpan > 1 ? column.colSpan : null,
+            rowspan: column.rowSpan > 1 ? column.rowSpan : null
+        };
+        const thOns = {
+            click: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+            dblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+        };
         // 虚拟滚动不支持动态高度
         if (scrollXLoad && !hasEllipsis) {
             showEllipsis = hasEllipsis = true;
         }
-        if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
-            thOns.click = (evnt) => $xetable.triggerHeaderCellClickEvent(evnt, params);
-        }
-        if (tableListeners['header-cell-dblclick']) {
-            thOns.dblclick = (evnt) => $xetable.triggerHeaderCellDblclickEvent(evnt, params);
+        const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell';
+        let isDisabledDrag = false;
+        if (isColDragCell) {
+            isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params));
         }
         // 按下事件处理
-        if (mouseConfig) {
-            thOns.mousedown = (evnt) => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
+        if (mouseConfig || isColDragCell) {
+            thOns.mousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
         }
-        // 拖拽行事件
+        // 拖拽列事件
         if (columnOpts.drag) {
-            thOns.dragstart = $xetable.handleHeaderCellDragDragstartEvent;
-            thOns.dragend = $xetable.handleHeaderCellDragDragendEvent;
-            thOns.dragover = $xetable.handleHeaderCellDragDragoverEvent;
+            thOns.dragstart = $xeTable.handleHeaderCellDragDragstartEvent;
+            thOns.dragend = $xeTable.handleHeaderCellDragDragendEvent;
+            thOns.dragover = $xeTable.handleHeaderCellDragDragoverEvent;
+            if (isColDragCell) {
+                thOns.mouseup = $xeTable.handleHeaderCellDragMouseupEvent;
+            }
         }
         return h('th', {
             class: ['vxe-header--column', colid, {
@@ -59,13 +73,10 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                     'is--sortable': column.sortable,
                     'col--filter': !!column.filters,
                     'is--filter-active': hasFilter,
+                    'is--drag-disabled': isDisabledDrag,
                     'col--current': currentColumn === column
                 }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
-            attrs: {
-                colid,
-                colspan: column.colSpan > 1 ? column.colSpan : null,
-                rowspan: column.rowSpan > 1 ? column.rowSpan : null
-            },
+            attrs: thAttrs,
             style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
             on: thOns,
             key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex

package/es/table/src/methods.js

@@ -5137,6 +5137,77 @@ const Methods = {
             $xeTable.handleColumnSortEvent(evnt, column);
         }
     },
+    /**
+     * 表头单元格按下事件
+     */
+    triggerHeaderCellMousedownEvent(evnt, params) {
+        const $xeTable = this;
+        const props = $xeTable;
+        const { mouseConfig } = props;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const columnOpts = $xeTable.computeColumnOpts;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { trigger, disabledMethod } = columnDragOpts;
+        const cell = evnt.currentTarget;
+        const triggerInput = cell && cell.tagName && cell.tagName.toLowerCase() === 'input';
+        const triggerCheckbox = getEventTargetNode(evnt, cell, 'vxe-cell--checkbox').flag;
+        const triggerSort = getEventTargetNode(evnt, cell, 'vxe-cell--sort').flag;
+        const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag;
+        let triggerDrag = false;
+        if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
+            if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
+                triggerDrag = true;
+                $xeTable.handleHeaderCellDragMousedownEvent(evnt, params);
+            }
+        }
+        if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaEvent) {
+            $xeTable.handleHeaderCellAreaEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params));
+        }
+        $xeTable.focus();
+        if ($xeTable.closeMenu) {
+            $xeTable.closeMenu();
+        }
+    },
+    /**
+     * 单元格按下事件
+     */
+    triggerCellMousedownEvent(evnt, params) {
+        const $xeTable = this;
+        const { column } = params;
+        const { type, treeNode } = column;
+        const isRadioType = type === 'radio';
+        const isCheckboxType = type === 'checkbox';
+        const isExpandType = type === 'expand';
+        const rowOpts = $xeTable.computeRowOpts;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { trigger, disabledMethod } = rowDragOpts;
+        const cell = evnt.currentTarget;
+        params.cell = cell;
+        const triggerInput = cell && cell.tagName && cell.tagName.toLowerCase() === 'input';
+        const triggerRadio = isRadioType && getEventTargetNode(evnt, cell, 'vxe-cell--radio').flag;
+        const triggerCheckbox = isCheckboxType && getEventTargetNode(evnt, cell, 'vxe-cell--checkbox').flag;
+        const triggerTreeNode = treeNode && getEventTargetNode(evnt, cell, 'vxe-tree--btn-wrapper').flag;
+        const triggerExpandNode = isExpandType && getEventTargetNode(evnt, cell, 'vxe-table--expanded').flag;
+        let isColDragCell = false;
+        if (rowOpts.drag) {
+            isColDragCell = trigger === 'row' || (column.dragSort && trigger === 'cell');
+        }
+        let triggerDrag = false;
+        if (!(triggerInput || triggerRadio || triggerCheckbox || triggerTreeNode || triggerExpandNode)) {
+            if (isColDragCell && !(disabledMethod && disabledMethod(params))) {
+                triggerDrag = true;
+                $xeTable.handleCellDragMousedownEvent(evnt, params);
+            }
+        }
+        if (!triggerDrag && $xeTable.handleCellMousedownEvent) {
+            $xeTable.handleCellMousedownEvent(evnt, params);
+        }
+        $xeTable.focus();
+        $xeTable.closeFilter();
+        if ($xeTable.closeMenu) {
+            $xeTable.closeMenu();
+        }
+    },
     /**
      * 行拖拽
      */
@@ -5362,12 +5433,13 @@ const Methods = {
         const $xeTable = this;
         const props = $xeTable;
         const reactData = $xeTable;
+        evnt.stopPropagation();
         const { dragConfig } = props;
         const rowDragOpts = $xeTable.computeRowDragOpts;
-        const { dragStartMethod } = rowDragOpts;
+        const { trigger, dragStartMethod } = rowDragOpts;
         const { row } = params;
         const dragEl = evnt.currentTarget;
-        const tdEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
         const trEl = tdEl.parentElement;
         const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
         reactData.isDragRowMove = false;
@@ -5604,11 +5676,12 @@ const Methods = {
         var _a;
         const $xeTable = this;
         const reactData = $xeTable;
+        evnt.stopPropagation();
         const columnDragOpts = $xeTable.computeColumnDragOpts;
-        const { dragStartMethod } = columnDragOpts;
+        const { trigger, dragStartMethod } = columnDragOpts;
         const { column } = params;
         const dragEl = evnt.currentTarget;
-        const thEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const thEl = trigger === 'cell' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
         reactData.isDragColMove = false;
         clearColDropOrigin($xeTable);
         if (dragStartMethod && !dragStartMethod(params)) {

package/es/table/src/table.js

@@ -1038,7 +1038,7 @@ export default {
             if (this.editRules && !this._validate) {
                 errLog('vxe.error.reqModule', ['Validator']);
             }
-            if ((this.checkboxOpts.range || this.keyboardConfig || this.mouseConfig) && !this.triggerCellMousedownEvent) {
+            if ((this.checkboxOpts.range || this.keyboardConfig || this.mouseConfig) && !this.handleCellMousedownEvent) {
                 errLog('vxe.error.reqModule', ['Keyboard']);
             }
             if ((this.printConfig || this.importConfig || this.exportConfig) && !this._exportData) {
@@ -1168,6 +1168,7 @@ export default {
         const virtualScrollBars = $xeTable.computeVirtualScrollBars;
         const isArea = mouseConfig && mouseOpts.area;
         const tableStyle = $xeTable.computeTableStyle;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
         return h('div', {
             ref: 'refElem',
             class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
@@ -1183,6 +1184,7 @@ export default {
                     'column--highlight': columnOpts.isHover || highlightHoverColumn,
                     'checkbox--range': checkboxOpts.range,
                     'column--calc': isCalcColumn,
+                    'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
                     'is--header': showHeader,
                     'is--footer': showFooter,
                     'is--group': isGroup,

package/es/table/style.css

@@ -2231,6 +2231,24 @@
 .vxe-table--render-default.drag--extend-range .vxe-table--fixed-right-wrapper * {
   cursor: crosshair;
 }
+.vxe-table--render-default.col--drag-cell .vxe-header--column {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--render-default.col--drag-cell .vxe-header--column:not(.is--drag-disabled) {
+  cursor: grab;
+}
+.vxe-table--render-default.col--drag-cell .vxe-header--column:not(.is--drag-disabled):active {
+  cursor: grabbing;
+}
+.vxe-table--render-default.col--drag-cell .vxe-header--column:not(.is--drag-disabled):hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-table--render-default.col--drag-cell .vxe-header--column.is--drag-disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
 .vxe-table--render-default.column--highlight .vxe-header--column:not(.col--seq):hover {
   background-color: var(--vxe-ui-table-column-hover-background-color);
 }
@@ -2811,6 +2829,24 @@
 .vxe-table--render-default .vxe-body--row.row--drag-origin > .vxe-body--column > .vxe-cell {
   opacity: 0.5;
 }
+.vxe-table--render-default .vxe-body--column.is--drag-cell {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--render-default .vxe-body--column.is--drag-cell:not(.is--drag-disabled) {
+  cursor: grab;
+}
+.vxe-table--render-default .vxe-body--column.is--drag-cell:not(.is--drag-disabled):active {
+  cursor: grabbing;
+}
+.vxe-table--render-default .vxe-body--column.is--drag-cell:not(.is--drag-disabled):hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-table--render-default .vxe-body--column.is--drag-cell.is--drag-disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
 .vxe-table--render-default .vxe-body--row-list-move {
   transition-property: transform;
   transition-duration: 0.35s;