vxe-table 3.12.10-beta.8 → 3.12.10

package/packages/table/src/column.ts

@@ -1,7 +1,10 @@
+import { PropType } from 'vue'
 import Cell from './cell'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { assembleColumn, destroyColumn } from './util'
 
+import type { VxeColumnPropTypes } from '../../../types'
+
 export const columnProps = {
   // 列唯一主键
   colId: [String, Number],
@@ -18,7 +21,10 @@ export const columnProps = {
   // 列最大宽度
   maxWidth: [Number, String],
   // 是否允许拖动列宽调整大小
-  resizable: { type: Boolean, default: null },
+  resizable: {
+    type: Boolean,
+    default: null
+  },
   // 将列固定在左侧或者右侧
   fixed: String,
   // 列对其方式
@@ -28,11 +34,20 @@ export const columnProps = {
   // 表尾列的对齐方式
   footerAlign: String,
   // 当内容过长时显示为省略号
-  showOverflow: { type: [Boolean, String], default: null },
+  showOverflow: {
+    type: [Boolean, String],
+    default: null
+  },
   // 当表头内容过长时显示为省略号
-  showHeaderOverflow: { type: [Boolean, String], default: null },
+  showHeaderOverflow: {
+    type: [Boolean, String],
+    default: null
+  },
   // 当表尾内容过长时显示为省略号
-  showFooterOverflow: { type: [Boolean, String], default: null },
+  showFooterOverflow: {
+    type: [Boolean, String],
+    default: null
+  },
   // 给单元格附加 className
   className: [String, Function],
   // 给表头单元格附加 className
@@ -43,10 +58,23 @@ export const columnProps = {
   formatter: [Function, Array, String],
   // 格式化表尾显示内容
   footerFormatter: [Function, Array, String],
+  // 是否显示间距
+  padding: {
+    type: Boolean as PropType<VxeColumnPropTypes.Padding>,
+    default: null
+  },
+  // 垂直对齐方式
+  verticalAlign: {
+    type: String as PropType<VxeColumnPropTypes.VerticalAlign>,
+    default: null
+  },
   // 是否允许排序
   sortable: Boolean,
   // 在 v3 中废弃
-  remoteSort: { type: Boolean, default: null },
+  remoteSort: {
+    type: Boolean,
+    default: null
+  },
   // 在 v3 中只支持字符串类型
   sortBy: [String, Function],
   // 排序的字段类型，比如字符串转数值等
@@ -54,9 +82,15 @@ export const columnProps = {
   // 在 v3 中废弃
   sortMethod: Function,
   // 配置筛选条件数组
-  filters: { type: Array, default: null },
+  filters: {
+    type: Array,
+    default: null
+  },
   // 筛选是否允许多选
-  filterMultiple: { type: Boolean, default: true },
+  filterMultiple: {
+    type: Boolean,
+    default: true
+  },
   // 自定义筛选方法
   filterMethod: Function,
   // 筛选重置方法
@@ -66,11 +100,15 @@ export const columnProps = {
   // 筛选模板配置项
   filterRender: Object,
   // 设置为树节点
-  treeNode: Boolean,
+  treeNode: Boolean as PropType<VxeColumnPropTypes.TreeNode>,
   // 设置为拖拽排序
-  dragSort: Boolean,
+  dragSort: Boolean as PropType<VxeColumnPropTypes.DragSort>,
+  // 设置为行高拖拽
+  rowResize: Boolean as PropType<VxeColumnPropTypes.RowResize>,
   // 是否可视
-  visible: { type: Boolean, default: null },
+  visible: {
+    type: Boolean, default: null
+  },
   // 表头单元格数据导出方法
   headerExportMethod: Function,
   // 单元格数据导出方法

package/packages/table/src/columnInfo.ts

@@ -78,6 +78,8 @@ export class ColumnInfo {
       footerClassName: _vm.footerClassName,
       formatter,
       footerFormatter: _vm.footerFormatter,
+      padding: _vm.padding,
+      verticalAlign: _vm.verticalAlign,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
@@ -91,6 +93,7 @@ export class ColumnInfo {
       filterRender: _vm.filterRender,
       treeNode: _vm.treeNode,
       dragSort: _vm.dragSort,
+      rowResize: _vm.rowResize,
       cellType: _vm.cellType,
       cellRender: _vm.cellRender,
       editRender: _vm.editRender,

package/packages/table/src/footer.ts

@@ -3,6 +3,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getClass } from '../../ui/src/utils'
 import { updateCellTitle } from '../../ui/src/dom'
+import { getCellHeight } from './util'
 
 import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, TableReactData, TableInternalData, VxeComponentStyleType } from '../../../types'
 
@@ -32,31 +33,41 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   const { fixedType } = props
-  const { footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
+  const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
   const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFooterList } = tableReactData
   const { scrollXStore } = tableInternalData
   const tooltipOpts = $xeTable.computeTooltipOpts
+  const { isAllColumnDrag } = $xeTable.resizableOpts
   const columnOpts = $xeTable.computeColumnOpts
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight
+  const cellOpts = $xeTable.computeCellOpts
+  const footerCellOpts = $xeTable.computeFooterCellOpts
+  const currCellHeight = getCellHeight(footerCellOpts.height || cellOpts.height) || defaultRowHeight
 
   return tableColumn.map((column: any, $columnIndex: any) => {
     const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
+    const colid = column.id
     const renderOpts = editRender || cellRender
     const compConf = renderOpts ? renderer.get(renderOpts.name) : null
     const showAllTip = tooltipOpts.showAll
     const isColGroup = column.children && column.children.length
     const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
+    const isPadding = XEUtils.isBoolean(footerCellOpts.padding) ? footerCellOpts.padding : cellOpts.padding
     const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
     const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
     let showEllipsis = footOverflow === 'ellipsis'
     const showTitle = footOverflow === 'title'
     const showTooltip = footOverflow === true || footOverflow === 'tooltip'
     let hasEllipsis = showTitle || showTooltip || showEllipsis
-    const attrs: any = { colid: column.id }
+    const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+    const attrs: any = { colid }
     const tfOns: any = {}
     const columnIndex = $xeTable.getColumnIndex(column)
     const _columnIndex = $xeTable.getVTColumnIndex(column)
     const itemIndex = _columnIndex
-    const cellParams: VxeTableDefines.CellRenderFooterParams = {
+    const cellParams: VxeTableDefines.CellRenderFooterParams & {
+      $table: VxeTableConstructor<any> & VxeTablePrivateMethods
+    } = {
       $table: $xeTable,
       $grid: $xeTable.xegrid,
       row,
@@ -130,9 +141,16 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     const isLastColumn = $columnIndex === tableColumn.length - 1
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-    let isPreLoadStatus = false
-    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-      isPreLoadStatus = true
+    let isVNPreEmptyStatus = false
+    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      isVNPreEmptyStatus = true
+    }
+
+    const tcStyle: Record<string, string> = {}
+    if (hasEllipsis) {
+      tcStyle.height = `${currCellHeight}px`
+    } else {
+      tcStyle.minHeight = `${currCellHeight}px`
     }
 
     return h('td', {
@@ -142,6 +160,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
         'col--last': isLastColumn,
         'fixed--width': !isAutoCellWidth,
         'fixed--hidden': fixedHiddenColumn,
+        'is--padding': isPadding,
         'col--ellipsis': hasEllipsis,
         'col--current': currentColumn === column
       }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
@@ -155,8 +174,32 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
           'c--title': showTitle,
           'c--tooltip': showTooltip,
           'c--ellipsis': showEllipsis
-        }]
-      }, isPreLoadStatus ? [] : column.renderFooter(h, cellParams))
+        }],
+        style: tcStyle
+      }, isVNPreEmptyStatus
+        ? []
+        : [
+            h('div', {
+              attrs: {
+                colid
+              },
+              class: 'vxe-cell--wrapper'
+            }, column.renderFooter(h, cellParams))
+          ]),
+      /**
+       * 列宽拖动
+       */
+      !fixedHiddenColumn && showResizable && isAllColumnDrag
+        ? h('div', {
+          class: ['vxe-cell--col-resizable', {
+            'is--line': !border || border === 'none'
+          }],
+          on: {
+            mousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+            dblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+          }
+        })
+        : renderEmptyElement($xeTable)
     ])
   })
 }
