vxe-table 3.10.15 → 3.11.0

package/es/table/src/table.js

@@ -92,6 +92,48 @@ function renderEmptyBody(h, _vm) {
     }
     return emptyContent;
 }
+const renderDragTipContents = (h, $xeTable) => {
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const { dragConfig } = props;
+    const { dragRow, dragCol, dragTipText } = reactData;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
+    const rowDragSlots = rowDragOpts.slots || {};
+    const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null);
+    const columnDragSlots = columnDragOpts.slots || {};
+    const cTipSlot = columnDragSlots.tip;
+    if (dragRow && rTipSlot) {
+        return $xeTable.callSlot(rTipSlot, { row: dragRow }, h);
+    }
+    if (dragCol && cTipSlot) {
+        return $xeTable.callSlot(cTipSlot, { column: dragCol }, h);
+    }
+    return [h('span', dragTipText)];
+};
+const renderDragTip = (h, $xeTable) => {
+    const rowOpts = $xeTable.computeRowOpts;
+    const columnOpts = $xeTable.computeColumnOpts;
+    if (rowOpts.drag || columnOpts.drag) {
+        return h('div', {
+            class: 'vxe-table--drag-wrapper'
+        }, [
+            h('div', {
+                ref: 'refDragRowLineElem',
+                class: 'vxe-table--drag-row-line'
+            }),
+            h('div', {
+                ref: 'refDragColLineElem',
+                class: 'vxe-table--drag-col-line'
+            }),
+            h('div', {
+                ref: 'refDragTipElem',
+                class: 'vxe-table--drag-sort-tip'
+            }, renderDragTipContents(h, $xeTable))
+        ]);
+    }
+    return renderEmptyElement($xeTable);
+};
 function handleUupdateResize(_vm) {
     const { $el } = _vm;
     if ($el && $el.clientWidth && $el.clientHeight) {
@@ -345,9 +387,13 @@ export default {
                 isHeader: false,
                 isFooter: false
             },
+            scrollVMLoading: false,
             isDragRowMove: false,
             dragRow: null,
+            isDragColMove: false,
+            dragCol: null,
             dragTipText: '',
+            _isResize: false,
             _isLoading: false
         };
     },
