releases 3.11.32

examples/views/table/TableTest2.vue

@@ -13,8 +13,9 @@
       ref="tableRef"
       id="bbbbb"
       :row-config="{useKey: true,drag:true}"
+      :row-drag-config="{trigger:'row',disabledMethod:disabledRowMethod}"
       :column-config="{useKey: true,drag: true}"
-      :column-drag-config="{isCrossDrag:true,isToChildDrag:true,isSelfToChildDrag:true}"
+      :column-drag-config="{isCrossDrag:true,isToChildDrag:true,isSelfToChildDrag:true,trigger:'default',disabledMethod:disabledColumnMethod}"
       :custom-config="customConfig"
       :loading="demo1.loading"
       :import-config="{modes: importModes}"
@@ -38,10 +39,10 @@
           <vxe-column field="name" title="Name" drag-sort sortable></vxe-column>
         </vxe-colgroup>
       </vxe-colgroup>
-      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html" drag-sort></vxe-column>
-      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" drag-sort :visible="false"></vxe-column>
+      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
+      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
       <vxe-column field="name1" title="Name1" sortable drag-sort ></vxe-column>
-      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex" drag-sort></vxe-column>
+      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"
         title="Age"
@@ -114,6 +115,12 @@ export default Vue.extend({
     }
   },
   methods: {
+    disabledColumnMethod ({ column }: any) {
+      return column.field === 'sex11'
+    },
+    disabledRowMethod ({ row }: any) {
+      return row.id === 10002
+    },
     formatterSex ({ cellValue }: any) {
       const item = this.demo1.sexList.find(item => item.value === cellValue)
       return item ? item.label : ''

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.11.31",
+  "version": "3.11.32",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^3.3.35"
+    "vxe-pc-ui": "^3.3.36"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.25.7",

packages/table/module/keyboard/mixin.ts

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { browse, hasClass, getAbsolutePos, addClass, removeClass, getEventTargetNode } from '../../../ui/src/dom'
+import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom'
 
 function getTargetOffset (target: any, container: any) {
   let offsetTop = 0
@@ -186,31 +186,6 @@ export default {
         this.handleSelected(params, evnt)
       })
     },
-    /**
-     * 表头单元格按下事件
-     */
-    triggerHeaderCellMousedownEvent (evnt: any, params: any) {
-      const { mouseConfig, mouseOpts } = this
-      if (mouseConfig && mouseOpts.area && this.handleHeaderCellAreaEvent) {
-        const cell = evnt.currentTarget
-        const triggerSort = getEventTargetNode(evnt, cell, 'vxe-cell--sort').flag
-        const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag
-        this.handleHeaderCellAreaEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params))
-      }
-      this.focus()
-      this.closeMenu()
-    },
-    /**
-     * 单元格按下事件
-     */
-    triggerCellMousedownEvent (evnt: any, params: any) {
-      const cell = evnt.currentTarget
-      params.cell = cell
-      this.handleCellMousedownEvent(evnt, params)
-      this.focus()
-      this.closeFilter()
-      this.closeMenu()
-    },
     handleCellMousedownEvent (evnt: any, params: any) {
       const { editConfig, editOpts, handleSelected, checkboxConfig, checkboxOpts, mouseConfig, mouseOpts } = this
       if (mouseConfig && mouseOpts.area && this.handleMousedownCellAreaEvent) {

packages/table/src/body.ts

@@ -93,6 +93,8 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
     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
@@ -126,6 +128,14 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
   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: any) => {
@@ -158,7 +168,7 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
     }
   }
   // 按下事件处理
-  if (checkboxOpts.range || mouseConfig) {
+  if (isColDragCell || checkboxOpts.range || mouseConfig) {
     tdOns.mousedown = (evnt: any) => {
       $xetable.triggerCellMousedownEvent(evnt, params)
     }
@@ -314,6 +324,8 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
         '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,

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

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