@@ -170,7 +213,7 @@ function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefi
   const { fixedType, footerTableData } = props
 
   const { footerRowClassName, footerRowStyle } = tableProps
-  const { isDragColMove } = tableReactData
+  const { isColLoading, isDragColMove } = tableReactData
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
 
@@ -178,7 +221,7 @@ function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefi
     const _rowIndex = $rowIndex
     const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-    if (columnOpts.drag && columnDragOpts.animation) {
+    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
       return h('transition-group', {
         key: $rowIndex,
         props: {

package/packages/table/src/header.ts

@@ -2,12 +2,11 @@ import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getClass } from '../../ui/src/utils'
-import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom'
-import { convertHeaderColumnToRows, getColReMinWidth, getRefElem } from './util'
+import { getCellHeight, convertHeaderColumnToRows } from './util'
 
 import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeColumnPropTypes, TableReactData, TableInternalData, VxeComponentStyleType } from '../../../types'
 
-const { getI18n, renderer, renderEmptyElement } = VxeUI
+const { renderer, renderEmptyElement } = VxeUI
 
 const cellType = 'header'
 
@@ -25,6 +24,10 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   const { scrollXStore } = tableInternalData
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
+  const cellOpts = $xeTable.computeCellOpts
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight
+  const headerCellOpts = $xeTable.computeHeaderCellOpts
+  const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight
   const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
   return cols.map((column: any, $columnIndex: any) => {
     const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
@@ -34,6 +37,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const compConf = renderOpts ? renderer.get(renderOpts.name) : null
     const isColGroup = column.children && column.children.length
     const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
+    const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
     const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
     const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
     let showEllipsis = headOverflow === 'ellipsis'
@@ -48,15 +52,15 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     }
     const columnIndex = $xeTable.getColumnIndex(column)
     const _columnIndex = $xeTable.getVTColumnIndex(column)
-    const params = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter }
+    const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, 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)
+      click: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
+      dblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
     }
     // 虚拟滚动不支持动态高度
     if (scrollXLoad && !hasEllipsis) {
@@ -65,11 +69,11 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
     let isDisabledDrag = false
     if (isColDragCell) {
-      isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params))
+      isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams))
     }
     // 按下事件处理
     if (mouseConfig || isColDragCell) {
-      thOns.mousedown = (evnt: any) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params)
+      thOns.mousedown = (evnt: any) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams)
     }
     // 拖拽列事件
     if (columnOpts.drag) {
@@ -84,9 +88,16 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
-    let isPreLoadStatus = false
-    if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-      isPreLoadStatus = true
+    let isVNPreEmptyStatus = false
+    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+      isVNPreEmptyStatus = true
+    }
+
+    const tcStyle: Record<string, string> = {}
+    if (hasEllipsis) {
+      tcStyle.height = `${currCellHeight}px`
+    } else {
+      tcStyle.minHeight = `${currCellHeight}px`
     }
 
     return h('th', {
@@ -99,15 +110,16 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
         'col--ellipsis': hasEllipsis,
         'fixed--width': !isAutoCellWidth,
         'fixed--hidden': fixedHiddenColumn,
+        'is--padding': isPadding,
         'is--sortable': column.sortable,
         'col--filter': !!filters,
         'is--filter-active': hasFilter,
         'is--drag-active': !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
         'is--drag-disabled': isDisabledDrag,
         'col--current': currentColumn === column
-      }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
+      }, getClass(headerClassName, cellParams), getClass(headerCellClassName, cellParams)],
       attrs: thAttrs,