@@ -420,8 +466,11 @@ export default {
         computeRowOpts() {
             return Object.assign({}, getConfig().table.rowConfig, this.rowConfig);
         },
-        computeDragOpts() {
-            return Object.assign({}, getConfig().table.dragConfig, this.dragConfig);
+        computeRowDragOpts() {
+            return Object.assign({}, getConfig().table.rowDragConfig, this.rowDragConfig);
+        },
+        computeColumnDragOpts() {
+            return Object.assign({}, getConfig().table.columnDragConfig, this.columnDragConfig);
         },
         resizeOpts() {
             return this.computeResizeOpts;
@@ -839,7 +888,7 @@ export default {
             if (this.rowOpts.height && !this.showOverflow) {
                 warnLog('vxe.error.notProp', ['table.show-overflow']);
             }
-            if (!this.handleUpdateCellAreas) {
+            if (!this.handleRecalculateCellAreas) {
                 if (this.clipConfig) {
                     warnLog('vxe.error.notProp', ['clip-config']);
                 }
@@ -851,6 +900,9 @@ export default {
                     return;
                 }
             }
+            if (this.dragConfig) {
+                warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);
+            }
             if (this.treeConfig && treeOpts.children) {
                 warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
             }
@@ -1039,24 +1091,23 @@ export default {
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const $xeTable = this;
-        const reactData = $xeTable;
-        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = $xeTable;
-        const { dragRow, dragTipText } = reactData;
+        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, areaOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = $xeTable;
         const { leftList, rightList } = columnStore;
         const currLoading = this._isLoading || loading;
         const vSize = computeSize;
-        const dragOpts = $xeTable.computeDragOpts;
         const virtualScrollBars = $xeTable.computeVirtualScrollBars;
-        const dragSlots = dragOpts.slots || {};
-        const rowTipSlot = dragSlots.rowTip;
+        const isArea = mouseConfig && mouseOpts.area;
         return h('div', {
+            ref: 'refElem',
             class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                     'vxe-editable': !!editConfig,
                     'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete',
                     'cell--highlight': highlightCell,
                     'cell--selected': mouseConfig && mouseOpts.selected,
-                    'cell--area': mouseConfig && mouseOpts.area,
+                    'cell--area': isArea,
+                    'header-cell--area': isArea && areaOpts.selectCellByHeader,
+                    'body-cell--area': isArea && areaOpts.selectCellByBody,
                     'row--highlight': rowOpts.isHover || highlightHoverRow,
                     'column--highlight': columnOpts.isHover || highlightHoverColumn,
                     'checkbox--range': checkboxOpts.range,
@@ -1293,16 +1344,9 @@ export default {
                 })
                 : _e(),
             /**
-               * 拖拽提示
-               */
-            rowOpts.drag && (dragRow || dragTipText)
-                ? h('div', {
-                    ref: 'refRowDragTipElem',
-                    class: 'vxe-table--row-drag-tip'
-                }, rowTipSlot
-                    ? (dragRow ? this.callSlot(rowTipSlot, { row: dragRow }, h) : [renderEmptyElement($xeTable)])
-                    : (dragTipText ? [h('span', dragTipText)] : [renderEmptyElement($xeTable)]))
-                : _e(),
+             * 拖拽提示
+             */
+            renderDragTip(h, this),
             h('div', {}, [
                 /**
                  * 提示相关

package/es/table/style.css

@@ -2046,6 +2046,7 @@
   /*树形节点*/
   /*展开行*/
   /*设置列高度*/
+  /*拖拽列*/
   /*拖拽行*/
   /*溢出列*/
   /*暂无数据*/
@@ -2126,8 +2127,12 @@
 .vxe-table--render-default.column--highlight .vxe-header--column:not(.col--seq):hover {
   background-color: var(--vxe-ui-table-column-hover-background-color);
 }
-.vxe-table--render-default.cell--area .vxe-table--body-wrapper,
-.vxe-table--render-default.cell--area .vxe-body--column {
+.vxe-table--render-default.header-cell--area .vxe-table--header-wrapper {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--render-default.body-cell--area .vxe-table--body-wrapper {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -2501,6 +2506,7 @@
   width: 1px;
   height: 100%;
   z-index: 9;
+  pointer-events: none;
   cursor: col-resize;
 }
 .vxe-table--render-default .vxe-table--resizable-bar:before {
@@ -2607,6 +2613,26 @@
   overflow: auto;
   outline: 0;
 }
+.vxe-table--render-default .vxe-table--drag-col-line {
+  height: 100%;
+  width: 1px;
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-table--render-default .vxe-header--column.col--drag-origin > .vxe-cell {
+  opacity: 0.5;
+}
+.vxe-table--render-default .vxe-header--col-list-move {
+  transition: transform 0.35s;
+}
+.vxe-table--render-default .vxe-table--drag-col-line,
+.vxe-table--render-default .vxe-table--drag-row-line {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  pointer-events: none;
+}
 .vxe-table--render-default .vxe-cell--drag-handle {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2628,31 +2654,18 @@
   color: var(--vxe-ui-input-disabled-color);
   cursor: not-allowed;
 }
-.vxe-table--render-default .vxe-body--row.row--drag-origin > .vxe-body--column > .vxe-cell {
-  opacity: 0.5;
-}
-.vxe-table--render-default .vxe-body--row.row--drag-active-target > .vxe-body--column::after {
-  display: none;
-  content: "";
-  position: absolute;
-  left: 0;
+.vxe-table--render-default .vxe-table--drag-row-line {
   width: 100%;
-  height: 2px;
+  height: 1px;
   background-color: var(--vxe-ui-font-primary-color);
-  z-index: 12;
-}
-.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=top] > .vxe-body--column::after {
-  display: block;
-  top: 0;
 }
-.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=bottom] > .vxe-body--column::after {
-  display: block;
-  bottom: 0;
+.vxe-table--render-default .vxe-body--row.row--drag-origin > .vxe-body--column > .vxe-cell {
+  opacity: 0.5;
 }
 .vxe-table--render-default .vxe-body--row-list-move {
   transition: transform 0.35s;
 }
-.vxe-table--render-default .vxe-table--row-drag-tip {
+.vxe-table--render-default .vxe-table--drag-sort-tip {
   display: none;
   position: absolute;
   top: 0;