vxe-table 4.8.16 → 4.9.0

package/packages/table/module/edit/hook.ts

@@ -256,6 +256,41 @@ hooks.add('tableEditModule', {
       })
     }
 
+    const handleClearEdit = (evnt: Event | null, targetRow?: any) => {
+      const { editStore } = reactData
+      const { actived, focused } = editStore
+      const { row, column } = actived
+      const validOpts = computeValidOpts.value
+      if (row || column) {
+        if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
+          return nextTick()
+        }
+        syncActivedCell()
+        actived.args = null
+        actived.row = null
+        actived.column = null
+        $xeTable.updateFooter()
+        $xeTable.dispatchEvent('edit-closed', {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          $rowIndex: $xeTable.getVMRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          $columnIndex: $xeTable.getVMColumnIndex(column)
+        }, evnt || null)
+      }
+      if (validOpts.autoClear) {
+        if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
+          if ($xeTable.clearValidate) {
+            return $xeTable.clearValidate()
+          }
+        }
+      }
+      focused.row = null
+      focused.column = null
+      return nextTick()
+    }
+
     editMethods = {
       /**
        * 往表格中插入临时数据
@@ -514,46 +549,18 @@ hooks.add('tableEditModule', {
         }
         return null
       },
-      clearActived (evnt) {
+      clearActived (row) {
         // 即将废弃
         if (process.env.VUE_APP_VXE_ENV === 'development') {
           warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit'])
         }
-        return this.clearEdit(evnt)
+        return this.clearEdit(row)
       },
       /**
        * 清除激活的编辑
        */
-      clearEdit (evnt) {
-        const { editStore } = reactData
-        const { actived, focused } = editStore
-        const { row, column } = actived
-        const validOpts = computeValidOpts.value
-        if (row || column) {
-          syncActivedCell()
-          actived.args = null
-          actived.row = null
-          actived.column = null
-          $xeTable.updateFooter()
-          $xeTable.dispatchEvent('edit-closed', {
-            row,
-            rowIndex: $xeTable.getRowIndex(row),
-            $rowIndex: $xeTable.getVMRowIndex(row),
-            column,
-            columnIndex: $xeTable.getColumnIndex(column),
-            $columnIndex: $xeTable.getVMColumnIndex(column)
-          }, evnt || null)
-        }
-        if (validOpts.autoClear) {
-          if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
-            if ($xeTable.clearValidate) {
-              return $xeTable.clearValidate()
-            }
-          }
-        }
-        focused.row = null
-        focused.column = null
-        return nextTick()
+      clearEdit (row) {
+        return handleClearEdit(null, row)
       },
       /**
        * 清除所选中源状态
@@ -687,7 +694,7 @@ hooks.add('tableEditModule', {
                 }
                 $xeTable.closeTooltip()
                 if (actived.column) {
-                  editMethods.clearEdit(evnt)
+                  handleClearEdit(evnt)
                 }
                 type = 'edit-activated'
                 column.renderHeight = cell.offsetHeight
@@ -765,6 +772,12 @@ hooks.add('tableEditModule', {
       handleActived (params, evnt) {
         return editPrivateMethods.handleEdit(params, evnt)
       },
+      /**
+       * 处理取消编辑
+       * @param evnt
+       * @returns
+       */
+      handleClearEdit,
       /**
        * 处理聚焦
        */
@@ -836,7 +849,7 @@ hooks.add('tableEditModule', {
         const selectMethod = () => {
           if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
             if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
-              editMethods.clearEdit(evnt)
+              handleClearEdit(evnt)
               editMethods.clearSelected()
               if ($xeTable.clearCellAreas) {
                 $xeTable.clearCellAreas()

package/packages/table/module/filter/hook.ts

@@ -1,7 +1,7 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
-import { toFilters, handleFieldOrColumn } from '../../src/util'
+import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
 import { getDomNode, triggerEvent } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
@@ -251,8 +251,7 @@ hooks.add('tableFilterModule', {
           const { elemStore } = internalData
           const { fixed } = column
           return $xeTable.scrollToColumn(column).then(() => {
-            const headerWrapperRef = elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']
-            const headerWrapperElem = headerWrapperRef ? headerWrapperRef.value : null
+            const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
             if (headerWrapperElem) {
               const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`) as HTMLElement
               triggerEvent(filterBtnElem, 'click')

package/packages/table/module/keyboard/hook.ts

@@ -1,5 +1,6 @@
 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 type { TableKeyboardPrivateMethods } from '../../../../types'
@@ -79,8 +80,7 @@ hooks.add('tableKeyboardModule', {
         const { elemStore } = internalData
         const disX = evnt.clientX
         const disY = evnt.clientY
-        const bodyWrapperRef = elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper']
-        const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null
+        const bodyWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper'])
         if (!bodyWrapperElem) {
           return
         }

package/packages/table/src/body.ts

@@ -1,7 +1,7 @@
 import { createCommentVNode, defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, ComputedRef, onBeforeUnmount, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { mergeBodyMethod, getRowid, XEBodyScrollElement } from './util'
+import { mergeBodyMethod, getRowid, XEBodyScrollElement, getRefElem } from './util'
 import { updateCellTitle, getPropClass, setScrollTop, setScrollLeft } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -359,7 +359,7 @@ export default defineComponent({
           getPropClass(className, params),
           getPropClass(allCellClassName, params)
         ],
-        key: columnKey || columnOpts.useKey || rowOpts.useKey ? colid : $columnIndex,
+        key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
           height: cellHeight
@@ -370,13 +370,14 @@ export default defineComponent({
 
     const renderRows = (fixedType: any, tableData: any, tableColumn: any) => {
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedMaps, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, pendingRowList } = tableReactData
+      const { hasFixedColumn, treeExpandedMaps, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, pendingRowList, isDragColMove } = tableReactData
       const { fullAllDataRowIdData } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
       const editOpts = computeEditOpts.value
       const rowOpts = computeRowOpts.value
+      const columnOpts = computeColumnOpts.value
       const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
@@ -431,30 +432,44 @@ export default defineComponent({
           rowChildren = row[childrenField]
           isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
         }
+        const trClass = [
+          'vxe-body--row',
+          treeConfig ? `row--level-${rowLevel}` : '',
+          {
+            'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
+            'is--new': isNewRow,
+            'is--expand-row': isExpandRow,
+            'is--expand-tree': isExpandTree,
+            'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
+            'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
+            'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
+            'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+          },
+          getPropClass(rowClassName, params)
+        ]
+        const tdVNs = tableColumn.map((column: any, $columnIndex: any) => {
+          return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
+        })
         rows.push(
-          h('tr', {
-            class: [
-              'vxe-body--row',
-              treeConfig ? `row--level-${rowLevel}` : '',
-              {
-                'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
-                'is--new': isNewRow,
-                'is--expand-row': isExpandRow,
-                'is--expand-tree': isExpandTree,
-                'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-                'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
-                'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
-              },
-              getPropClass(rowClassName, params)
-            ],
-            rowid: rowid,
-            style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-            key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
-            ...trOn
-          }, tableColumn.map((column: any, $columnIndex: any) => {
-            return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
-          }))
+          columnOpts.drag
+            ? h(TransitionGroup, {
+              name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+              tag: 'tr',
+              class: trClass,
+              rowid: rowid,
+              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+              key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+              ...trOn
+            }, {
+              default: () => tdVNs
+            })
+            : h('tr', {
+              class: trClass,
+              rowid: rowid,
+              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+              key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+              ...trOn
+            }, tdVNs)
         )
         // 如果行被展开了
         if (isExpandRow) {
@@ -578,10 +593,8 @@ export default defineComponent({
       const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
       const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
       const bodyElem = tableBody.$el as HTMLDivElement
-      const bodyYRef = elemStore['main-body-ySpace']
-      const bodyYElem = bodyYRef ? bodyYRef.value : null
-      const bodyXRef = elemStore['main-body-xSpace']
-      const bodyXElem = bodyXRef ? bodyXRef.value : null
+      const bodyYElem = getRefElem(elemStore['main-body-ySpace'])
+      const bodyXElem = getRefElem(elemStore['main-body-xSpace'])
       const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight
       const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth
       const remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0
@@ -712,6 +725,7 @@ export default defineComponent({
       const emptyOpts = computeEmptyOpts.value
       const keyboardOpts = computeKeyboardOpts.value
       const mouseOpts = computeMouseOpts.value
+      const columnOpts = computeColumnOpts.value
       // const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
       // const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
       // 如果是使用优化模式
@@ -787,8 +801,9 @@ export default defineComponent({
           /**
            * 内容
            */
-          rowOpts.drag
+          rowOpts.drag || columnOpts.drag
             ? h(TransitionGroup, {
+              ref: refBodyTBody,
               name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
               tag: 'tbody'
             }, {

package/packages/table/src/cell.ts

@@ -13,45 +13,46 @@ const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 function renderTitlePrefixIcon (params: VxeTableDefines.CellRenderHeaderParams) {
   const { $table, column } = params
   const titlePrefix = column.titlePrefix || column.titleHelp
-  return titlePrefix
-    ? [
-        h('i', {
-          class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
-          onMouseenter (evnt: MouseEvent) {
-            $table.triggerHeaderTitleEvent(evnt, titlePrefix, params)
-          },
-          onMouseleave (evnt: MouseEvent) {
-            $table.handleTargetLeaveEvent(evnt)
-          }
-        })
-      ]
-    : []
+  if (titlePrefix) {
+    return h('i', {
+      class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+      onMouseenter (evnt: MouseEvent) {
+        $table.triggerHeaderTitleEvent(evnt, titlePrefix, params)
+      },
+      onMouseleave (evnt: MouseEvent) {
+        $table.handleTargetLeaveEvent(evnt)
+      }
+    })
+  }
+  return renderEmptyElement($table)
 }
 
 function renderTitleSuffixIcon (params: VxeTableDefines.CellRenderHeaderParams) {
   const { $table, column } = params
   const titleSuffix = column.titleSuffix
-  return titleSuffix
-    ? [
-        h('i', {
-          class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
-          onMouseenter (evnt: MouseEvent) {
-            $table.triggerHeaderTitleEvent(evnt, titleSuffix, params)
-          },
-          onMouseleave (evnt: MouseEvent) {
-            $table.handleTargetLeaveEvent(evnt)
-          }
-        })
-      ]
-    : []
+  if (titleSuffix) {
+    h('i', {
+      class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+      onMouseenter (evnt: MouseEvent) {
+        $table.triggerHeaderTitleEvent(evnt, titleSuffix, params)
+      },
+      onMouseleave (evnt: MouseEvent) {
+        $table.handleTargetLeaveEvent(evnt)
+      }
+    })
+  }
+  return renderEmptyElement($table)
 }
 
 function renderCellDragIcon (params: VxeTableDefines.CellRenderBodyParams) {
   const { $table } = params
-  const { computeDragOpts } = $table.getComputeMaps()
-  const dragOpts = computeDragOpts.value
-  const { rowIcon, rowDisabledMethod } = dragOpts
-  const isDisabled = rowDisabledMethod && rowDisabledMethod(params)
+  const tableProps = $table.props
+  const { dragConfig } = tableProps
+  const { computeRowDragOpts } = $table.getComputeMaps()
+  const rowDragOpts = computeRowDragOpts.value
+  const { icon, disabledMethod } = rowDragOpts
+  const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null)
+  const isDisabled = rDisabledMethod && rDisabledMethod(params)
   return h('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
@@ -65,7 +66,7 @@ function renderCellDragIcon (params: VxeTableDefines.CellRenderBodyParams) {
     onMouseup: $table.handleCellDragMouseupEvent
   }, [
     h('i', {
-      class: rowIcon || getIcon().TABLE_DRAG_ROW
+      class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
     })
   ])
 }
@@ -74,13 +75,14 @@ function renderCellBaseVNs (params: VxeTableDefines.CellRenderBodyParams, conten
   const { $table, column, level } = params
   const { dragSort } = column
   const tableProps = $table.props
-  const { treeConfig } = tableProps
-  const { computeRowOpts, computeDragOpts } = $table.getComputeMaps()
+  const { treeConfig, dragConfig } = tableProps
+  const { computeRowOpts, computeRowDragOpts } = $table.getComputeMaps()
   const rowOpts = computeRowOpts.value
-  const dragOpts = computeDragOpts.value
-  const { showRowIcon, rowVisibleMethod } = dragOpts
+  const rowDragOpts = computeRowDragOpts.value
+  const { showIcon, visibleMethod } = rowDragOpts
+  const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null)
   const vns: VxeComponentSlotType[] = XEUtils.isArray(content) ? content : [content]
-  if (dragSort && rowOpts.drag && (showRowIcon && (!rowVisibleMethod || rowVisibleMethod(params)))) {
+  if (dragSort && rowOpts.drag && ((showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params)))) {
     if (!treeConfig || !level) {
       vns.unshift(
         renderCellDragIcon(params)
@@ -90,6 +92,46 @@ function renderCellBaseVNs (params: VxeTableDefines.CellRenderBodyParams, conten
   return vns
 }
 
+function renderHeaderCellDragIcon (params: VxeTableDefines.CellRenderHeaderParams) {
+  const { $table, column } = params
+  const { computeColumnOpts, computeColumnDragOpts } = $table.getComputeMaps()
+  const columnOpts = computeColumnOpts.value
+  const columnDragOpts = computeColumnDragOpts.value
+  const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts
+  const isDisabled = disabledMethod && disabledMethod(params)
+  if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
+    if (!(column.fixed || column.parentId)) {
+      return h('span', {
+        key: 'dg',
+        class: ['vxe-cell--drag-handle', {
+          'is--disabled': isDisabled
+        }],
+        onMousedown (evnt) {
+          if (!isDisabled) {
+            $table.handleHeaderCellDragMousedownEvent(evnt, params)
+          }
+        },
+        onMouseup: $table.handleHeaderCellDragMouseupEvent
+      }, [
+        h('i', {
+          class: icon || getIcon().TABLE_DRAG_COLUMN
+        })
+      ])
+    }
+  }
+  return renderEmptyElement($table)
+}
+
+function renderHeaderCellBaseVNs (params: VxeTableDefines.CellRenderHeaderParams, content: VNode | VNode[]) {
+  const vns = [
+    renderTitlePrefixIcon(params),
+    renderHeaderCellDragIcon(params),
+    ...(XEUtils.isArray(content) ? content : [content]),
+    renderTitleSuffixIcon(params)
+  ]
+  return vns
+}
+
 function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams, content: VxeComponentSlotType | VxeComponentSlotType[]) {
   const { $table, column } = params
   const { props, reactData } = $table
@@ -264,7 +306,7 @@ export const Cell = {
     return createColumn($xeTable, columnOpts, renConfs)
   },
   /**
-   * 单元格
+   * 列头标题
    */
   renderHeaderTitle (params: VxeTableDefines.CellRenderHeaderParams) {
     const { $table, column } = params
@@ -286,7 +328,7 @@ export const Cell = {
     return renderTitleContent(params, formatText(column.getTitle(), 1))
   },
   renderDefaultHeader (params: VxeTableDefines.CellRenderHeaderParams) {
-    return renderTitlePrefixIcon(params).concat(Cell.renderHeaderTitle(params)).concat(renderTitleSuffixIcon(params))
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params))
   },
   renderDefaultCell (params: VxeTableDefines.CellRenderBodyParams) {
     const { $table, row, column } = params
@@ -404,13 +446,13 @@ export const Cell = {
   },
 
   /**
-   * 索引
+   * 序号
    */
   renderSeqHeader (params: VxeTableDefines.CellRenderHeaderParams) {
     const { $table, column } = params
     const { slots } = column
     const headerSlot = slots ? slots.header : null
-    return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1))
+    return renderHeaderCellBaseVNs(params, renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1)))
   },
   renderSeqCell (params: VxeTableDefines.CellRenderBodyParams) {
     const { $table, column } = params
@@ -441,13 +483,15 @@ export const Cell = {
     const { slots } = column
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
-    return renderTitleContent(params, headerSlot
-      ? $table.callSlot(headerSlot, params)
-      : [
-          h('span', {
-            class: 'vxe-radio--label'
-          }, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))
-        ])
+    return renderHeaderCellBaseVNs(params,
+      renderTitleContent(params, headerSlot
+        ? $table.callSlot(headerSlot, params)
+        : [
+            h('span', {
+              class: 'vxe-radio--label'
+            }, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))
+          ])
+    )
   },
   renderRadioCell (params: VxeTableDefines.CellRenderBodyParams) {
     const { $table, column, isHidden } = params
@@ -535,36 +579,38 @@ export const Cell = {
     }
     const checkboxParams = { ...params, checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate }
     if (headerSlot) {
-      return renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams))
+      return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)))
     }
     if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-      return renderTitleContent(checkboxParams, [
+      return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
         }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
-      ])
+      ]))
     }
-    return renderTitleContent(checkboxParams, [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isAllCheckboxSelected,
-          'is--disabled': isAllCheckboxDisabled,
-          'is--indeterminate': isAllCheckboxIndeterminate
-        }],
-        title: getI18n('vxe.table.allTitle'),
-        ...ons
-      }, [
+    return renderHeaderCellBaseVNs(params,
+      renderTitleContent(checkboxParams, [
         h('span', {
-          class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-        })
-      ].concat(titleSlot || headerTitle
-        ? [
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
-          ]
-        : []))
-    ])
+          class: ['vxe-cell--checkbox', {
+            'is--checked': isAllCheckboxSelected,
+            'is--disabled': isAllCheckboxDisabled,
+            'is--indeterminate': isAllCheckboxIndeterminate
+          }],
+          title: getI18n('vxe.table.allTitle'),
+          ...ons
+        }, [
+          h('span', {
+            class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+          })
+        ].concat(titleSlot || headerTitle
+          ? [
+              h('span', {
+                class: 'vxe-checkbox--label'
+              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+            ]
+          : []))
+      ])
+    )
   },
   renderCheckboxCell (params: VxeTableDefines.CellRenderBodyParams) {
     const { $table, row, column, isHidden } = params
@@ -786,23 +832,21 @@ export const Cell = {
     ])
   },
   renderTreeHTMLCell (params: VxeTableDefines.CellRenderBodyParams) {
-    return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params) as VNode[])
+    return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params))
   },
 
   /**
    * 排序和筛选
    */
   renderSortAndFilterHeader (params: VxeTableDefines.CellRenderHeaderParams) {
-    return Cell.renderDefaultHeader(params)
-      .concat(Cell.renderSortIcon(params))
-      .concat(Cell.renderFilterIcon(params))
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params).concat(Cell.renderFilterIcon(params))))
   },
 
   /**
    * 排序
    */
   renderSortHeader (params: VxeTableDefines.CellRenderHeaderParams) {
-    return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params))
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params)))
   },
   renderSortIcon (params: VxeTableDefines.CellRenderHeaderParams | VxeTableDefines.CellRenderHeaderParams) {
     const { $table, column } = params
@@ -845,7 +889,7 @@ export const Cell = {
    * 筛选
    */
   renderFilterHeader (params: VxeTableDefines.CellRenderHeaderParams) {
-    return Cell.renderDefaultHeader(params).concat(Cell.renderFilterIcon(params))
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderFilterIcon(params)))
   },
   renderFilterIcon (params: VxeTableDefines.CellRenderHeaderParams) {
     const { $table, column, hasFilter } = params
@@ -892,22 +936,26 @@ export const Cell = {
         isRequired = columnRules.some((rule) => rule.required)
       }
     }
-    return (isEnableConf(editConfig)
-      ? [
-          isRequired && editOpts.showAsterisk
-            ? h('i', {
-              class: 'vxe-cell--required-icon'
-            })
-            : null,
-          isEnableConf(editRender) && editOpts.showIcon
-            ? h('i', {
-              class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-            })
-            : null
-        ]
-      : []).concat(Cell.renderDefaultHeader(params))
-      .concat(sortable ? Cell.renderSortIcon(params) : [])
-      .concat(filters ? Cell.renderFilterIcon(params) : [])
+    let editIconVNs: VNode[] = []
+    if (isEnableConf(editConfig)) {
+      editIconVNs = [
+        isRequired && editOpts.showAsterisk
+          ? h('i', {
+            class: 'vxe-cell--required-icon'
+          })
+          : renderEmptyElement($table),
+        isEnableConf(editRender) && editOpts.showIcon
+          ? h('i', {
+            class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
+          })
+          : renderEmptyElement($table)
+      ]
+    }
+    return renderHeaderCellBaseVNs(params,
+      editIconVNs.concat(Cell.renderHeaderTitle(params))
+        .concat(sortable ? Cell.renderSortIcon(params) : [])
+        .concat(filters ? Cell.renderFilterIcon(params) : [])
+    )
   },
   // 行格编辑模式
   renderRowEdit (params: VxeTableDefines.CellRenderBodyParams) {

package/packages/table/src/emits.ts

@@ -45,6 +45,9 @@ export default [
   'row-dragstart',
   'row-dragover',
   'row-dragend',
+  'column-dragstart',
+  'column-dragover',
+  'column-dragend',
 
   'edit-actived', // 废弃