vxe-table 3.11.31 → 3.11.33

package/es/table/src/body.js

@@ -50,6 +50,8 @@ function renderLine(h, _vm, $xetable, params) {
  */
 function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
     const { $listeners: tableListeners, fullAllDataRowIdData, afterFullData, tableData, height, columnKey, overflowX, sYOpts, scrollXLoad, scrollYLoad, highlightCurrentRow, showOverflow: allColumnOverflow, isAllOverflow, align: allAlign, currentColumn, cellClassName: allCellClassName, cellStyle, mergeList, spanMethod, radioOpts, checkboxOpts, expandOpts, treeOpts, tooltipOpts, mouseConfig, editConfig, editOpts, editRules, validOpts, editStore, tooltipConfig, rowOpts, columnOpts, mouseOpts, areaOpts, validErrorMaps } = $xetable;
+    const rowDragOpts = $xetable.computeRowDragOpts;
+    const { disabledMethod: dragDisabledMethod } = rowDragOpts;
     const { selectCellToRow } = areaOpts;
     const cellOpts = $xetable.computeCellOpts;
     const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column;
@@ -83,6 +85,14 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     const bindMouseleave = tableListeners['cell-mouseleave'];
     const triggerDblclick = (editRender && editConfig && editOpts.trigger === 'dblclick');
     const params = { $table: $xetable, $grid: $xetable.$xegrid, isEdit: false, seq, rowid, row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items };
+    let isColDragCell = false;
+    let isDisabledDrag = false;
+    if (rowOpts.drag) {
+        isColDragCell = rowDragOpts.trigger === 'row' || (column.dragSort && rowDragOpts.trigger === 'cell');
+    }
+    if (isColDragCell) {
+        isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params));
+    }
     // hover 进入事件
     if (showTitle || showTooltip || showAllTip || bindMouseenter || tooltipConfig) {
         tdOns.mouseenter = (evnt) => {
@@ -116,7 +126,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
         };
     }
     // 按下事件处理
-    if (checkboxOpts.range || mouseConfig) {
+    if (isColDragCell || checkboxOpts.range || mouseConfig) {
         tdOns.mousedown = (evnt) => {
             $xetable.triggerCellMousedownEvent(evnt, params);
         };
@@ -262,6 +272,8 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
                 'col--edit': isEdit,
                 'col--ellipsis': hasEllipsis,
                 'fixed--hidden': fixedHiddenColumn,
+                'is--drag-cell': isColDragCell,
+                'is--drag-disabled': isDisabledDrag,
                 'col--dirty': isDirty,
                 'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
                 'col--valid-error': !!errorValidItem,
@@ -280,7 +292,9 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     }, tdVNs);
 }
 function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
-    const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, showOverflow: allColumnOverflow, treeConfig, treeOpts, expandOpts, editOpts, treeExpandedMaps, scrollYLoad, rowExpandedMaps, radioOpts, checkboxOpts, expandColumn, hasFixedColumn, fullAllDataRowIdData, rowOpts, pendingRowMaps, columnOpts, isDragColMove } = $xeTable;
+    const columnOpts = $xeTable.computeColumnOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, showOverflow: allColumnOverflow, treeConfig, treeOpts, expandOpts, editOpts, treeExpandedMaps, scrollYLoad, rowExpandedMaps, radioOpts, checkboxOpts, expandColumn, hasFixedColumn, fullAllDataRowIdData, rowOpts, pendingRowMaps, isDragColMove } = $xeTable;
     const { transform, seqMode } = treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
     const rows = [];
@@ -364,7 +378,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         const tdVNs = tableColumn.map((column, $columnIndex) => {
             return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
         });
-        rows.push(columnOpts.drag
+        rows.push(columnOpts.drag && columnDragOpts.animation
             ? h('transition-group', {
                 props: {
                     tag: 'tr',
@@ -484,7 +498,9 @@ export default {
     render(h) {
         const $xeTable = this.$parent;
         const { _e, $parent: $xetable, fixedColumn, fixedType } = this;
-        let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, rowOpts, isDragRowMove } = $xetable;
+        const rowOpts = $xeTable.computeRowOpts;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, isDragRowMove } = $xetable;
         // 如果是使用优化模式
         if (fixedType) {
             // 如果存在展开行使用全量渲染
@@ -572,7 +588,7 @@ export default {
                 /**
                  * 内容
                  */
-                rowOpts.drag
+                rowOpts.drag && rowDragOpts.animation
                     ? h('transition-group', {
                         props: {
                             tag: 'tbody',

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/footer.js

@@ -146,13 +146,15 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         : []);
 }
 function renderHeads(h, _vm, footerTableData) {
+    const $xeTable = _vm.$parent;
+    const columnOpts = $xeTable.computeColumnOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { $parent: $xetable, fixedType, tableColumn } = _vm;
     const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable;
-    const columnOpts = $xetable.columnOpts;
     return footerTableData.map((row, $rowIndex) => {
         const _rowIndex = $rowIndex;
         const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
-        if (columnOpts.drag) {
+        if (columnOpts.drag && columnDragOpts.animation) {
             return h('transition-group', {
                 props: {
                     tag: 'tr',

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
@@ -101,15 +112,16 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
         : []);
 };
 function renderHeads(h, _vm, headerGroups) {
-    const { $parent: $xetable } = _vm;
-    const tableProps = $xetable;
+    const $xeTable = _vm.$parent;
+    const tableProps = $xeTable;
     const { fixedType } = _vm;
+    const columnOpts = $xeTable.computeColumnOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { headerRowClassName, headerRowStyle } = tableProps;
-    const { isDragColMove } = $xetable;
-    const columnOpts = $xetable.columnOpts;
+    const { isDragColMove } = $xeTable;
     return headerGroups.map((cols, $rowIndex) => {
-        const params = { $table: $xetable, $rowIndex, fixed: fixedType, type: cellType };
-        if (columnOpts.drag) {
+        const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType };
+        if (columnOpts.drag && columnDragOpts.animation) {
             return h('transition-group', {
                 props: {
                     tag: 'tr',

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;