vxe-table 3.12.1-beta.2 → 3.12.1-beta.4

package/packages/table/src/cell.ts

@@ -265,55 +265,87 @@ function getDefaultCellLabel (params: VxeTableDefines.CellRenderBodyParams) {
   return formatText($table.getCellLabel(row, column), 1)
 }
 
+function renderCellHandle (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & {
+  $table: VxeTableConstructor & VxeTablePrivateMethods;
+}) {
+  const { column, $table } = params
+  const tableProps = $table
+  const { editConfig } = tableProps
+  const { type, treeNode, editRender } = column
+  const checkboxOpts = $table.computeCheckboxOpts
+  const editOpts = $table.computeEditOpts
+  switch (type) {
+    case 'seq':
+      return treeNode ? Cell.renderTreeIndexCell(h, params) : Cell.renderSeqCell(h, params)
+    case 'radio':
+      return treeNode ? Cell.renderTreeRadioCell(h, params) : Cell.renderRadioCell(h, params)
+    case 'checkbox':
+      return checkboxOpts.checkField ? (treeNode ? Cell.renderTreeSelectionCellByProp(h, params) : Cell.renderCheckboxCellByProp(h, params)) : (treeNode ? Cell.renderTreeSelectionCell(h, params) : Cell.renderCheckboxCell(h, params))
+    case 'expand':
+      return Cell.renderExpandCell(h, params)
+    case 'html':
+      return treeNode ? Cell.renderTreeHTMLCell(h, params) : Cell.renderHTMLCell(h, params)
+  }
+  if (editConfig && editRender) {
+    return editOpts.mode === 'cell' ? (treeNode ? Cell.renderTreeCellEdit(h, params) : Cell.renderCellEdit(h, params)) : (treeNode ? Cell.renderTreeRowEdit(h, params) : Cell.renderRowEdit(h, params))
+  }
+  return treeNode ? Cell.renderTreeCell(h, params) : Cell.renderDefaultCell(h, params)
+}
+
+function renderHeaderHandle (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams & {
+  $table: VxeTableConstructor & VxeTablePrivateMethods;
+}) {
+  const { column, $table } = params
+  const tableProps = $table
+  const { editConfig } = tableProps
+  const { type, filters, sortable, editRender } = column
+  switch (type) {
+    case 'seq':
+      return Cell.renderSeqHeader(h, params)
+    case 'radio':
+      return Cell.renderRadioHeader(h, params)
+    case 'checkbox':
+      return Cell.renderCheckboxHeader(h, params)
+    case 'html':
+      if (filters && sortable) {
+        return Cell.renderSortAndFilterHeader(h, params)
+      } else if (sortable) {
+        return Cell.renderSortHeader(h, params)
+      } else if (filters) {
+        return Cell.renderFilterHeader(h, params)
+      }
+      break
+  }
+  if (editConfig && editRender) {
+    return Cell.renderEditHeader(h, params)
+  } else if (filters && sortable) {
+    return Cell.renderSortAndFilterHeader(h, params)
+  } else if (sortable) {
+    return Cell.renderSortHeader(h, params)
+  } else if (filters) {
+    return Cell.renderFilterHeader(h, params)
+  }
+  return Cell.renderDefaultHeader(h, params)
+}
+
+function renderFooterHandle (h: CreateElement, params: VxeTableDefines.CellRenderFooterParams & {
+  $table: VxeTableConstructor & VxeTablePrivateMethods;
+}) {
+  return Cell.renderDefaultFooter(h, params)
+}
+
 export const Cell = {
   createColumn ($xetable: any, _vm: any) {
-    const { type, sortable, remoteSort, filters, editRender, treeNode } = _vm
-    const { editConfig, editOpts, checkboxOpts } = $xetable
-    const renMaps: any = {
-      renderHeader: this.renderDefaultHeader,
-      renderCell: treeNode ? this.renderTreeCell : this.renderDefaultCell,
-      renderFooter: this.renderDefaultFooter
-    }
-    switch (type) {
-      case 'seq':
-        renMaps.renderHeader = this.renderSeqHeader
-        renMaps.renderCell = treeNode ? this.renderTreeIndexCell : this.renderSeqCell
-        break
-      case 'radio':
-        renMaps.renderHeader = this.renderRadioHeader
-        renMaps.renderCell = treeNode ? this.renderTreeRadioCell : this.renderRadioCell
-        break
-      case 'checkbox':
-        renMaps.renderHeader = this.renderCheckboxHeader
-        renMaps.renderCell = checkboxOpts.checkField ? (treeNode ? this.renderTreeSelectionCellByProp : this.renderCheckboxCellByProp) : (treeNode ? this.renderTreeSelectionCell : this.renderCheckboxCell)
-        break
-      case 'expand':
-        renMaps.renderCell = this.renderExpandCell
-        renMaps.renderData = this.renderExpandData
-        break
-      case 'html':
-        renMaps.renderCell = treeNode ? this.renderTreeHTMLCell : this.renderHTMLCell
-        if (filters && (sortable || remoteSort)) {
-          renMaps.renderHeader = this.renderSortAndFilterHeader
-        } else if (sortable || remoteSort) {
-          renMaps.renderHeader = this.renderSortHeader
-        } else if (filters) {
-          renMaps.renderHeader = this.renderFilterHeader
-        }
-        break
-      default:
-        if (editConfig && editRender) {
-          renMaps.renderHeader = this.renderEditHeader
-          renMaps.renderCell = editOpts.mode === 'cell' ? (treeNode ? this.renderTreeCellEdit : this.renderCellEdit) : (treeNode ? this.renderTreeRowEdit : this.renderRowEdit)
-        } else if (filters && (sortable || remoteSort)) {
-          renMaps.renderHeader = this.renderSortAndFilterHeader
-        } else if (sortable || remoteSort) {
-          renMaps.renderHeader = this.renderSortHeader
-        } else if (filters) {
-          renMaps.renderHeader = this.renderFilterHeader
-        }
+    const { type } = _vm
+    const renConfs: any = {
+      renderHeader: renderHeaderHandle,
+      renderCell: renderCellHandle,
+      renderFooter: renderFooterHandle
+    }
+    if (type === 'expand') {
+      renConfs.renderData = Cell.renderExpandData
     }
-    return createColumn($xetable, _vm, renMaps)
+    return createColumn($xetable, _vm, renConfs)
   },
   /**
    * 列头标题

package/packages/table/src/header.ts

@@ -5,9 +5,9 @@ import { getClass } from '../../ui/src/utils'
 import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom'
 import { convertHeaderColumnToRows, getColReMinWidth } from './util'
 
-import type { VxeTableDefines } from '../../../types'
+import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
-const { renderer, renderEmptyElement } = VxeUI
+const { getI18n, renderer, renderEmptyElement } = VxeUI
 
 const cellType = 'header'
 
@@ -109,7 +109,8 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
             'is--line': !border || border === 'none'
           }],
           on: {
-            mousedown: (evnt: any) => _vm.resizeMousedown(evnt, params)
+            mousedown: (evnt: MouseEvent) => _vm.resizeMousedownEvent(evnt, params),
+            dblclick: (evnt: MouseEvent) => $xeTable.handleResizeDblclickEvent(evnt, params)
           }
         })
         : null
@@ -339,7 +340,7 @@ export default {
       const { $parent: $xetable } = this
       this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
     },
-    resizeMousedown (evnt: any, params: any) {
+    resizeMousedownEvent (evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
       const $xeTable = this.$parent
       const tableInternalData = $xeTable
 
@@ -351,15 +352,17 @@ export default {
       const resizeBarElem = $xetable.$refs.resizeBar as HTMLDivElement
       const resizeTipElem = $xetable.$refs.refCellResizeTip as HTMLDivElement
       const wrapperElem = this.$el as HTMLDivElement
-      const { target: dragBtnElem, clientX: dragClientX } = evnt
-      const cell = params.cell = dragBtnElem.parentNode
+      const { clientX: dragClientX } = evnt
+      const dragBtnElem = evnt.target as HTMLDivElement
+      const cell = dragBtnElem.parentNode as HTMLTableCellElement
+      const cellParams = Object.assign(params, { cell })
       const resizableOpts = $xeTable.computeResizableOpts
       let dragLeft = 0
       const tableBodyElem = tableBody.$el
       const pos = getOffsetPos(dragBtnElem, tableEl)
       const dragBtnWidth = dragBtnElem.clientWidth
       const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
-      const minInterval = getColReMinWidth(params) - dragBtnOffsetWidth // 列之间的最小间距
+      const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth // 列之间的最小间距
       let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval
       let dragPosLeft = pos.left + dragBtnOffsetWidth
       const domMousemove = document.onmousemove
@@ -371,14 +374,14 @@ export default {
       let fixedOffsetWidth = 0
       if (isLeftFixed || isRightFixed) {
         const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
-        let tempCellElem = cell[siblingProp]
+        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]
+          tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
         }
         if (isRightFixed && rightContainer) {
           dragPosLeft = rightContainer.offsetLeft + fixedOffsetWidth
@@ -420,7 +423,7 @@ export default {
           }
           resizeTipElem.style.left = `${resizeTipLeft}px`
           resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
-          resizeTipElem.textContent = `${column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)}px`
+          resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
         }
       }