releases 4.9.28

x-extends · Dec 16, 2024 · e167d8a · e167d8a
1 parent fe64a94
commit e167d8a
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 65 deletions.
diff --git a/examples/views/table/TableTest2.vue b/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}"
@@ -40,8 +41,8 @@
       </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="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="name1" title="Name1" sortable ></vxe-column>
+      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"
         title="Age"
@@ -157,6 +158,14 @@ onMounted(() => {
   }, 100)
 })
 
+const disabledColumnMethod = ({ column }: any) => {
+  return column.field === 'sex11'
+}
+
+const disabledRowMethod = ({ row }: any) => {
+  return row.id === 10002
+}
+
 const rowDragstartEvent = (params: any) => {
   console.log(params)
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.9.27",
+  "version": "4.9.28",
   "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": "^4.3.32"
+    "vxe-pc-ui": "^4.3.33"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/table/module/keyboard/hook.ts b/packages/table/module/keyboard/hook.ts
@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { getRefElem } from '../../src/util'
-import { browse, hasClass, getAbsolutePos, addClass, removeClass, getEventTargetNode } from '../../../ui/src/dom'
+import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom'
 
 import type { TableKeyboardPrivateMethods } from '../../../../types'
 
@@ -373,36 +373,7 @@ hooks.add('tableKeyboardModule', {
           $xeTable.handleSelected(params, evnt)
         })
       },
-      /**
-       * 表头单元格按下事件
-       */
-      triggerHeaderCellMousedownEvent (evnt, params) {
-        const { mouseConfig } = props
-        const mouseOpts = computeMouseOpts.value
-        if (mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaEvent) {
-          const cell = evnt.currentTarget
-          const triggerSort = getEventTargetNode(evnt, cell, 'vxe-cell--sort').flag
-          const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag
-          $xeTable.handleHeaderCellAreaEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params))
-        }
-        $xeTable.focus()
-        if ($xeTable.closeMenu) {
-          $xeTable.closeMenu()
-        }
-      },
-      /**
-       * 单元格按下事件
-       */
-      triggerCellMousedownEvent (evnt, params) {
-        const cell = evnt.currentTarget
-        params.cell = cell
-        handleCellMousedownEvent(evnt, params)
-        $xeTable.focus()
-        $xeTable.closeFilter()
-        if ($xeTable.closeMenu) {
-          $xeTable.closeMenu()
-        }
-      }
+      handleCellMousedownEvent
     }
 
     return keyboardMethods

diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts
@@ -36,7 +36,7 @@ export default defineComponent({
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { refTableBody, refTableHeader, refTableFooter, refTableLeftBody, refTableRightBody, refScrollXHandleElem, refScrollYHandleElem } = $xeTable.getRefMaps()
-    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyTable = ref() as Ref<HTMLTableElement>
@@ -140,6 +140,8 @@ export default defineComponent({
       const editOpts = computeEditOpts.value
       const tooltipOpts = computeTooltipOpts.value
       const rowOpts = computeRowOpts.value
+      const rowDragOpts = computeRowDragOpts.value
+      const { disabledMethod: dragDisabledMethod } = rowDragOpts
       const sYOpts = computeSYOpts.value
       const columnOpts = computeColumnOpts.value
       const mouseOpts = computeMouseOpts.value
@@ -195,6 +197,14 @@ export default defineComponent({
         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 || tooltipConfig) {
         tdOns.onMouseenter = (evnt: MouseEvent) => {
@@ -223,7 +233,7 @@ export default defineComponent({
         }
       }
       // 按下事件处理
-      if (checkboxOpts.range || mouseConfig) {
+      if (isColDragCell || checkboxOpts.range || mouseConfig) {
         tdOns.onMousedown = (evnt: MouseEvent) => {
           $xeTable.triggerCellMousedownEvent(evnt, params)
         }
@@ -367,6 +377,8 @@ export default defineComponent({
             '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,

diff --git a/packages/table/src/cell.ts b/packages/table/src/cell.ts
@@ -50,20 +50,24 @@ function renderCellDragIcon (params: VxeTableDefines.CellRenderBodyParams) {
   const { dragConfig } = tableProps
   const { computeRowDragOpts } = $table.getComputeMaps()
   const rowDragOpts = computeRowDragOpts.value
-  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.onMousedown = (evnt: MouseEvent) => {
+      if (!isDisabled) {
+        $table.handleCellDragMousedownEvent(evnt, params)
+      }
+    }
+    ons.onMouseup = $table.handleCellDragMouseupEvent
+  }
   return h('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
       'is--disabled': isDisabled
     }],
-    onMousedown (evnt) {
-      if (!isDisabled) {
-        $table.handleCellDragMousedownEvent(evnt, params)
-      }
-    },
-    onMouseup: $table.handleCellDragMouseupEvent
+    ...ons
   }, [
     h('i', {
       class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
@@ -103,21 +107,25 @@ function renderHeaderCellDragIcon (params: VxeTableDefines.CellRenderHeaderParam
   const { computeColumnOpts, computeColumnDragOpts } = $table.getComputeMaps()
   const columnOpts = computeColumnOpts.value
   const columnDragOpts = computeColumnDragOpts.value
-  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.onMousedown = (evnt: MouseEvent) => {
+          if (!isDisabled) {
+            $table.handleHeaderCellDragMousedownEvent(evnt, params)
+          }
+        }
+        ons.onMouseup = $table.handleHeaderCellDragMouseupEvent
+      }
       return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
           'is--disabled': isDisabled
         }],
-        onMousedown (evnt) {
-          if (!isDisabled) {
-            $table.handleHeaderCellDragMousedownEvent(evnt, params)
-          }
-        },
-        onMouseup: $table.handleHeaderCellDragMouseupEvent
+        ...ons
       }, [
         h('i', {
           class: icon || getIcon().TABLE_DRAG_COLUMN

diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts
@@ -27,7 +27,7 @@ export default defineComponent({
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { refElem: tableRefElem, refTableBody, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps()
-    const { computeColumnOpts, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const headerColumn = ref([] as VxeTableDefines.ColumnInfo[][])
 
@@ -169,6 +169,8 @@ export default defineComponent({
       const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
       const { currentColumn, scrollXLoad, overflowX, scrollbarWidth } = tableReactData
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
+      const { disabledMethod: dragDisabledMethod } = columnDragOpts
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column
         const colid = column.id
@@ -186,6 +188,11 @@ export default defineComponent({
         const columnIndex = $xeTable.getColumnIndex(column)
         const _columnIndex = $xeTable.getVTColumnIndex(column)
         const params: VxeTableDefines.CellRenderHeaderParams = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, 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 = {
           onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
           onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
@@ -194,15 +201,23 @@ export default defineComponent({
         if (scrollXLoad && !hasEllipsis) {
           showEllipsis = hasEllipsis = true
         }
+        const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
+        let isDisabledDrag = false
+        if (isColDragCell) {
+          isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params))
+        }
         // 按下事件处理
-        if (mouseConfig) {
+        if (mouseConfig || isColDragCell) {
           thOns.onMousedown = (evnt: MouseEvent) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params)
         }
-        // 拖拽行事件
+        // 拖拽列事件
         if (columnOpts.drag) {
           thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent
           thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent
           thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent
+          if (isColDragCell) {
+            thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent
+          }
         }
         return h('th', {
           class: ['vxe-header--column', colid, {
@@ -216,15 +231,14 @@ export default defineComponent({
             'is--sortable': column.sortable,
             'col--filter': !!column.filters,
             'is--filter-active': hasFilter,
+            'is--drag-disabled': isDisabledDrag,
             'col--current': currentColumn === column
           },
           headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(params) : headerClassName) : '',
           headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName) : ''
           ],
-          colid,
-          colspan: column.colSpan > 1 ? column.colSpan : null,
-          rowspan: column.rowSpan > 1 ? column.rowSpan : null,
           style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
+          ...thAttrs,
           ...thOns,
           key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
         }, [