-      style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) as VxeComponentStyleType : undefined,
+      style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) as VxeComponentStyleType : undefined,
       on: thOns,
       key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
     }, [
@@ -116,19 +128,29 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
           'c--title': showTitle,
           'c--tooltip': showTooltip,
           'c--ellipsis': showEllipsis
-        }]
-      }, isPreLoadStatus || (isOptimizeMode && fixedHiddenColumn) ? [] : column.renderHeader(h, params)),
+        }],
+        style: tcStyle
+      }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn)
+        ? []
+        : [
+            h('div', {
+              attrs: {
+                colid
+              },
+              class: 'vxe-cell--wrapper'
+            }, column.renderHeader(h, cellParams))
+          ]),
       /**
      * 列宽拖动
      */
       !fixedHiddenColumn && showResizable
         ? h('div', {
-          class: ['vxe-resizable', {
+          class: ['vxe-cell--col-resizable', {
             'is--line': !border || border === 'none'
           }],
           on: {
-            mousedown: (evnt: MouseEvent) => _vm.resizeMousedownEvent(evnt, params),
-            dblclick: (evnt: MouseEvent) => $xeTable.handleResizeDblclickEvent(evnt, params)
+            mousedown: (evnt: MouseEvent) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+            dblclick: (evnt: MouseEvent) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
           }
         })
         : renderEmptyElement($xeTable)
@@ -148,12 +170,12 @@ function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMo
   const columnDragOpts = $xeTable.computeColumnDragOpts
 
   const { headerRowClassName, headerRowStyle } = tableProps
-  const { isDragColMove } = tableReactData
+  const { isColLoading, isDragColMove } = tableReactData
 
   return headerGroups.map((cols: any, $rowIndex: any) => {
     const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType }
 
-    if (columnOpts.drag && columnDragOpts.animation) {
+    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
       return h('transition-group', {
         key: $rowIndex,
         props: {
@@ -247,10 +269,11 @@ export default {
     const { fixedType, fixedColumn, tableColumn } = props
     const { headerColumn } = this
 
-    const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
+    const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
     const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData
     const { visibleColumn, fullColumnIdData } = tableInternalData
 
+    const mouseOpts = $xeTable.computeMouseOpts
     let renderHeaderList = headerColumn as VxeTableDefines.ColumnInfo[][]
     let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
     let isOptimizeMode = false
@@ -354,15 +377,32 @@ export default {
            */
           h('thead', {
             ref: 'refHeaderTHead'
-          }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))
-        ]),
-        /**
-         * 其他
-         */
-        h('div', {
-          ref: 'refHeaderBorderRepair',
-          class: 'vxe-table--header-border-line'
-        })
+          }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList)),
+          mouseConfig && mouseOpts.area
+            ? h('div', {
+              class: 'vxe-table--cell-area'
+            }, [
+              h('span', {
+                class: 'vxe-table--cell-main-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-copy-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-extend-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-multi-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-active-area'
+              }),
+              h('span', {
+                class: 'vxe-table--cell-col-status-area'
+              })
+            ])
+            : renderEmptyElement($xeTable)
+        ])
       ])
     ])
   },
