vxe-table 3.10.16 → 3.11.1

package/packages/table/src/table.ts

@@ -98,6 +98,53 @@ function renderEmptyBody (h: CreateElement, _vm: any) {
   return emptyContent
 }
 
+const renderDragTipContents = (h: CreateElement, $xeTable: any) => {
+  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: CreateElement, $xeTable: any) => {
+  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: any) {
   const { $el } = _vm
   if ($el && $el.clientWidth && $el.clientHeight) {
@@ -352,9 +399,15 @@ export default {
         isHeader: false,
         isFooter: false
       },
+
+      scrollVMLoading: false,
       isDragRowMove: false,
       dragRow: null,
+      isDragColMove: false,
+      dragCol: null,
       dragTipText: '',
+
+      _isResize: false,
       _isLoading: false
     }
   },
@@ -433,8 +486,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
@@ -857,7 +913,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'])
         }
@@ -869,6 +925,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'])
       }
@@ -1064,7 +1123,6 @@ export default {
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
 
     const $xeTable = this
-    const reactData = $xeTable
 
     const {
       _e,
@@ -1084,6 +1142,7 @@ export default {
       treeConfig,
       mouseConfig,
       mouseOpts,
+      areaOpts,
       computeSize,
       validOpts,
       showFooter,
@@ -1110,22 +1169,22 @@ export default {
       loadingOpts,
       editRules
     } = $xeTable
-    const { dragRow, dragTipText } = reactData
     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,
@@ -1362,16 +1421,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/packages/ui/index.ts

@@ -43,8 +43,11 @@ VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
-    dragConfig: {
-      showRowIcon: true
+    rowDragConfig: {
+      showIcon: true
+    },
+    columnDragConfig: {
+      showIcon: true
     },
     checkboxConfig: {
       // trigger: 'default',
@@ -142,7 +145,8 @@ VxeUI.setConfig({
     },
     areaConfig: {
       autoClear: true,
-      selectCellByHeader: true
+      selectCellByHeader: true,
+      selectCellByBody: true
     },
     clipConfig: {
       isCopy: true,
@@ -241,6 +245,7 @@ VxeUI.setIcon({
   TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
   TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
   TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
+  TABLE_DRAG_COLUMN: iconPrefix + 'drag-handle',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/table.scss

@@ -663,9 +663,13 @@
       }
     }
   }
-  &.cell--area {
-    .vxe-table--body-wrapper,
-    .vxe-body--column {
+  &.header-cell--area {
+    .vxe-table--header-wrapper {
+      user-select: none;
+    }
+  }
+  &.body-cell--area {
+    .vxe-table--body-wrapper {
       user-select: none;
     }
   }
@@ -1077,6 +1081,7 @@
     width: 1px;
     height: 100%;
     z-index: 9;
+    pointer-events: none;
     cursor: col-resize;
     &:before {
       content: "";
@@ -1237,7 +1242,32 @@
     }
   }
 
-  /*拖拽行*/
+  /*拖拽列*/
+  .vxe-table--drag-col-line {
+    height: 100%;
+    width: 1px;
+    background-color: var(--vxe-ui-font-primary-color);
+  }
+  .vxe-header--column {
+    &.col--drag-origin {
+      & > .vxe-cell {
+        opacity: 0.5;
+      }
+    }
+  }
+  .vxe-header--col-list-move {
+    transition: transform 0.35s;
+  }
+
+  .vxe-table--drag-col-line,
+  .vxe-table--drag-row-line {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    pointer-events: none;
+  }
   .vxe-cell--drag-handle {
     user-select: none;
     & + span {
@@ -1257,6 +1287,13 @@
       cursor: not-allowed;
     }
   }
+
+  /*拖拽行*/
+  .vxe-table--drag-row-line {
+    width: 100%;
+    height: 1px;
+    background-color: var(--vxe-ui-font-primary-color);
+  }
   .vxe-body--row {
     &.row--drag-origin {
       & > .vxe-body--column {
@@ -1265,41 +1302,11 @@
         }
       }
     }
-    &.row--drag-active-target {
-      & > .vxe-body--column {
-        &::after {
-          display: none;
-          content: "";
-          position: absolute;
-          left: 0;
-          width: 100%;
-          height: 2px;
-          background-color: var(--vxe-ui-font-primary-color);
-          z-index: 12;
-        }
-      }
-      &[drag-pos="top"] {
-        & > .vxe-body--column {
-          &::after {
-            display: block;
-            top: 0;
-          }
-        }
-      }
-      &[drag-pos="bottom"] {
-        & > .vxe-body--column {
-          &::after {
-            display: block;
-            bottom: 0;
-          }
-        }
-      }
-    }
   }
   .vxe-body--row-list-move {
     transition: transform 0.35s;
   }
-  .vxe-table--row-drag-tip {
+  .vxe-table--drag-sort-tip {
     display: none;
     position: absolute;
     top: 0;