vxe-table 3.11.31 → 3.11.33

package/packages/table/src/cell.ts

@@ -53,22 +53,24 @@ function renderCellDragIcon (h: CreateElement, params: any) {
   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: Record<string, any> = {}
+  if (trigger !== 'cell') {
+    ons.mousedown = (evnt: MouseEvent) => {
+      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: DragEvent) {
-        if (!isDisabled) {
-          $table.handleCellDragMousedownEvent(evnt, params)
-        }
-      },
-      mouseup: $table.handleCellDragMouseupEvent
-    }
+    on: ons
   }, [
     h('i', {
       class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
@@ -106,23 +108,25 @@ function renderHeaderCellDragIcon (h: CreateElement, params: VxeTableDefines.Cel
   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: Record<string, any> = {}
+      if (trigger !== 'cell') {
+        ons.mousedown = (evnt: MouseEvent) => {
+          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: MouseEvent) {
-            if (!isDisabled) {
-              $table.handleHeaderCellDragMousedownEvent(evnt, params)
-            }
-          },
-          mouseup: $table.handleHeaderCellDragMouseupEvent
-        }
+        on: ons
       }, [
         h('i', {
           class: icon || getIcon().TABLE_DRAG_COLUMN

package/packages/table/src/footer.ts

@@ -153,15 +153,19 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
 }
 
 function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) {
+  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: any, $rowIndex: any) => {
     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/packages/table/src/header.ts

@@ -12,9 +12,14 @@ const { renderer } = VxeUI
 const cellType = 'header'
 
 const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
-  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: any, $columnIndex: any) => {
     const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column
     // const { enabled } = tooltipOpts
@@ -29,30 +34,40 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
     const showTitle = headOverflow === 'title'
     const showTooltip = headOverflow === true || headOverflow === 'tooltip'
     let hasEllipsis = showTitle || showTooltip || showEllipsis
-    const thOns: any = {}
     const hasFilter = column.filters && column.filters.some((item: any) => 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: Record<string, string | number | null> = {
+      colid,
+      colspan: column.colSpan > 1 ? column.colSpan : null,
+      rowspan: column.rowSpan > 1 ? column.rowSpan : null
+    }
+    const thOns: any = {
+      click: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+      dblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+    }
     // 虚拟滚动不支持动态高度
     if (scrollXLoad && !hasEllipsis) {
       showEllipsis = hasEllipsis = true
     }
-    if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
-      thOns.click = (evnt: any) => $xetable.triggerHeaderCellClickEvent(evnt, params)
-    }
-    if (tableListeners['header-cell-dblclick']) {
-      thOns.dblclick = (evnt: any) => $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: any) => $xetable.triggerHeaderCellMousedownEvent(evnt, params)
+    if (mouseConfig || isColDragCell) {
+      thOns.mousedown = (evnt: any) => $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, {
@@ -66,13 +81,10 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
         '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
@@ -109,18 +121,21 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
 }
 
 function renderHeads (h: CreateElement, _vm: any, headerGroups: any[]) {
-  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: any, $rowIndex: any) => {
-    const params = { $table: $xetable, $rowIndex, fixed: fixedType, type: cellType }
+    const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType }
 
-    if (columnOpts.drag) {
+    if (columnOpts.drag && columnDragOpts.animation) {
       return h('transition-group', {
         props: {
           tag: 'tr',

package/packages/table/src/methods.ts

@@ -5156,6 +5156,79 @@ const Methods = {
       $xeTable.handleColumnSortEvent(evnt, column)
     }
   },
+  /**
+   * 表头单元格按下事件
+   */
+  triggerHeaderCellMousedownEvent (evnt: any, params: any) {
+    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: any, params: any) {
+    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()
+    }
+  },
   /**
    * 行拖拽
    */
@@ -5395,12 +5468,13 @@ const Methods = {
     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 as HTMLElement
-    const tdEl = dragEl.parentElement?.parentElement as HTMLElement
+    const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : dragEl.parentElement?.parentElement as HTMLElement
     const trEl = tdEl.parentElement as HTMLElement
     const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null)
     reactData.isDragRowMove = false
@@ -5652,11 +5726,12 @@ const Methods = {
     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 as HTMLElement
-    const thEl = dragEl.parentElement?.parentElement as HTMLElement
+    const thEl = trigger === 'cell' ? dragEl : dragEl.parentElement?.parentElement as HTMLElement
     reactData.isDragColMove = false
     clearColDropOrigin($xeTable)
     if (dragStartMethod && !dragStartMethod(params)) {

package/packages/table/src/table.ts

@@ -1072,7 +1072,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) {
@@ -1253,6 +1253,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}`, {
@@ -1268,6 +1269,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/packages/ui/index.ts

@@ -48,10 +48,12 @@ VxeUI.setConfig({
       strict: true
     },
     rowDragConfig: {
-      showIcon: true
+      showIcon: true,
+      animation: true
     },
     columnDragConfig: {
-      showIcon: true
+      showIcon: true,
+      animation: true
     },
     checkboxConfig: {
       // trigger: 'default',

package/styles/components/table.scss

@@ -677,6 +677,24 @@
       }
     }
   }
+  &.col--drag-cell {
+    .vxe-header--column {
+      user-select: none;
+      &:not(.is--drag-disabled) {
+        cursor: grab;
+        &:active {
+          cursor: grabbing;
+        }
+        &:hover {
+          color: var(--vxe-ui-font-primary-color);
+        }
+      }
+      &.is--drag-disabled {
+        color: var(--vxe-ui-input-disabled-color);
+        cursor: not-allowed;
+      }
+    }
+  }
   &.column--highlight {
     .vxe-header--column {
       &:not(.col--seq) {
@@ -1368,6 +1386,24 @@
       }
     }
   }
+  .vxe-body--column {
+    &.is--drag-cell {
+      user-select: none;
+      &:not(.is--drag-disabled) {
+        cursor: grab;
+        &:active {
+          cursor: grabbing;
+        }
+        &:hover {
+          color: var(--vxe-ui-font-primary-color);
+        }
+      }
+      &.is--drag-disabled {
+        color: var(--vxe-ui-input-disabled-color);
+        cursor: not-allowed;
+      }
+    }
+  }
   .vxe-body--row-list-move {
     transition-property: transform;
     transition-duration: 0.35s;