@@ -370,145 +410,6 @@ export default {
     uploadColumn () {
       const { $parent: $xetable } = this
       this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
-    },
-    resizeMousedownEvent (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
-      const _vm = this
-      const props = _vm
-
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
-      const tableReactData = $xeTable as unknown as TableReactData
-      const tableInternalData = $xeTable as unknown as TableInternalData
-
-      const { column } = params
-      const { fixedType } = props
-      const { scrollbarHeight } = tableReactData
-      const { elemStore, visibleColumn } = tableInternalData
-      const resizableOpts = $xeTable.computeResizableOpts
-      const tableEl = $xeTable.$refs.refElem as HTMLDivElement
-      const leftContainerElem = $xeTable.$refs.refLeftContainer as HTMLDivElement
-      const rightContainerElem = $xeTable.$refs.refRightContainer as HTMLDivElement
-      const resizeBarElem = $xeTable.$refs.refCellResizeBar as HTMLDivElement
-      const resizeTipElem = $xeTable.$refs.refCellResizeTip as HTMLDivElement
-      const scrollbarXToTop = $xeTable.computeScrollbarXToTop
-      const { clientX: dragClientX } = evnt
-      const wrapperElem = _vm.$el
-      const dragBtnElem = evnt.target as HTMLDivElement
-      let resizeColumn = column
-      if (column.children && column.children.length) {
-        XEUtils.eachTree(column.children, childColumn => {
-          resizeColumn = childColumn
-        })
-      }
-      const cell = dragBtnElem.parentNode as HTMLTableCellElement
-      const cellParams = Object.assign(params, { cell })
-      let dragLeft = 0
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      if (!bodyScrollElem) {
-        return
-      }
-      const pos = getOffsetPos(dragBtnElem, tableEl)
-      const dragBtnWidth = dragBtnElem.clientWidth
-      const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
-      const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth // 列之间的最小间距
-      let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval
-      let dragPosLeft = pos.left + dragBtnOffsetWidth
-      const domMousemove = document.onmousemove
-      const domMouseup = document.onmouseup
-      const isLeftFixed = fixedType === 'left'
-      const isRightFixed = fixedType === 'right'
-
-      // 计算左右侧固定列偏移量
-      let fixedOffsetWidth = 0
-      if (isLeftFixed || isRightFixed) {
-        const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
-        let tempCellElem = cell[siblingProp] as HTMLTableCellElement
-        while (tempCellElem) {
-          if (hasClass(tempCellElem, 'fixed--hidden')) {
-            break
-          } else if (!hasClass(tempCellElem, 'col--group')) {
-            fixedOffsetWidth += tempCellElem.offsetWidth
-          }
-          tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
-        }
-        if (isRightFixed && rightContainerElem) {
-          dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth
-        }
-      }
-
-      // 处理拖动事件
-      const updateEvent = function (evnt: any) {
-        evnt.stopPropagation()
-        evnt.preventDefault()
-        const tableHeight = tableEl.clientHeight
-        const offsetX = evnt.clientX - dragClientX
-        let left = dragPosLeft + offsetX
-        const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft
-        if (isLeftFixed) {
-          // 左固定列（不允许超过右侧固定列、不允许超过右边距）
-          left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval)
-        } else if (isRightFixed) {
-          // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
-          dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval
-          left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval)
-        } else {
-          dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft)
-          // left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
-        }
-        dragLeft = Math.max(left, dragMinLeft)
-        const resizeBarLeft = Math.max(1, dragLeft - scrollLeft)
-        resizeBarElem.style.left = `${resizeBarLeft}px`
-        resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`
-        resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`
-        if (resizableOpts.showDragTip && resizeTipElem) {
-          const tableWidth = tableEl.clientWidth
-          const wrapperRect = wrapperElem.getBoundingClientRect()
-          const resizeBarWidth = resizeBarElem.clientWidth
-          const resizeTipWidth = resizeTipElem.clientWidth
-          const resizeTipHeight = resizeTipElem.clientHeight
-          let resizeTipLeft = -resizeTipWidth
-          if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
-            resizeTipLeft = 0
-          } else if (resizeBarLeft > tableWidth) {
-            resizeTipLeft += tableWidth - resizeBarLeft
-          }
-          resizeTipElem.style.left = `${resizeTipLeft}px`
-          resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
-          resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
-        }
-      }
-
-      tableReactData._isResize = true
-      addClass(tableEl, 'drag--resize')
-      resizeBarElem.style.display = 'block'
-      document.onmousemove = updateEvent
-      document.onmouseup = function (evnt) {
-        document.onmousemove = domMousemove
-        document.onmouseup = domMouseup
-        const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
-        resizeColumn.resizeWidth = resizeWidth
-        if (resizableOpts.dragMode === 'fixed') {
-          visibleColumn.forEach((item: any) => {
-            if (item.id !== resizeColumn.id) {
-              if (!item.resizeWidth) {
-                item.resizeWidth = item.renderWidth
-              }
-            }
-          })
-        }
-        resizeBarElem.style.display = 'none'
-        tableReactData._isResize = false
-        tableInternalData._lastResizeTime = Date.now()
-        $xeTable.analyColumnWidth()
-        $xeTable.recalculate(true).then(() => {
-          $xeTable.saveCustomStore('update:visible')
-          $xeTable.updateCellAreas()
-          $xeTable.dispatchEvent('resizable-change', { ...params, resizeWidth }, evnt)
-          setTimeout(() => $xeTable.recalculate(true), 300)
-        })
-        removeClass(tableEl, 'drag--resize')
-      }
-      updateEvent(evnt)
-      $xeTable.closeMenu()
     }
   } as any
 } as any