vxe-table 3.10.16 → 3.11.0

package/packages/table/src/cell.ts

@@ -1,4 +1,4 @@
-import { CreateElement } from 'vue'
+import { CreateElement, VNode } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
@@ -6,6 +6,8 @@ import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
+import type { VxeTableDefines } from '../../../types'
+
 const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
 function renderTitlePrefixIcon (h: CreateElement, params: any) {
@@ -50,9 +52,12 @@ function renderTitleSuffixIcon (h: CreateElement, params: any) {
 
 function renderCellDragIcon (h: CreateElement, params: any) {
   const { $table } = params
-  const dragOpts = $table.computeDragOpts
-  const { rowIcon, rowDisabledMethod } = dragOpts
-  const isDisabled = rowDisabledMethod && rowDisabledMethod(params)
+  const tableProps = $table
+  const { dragConfig } = tableProps
+  const rowDragOpts = $table.computeRowDragOpts
+  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', {
@@ -68,21 +73,22 @@ function renderCellDragIcon (h: CreateElement, params: any) {
     }
   }, [
     h('i', {
-      class: rowIcon || getIcon().TABLE_DRAG_ROW
+      class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
     })
   ])
 }
 
 function renderCellBaseVNs (h: CreateElement, params: any, content: any) {
-  const { $table, column, row, level } = params
+  const { $table, column, level } = params
   const { dragSort } = column
   const tableProps = $table
-  const { treeConfig } = tableProps
+  const { treeConfig, dragConfig } = tableProps
   const rowOpts = $table.computeRowOpts
-  const dragOpts = $table.computeDragOpts
-  const { showRowIcon, rowVisibleMethod } = dragOpts
+  const rowDragOpts = $table.computeRowDragOpts
+  const { showIcon, visibleMethod } = rowDragOpts
+  const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null)
   const vns: any[] = XEUtils.isArray(content) ? content : [content]
-  if (dragSort && rowOpts.drag && (showRowIcon && (!rowVisibleMethod || rowVisibleMethod({ row, column })))) {
+  if (dragSort && rowOpts.drag && ((showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params)))) {
     if (!treeConfig || !level) {
       vns.unshift(
         renderCellDragIcon(h, params)
@@ -92,6 +98,47 @@ function renderCellBaseVNs (h: CreateElement, params: any, content: any) {
   return vns
 }
 
+function renderHeaderCellDragIcon (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams) {
+  const { $table, column } = params
+  const columnOpts = $table.computeColumnOpts
+  const columnDragOpts = $table.computeColumnDragOpts
+  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
+        }],
+        on: {
+          mousedown (evnt: MouseEvent) {
+            if (!isDisabled) {
+              $table.handleHeaderCellDragMousedownEvent(evnt, params)
+            }
+          },
+          mouseup: $table.handleHeaderCellDragMouseupEvent
+        }
+      }, [
+        h('i', {
+          class: icon || getIcon().TABLE_DRAG_COLUMN
+        })
+      ])
+    }
+  }
+  return renderEmptyElement($table)
+}
+
+function renderHeaderCellBaseVNs (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams, content: VNode | VNode[]) {
+  const vns = [
+    renderTitlePrefixIcon(h, params),
+    renderHeaderCellDragIcon(h, params),
+    ...(XEUtils.isArray(content) ? content : [content]),
+    renderTitleSuffixIcon(h, params)
+  ]
+  return vns
+}
+
 function renderTitleContent (h: CreateElement, params: any, content: any) {
   const { $table, column } = params
   const { type, showHeaderOverflow } = column
@@ -252,7 +299,7 @@ export const Cell = {
     return createColumn($xetable, _vm, renMaps)
   },
   /**
-   * 单元格
+   * 列头标题
    */
   renderHeaderTitle (h: any, params: any) {
     const { $table, column } = params
@@ -271,7 +318,7 @@ export const Cell = {
     return renderTitleContent(h, params, formatText(column.getTitle(), 1))
   },
   renderDefaultHeader (h: CreateElement, params: any) {
-    return renderTitlePrefixIcon(h, params).concat(Cell.renderHeaderTitle(h, params)).concat(renderTitleSuffixIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params))
   },
   renderDefaultCell (h: CreateElement, params: any) {
     const { $table, row, column } = params
@@ -380,12 +427,12 @@ export const Cell = {
   },
 
   /**
-   * 索引
+   * 序号
    */
   renderSeqHeader (h: CreateElement, params: any) {
     const { $table, column } = params
     const { slots } = column
-    return renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1))
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1)))
   },
   renderSeqCell (h: CreateElement, params: any) {
     const { $table, column } = params
@@ -412,13 +459,15 @@ export const Cell = {
     const { slots } = column
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
-    return renderTitleContent(h, params, headerSlot
-      ? $table.callSlot(headerSlot, params, h)
-      : [
-          h('span', {
-            class: 'vxe-radio--label'
-          }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))
-        ])
+    return renderHeaderCellBaseVNs(h, params,
+      renderTitleContent(h, params, headerSlot
+        ? $table.callSlot(headerSlot, params, h)
+        : [
+            h('span', {
+              class: 'vxe-radio--label'
+            }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))
+          ])
+    )
   },
   renderRadioCell (h: CreateElement, params: any) {
     const { $table, column, isHidden } = params
@@ -500,38 +549,40 @@ export const Cell = {
     }
     const checkboxParams = { ...params, checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate }
     if (headerSlot) {
-      return renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h))
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)))
     }
     if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-      return renderTitleContent(h, checkboxParams, [
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
         }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
-      ])
+      ]))
     }
-    return renderTitleContent(h, checkboxParams, [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isAllCheckboxSelected,
-          'is--disabled': isAllCheckboxDisabled,
-          'is--indeterminate': isAllCheckboxIndeterminate
-        }],
-        attrs: {
-          title: getI18n('vxe.table.allTitle')
-        },
-        on
-      }, [
+    return renderHeaderCellBaseVNs(h, params,
+      renderTitleContent(h, 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, h) : headerTitle)
-          ]
-        : []))
-    ])
+          class: ['vxe-cell--checkbox', {
+            'is--checked': isAllCheckboxSelected,
+            'is--disabled': isAllCheckboxDisabled,
+            'is--indeterminate': isAllCheckboxIndeterminate
+          }],
+          attrs: {
+            title: getI18n('vxe.table.allTitle')
+          },
+          on
+        }, [
+          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, h) : headerTitle)
+            ]
+          : []))
+      ])
+    )
   },
   renderCheckboxCell (h: CreateElement, params: any) {
     const { $table, row, column, isHidden } = params
@@ -748,16 +799,14 @@ export const Cell = {
    * 排序和筛选
    */
   renderSortAndFilterHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params)
-      .concat(Cell.renderSortIcon(h, params))
-      .concat(Cell.renderFilterIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)))
   },
 
   /**
    * 排序
    */
   renderSortHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderSortIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)))
   },
   renderSortIcon (h: CreateElement, params: any) {
     const { $table, column } = params
@@ -804,7 +853,7 @@ export const Cell = {
    * 筛选
    */
   renderFilterHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderFilterIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderFilterIcon(h, params)))
   },
   renderFilterIcon (h: CreateElement, params: any) {
     const { $table, column, hasFilter } = params
@@ -849,22 +898,26 @@ export const Cell = {
         isRequired = columnRules.some((rule: any) => 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(h, params))
-      .concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : [])
-      .concat(filters ? Cell.renderFilterIcon(h, 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(h, params,
+      editIconVNs.concat(Cell.renderHeaderTitle(h, params))
+        .concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : [])
+        .concat(filters ? Cell.renderFilterIcon(h, params) : [])
+    )
   },
   // 行格编辑模式
   renderRowEdit (h: CreateElement, params: any) {

package/packages/table/src/footer.ts

@@ -4,6 +4,8 @@ import { VxeUI } from '../../ui'
 import { getClass } from '../../ui/src/utils'
 import { updateCellTitle, setScrollLeft } from '../../ui/src/dom'
 
+import type { VxeTableDefines } from '../../../types'
+
 const renderType = 'footer'
 
 const { renderer } = VxeUI
@@ -22,6 +24,166 @@ function mergeFooterMethod (mergeFooterList: any, _rowIndex: any, _columnIndex:
   }
 }
 
+function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) {
+  const { $parent: $xetable, fixedType } = _vm
+  const { $listeners: tableListeners, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, mergeFooterList, footerSpanMethod, align: allAlign, scrollXLoad, columnKey, columnOpts, showFooterOverflow: allColumnFooterOverflow, currentColumn, overflowX, scrollbarWidth, tooltipOpts } = $xetable
+
+  return tableColumn.map((column: any, $columnIndex: any) => {
+    const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
+    const renderOpts = editRender || cellRender
+    const compConf = renderOpts ? renderer.get(renderOpts.name) : null
+    const showAllTip = tooltipOpts.showAll || tooltipOpts.enabled
+    const isColGroup = column.children && column.children.length
+    const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
+    const footOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(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 tfOns: any = {}
+    const columnIndex = $xetable.getColumnIndex(column)
+    const _columnIndex = $xetable.getVTColumnIndex(column)
+    const itemIndex = _columnIndex
+    const cellParams = {
+      $table: $xetable,
+      $grid: $xetable.xegrid,
+      row,
+      _rowIndex,
+      $rowIndex,
+      column,
+      columnIndex,
+      $columnIndex,
+      _columnIndex,
+      itemIndex,
+      items: row,
+      fixed: fixedType,
+      type: renderType,
+      data: footerTableData
+    }
+    // 虚拟滚动不支持动态高度
+    if (scrollXLoad && !hasEllipsis) {
+      showEllipsis = hasEllipsis = true
+    }
+    if (showTitle || showTooltip || showAllTip) {
+      tfOns.mouseenter = (evnt: any) => {
+        if (showTitle) {
+          updateCellTitle(evnt.currentTarget, column)
+        } else if (showTooltip || showAllTip) {
+          $xetable.triggerFooterTooltipEvent(evnt, cellParams)
+        }
+      }
+    }
+    if (showTooltip || showAllTip) {
+      tfOns.mouseleave = (evnt: any) => {
+        if (showTooltip || showAllTip) {
+          $xetable.handleTargetLeaveEvent(evnt)
+        }
+      }
+    }
+    if (tableListeners['footer-cell-click']) {
+      tfOns.click = (evnt: any) => {
+        $xetable.emitEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
+      }
+    }
+    if (tableListeners['footer-cell-dblclick']) {
+      tfOns.dblclick = (evnt: any) => {
+        $xetable.emitEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
+      }
+    }
+    // 合并行或列
+    if (mergeFooterList.length) {
+      const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex)
+      if (spanRest) {
+        const { rowspan, colspan } = spanRest
+        if (!rowspan || !colspan) {
+          return null
+        }
+        if (rowspan > 1) {
+          attrs.rowspan = rowspan
+        }
+        if (colspan > 1) {
+          attrs.colspan = colspan
+        }
+      }
+    } else if (footerSpanMethod) {
+      // 自定义合并方法
+      const { rowspan = 1, colspan = 1 } = footerSpanMethod(cellParams) || {}
+      if (!rowspan || !colspan) {
+        return null
+      }
+      if (rowspan > 1) {
+        attrs.rowspan = rowspan
+      }
+      if (colspan > 1) {
+        attrs.colspan = colspan
+      }
+    }
+    return h('td', {
+      class: ['vxe-footer--column', column.id, {
+        [`col--${footAlign}`]: footAlign,
+        [`col--${type}`]: type,
+        'col--last': $columnIndex === tableColumn.length - 1,
+        'fixed--hidden': fixedHiddenColumn,
+        'col--ellipsis': hasEllipsis,
+        'col--current': currentColumn === column
+      }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
+      attrs,
+      style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,
+      on: tfOns,
+      key: columnKey || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex
+    }, [
+      h('div', {
+        class: ['vxe-cell', {
+          'c--title': showTitle,
+          'c--tooltip': showTooltip,
+          'c--ellipsis': showEllipsis
+        }]
+      }, column.renderFooter(h, cellParams))
+    ])
+  }).concat(scrollbarWidth
+    ? [
+        h('td', {
+          key: `gr${$rowIndex}`,
+          class: 'vxe-footer--gutter col--gutter'
+        })
+      ]
+    : [])
+}
+
+function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) {
+  const { $parent: $xetable, fixedType, tableColumn } = _vm
+  const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable
+  const columnOpts = $xetable.columnOpts
+
+  return footerTableData.map((row: any, $rowIndex: any) => {
+    const _rowIndex = $rowIndex
+    const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
+
+    if (columnOpts.drag) {
+      return h('transition-group', {
+        props: {
+          tag: 'tr',
+          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+          class: [
+            'vxe-footer--row',
+            footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
+          ],
+          style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+        }
+      }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex))
+    }
+    return h('tr', {
+      class: [
+        'vxe-footer--row',
+        footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
+      ],
+      style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+    }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex))
+  })
+}
+
 export default {
   name: 'VxeTableFooter',
   props: {
@@ -53,28 +215,7 @@ export default {
   },
   render (h: CreateElement) {
     let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this
-    const {
-      $listeners: tableListeners,
-      tId,
-      footerRowClassName,
-      footerCellClassName,
-      footerRowStyle,
-      footerCellStyle,
-      footerAlign: allFooterAlign,
-      mergeFooterList,
-      footerSpanMethod,
-      align: allAlign,
-      scrollXLoad,
-      columnKey,
-      columnOpts,
-      showFooterOverflow: allColumnFooterOverflow,
-      currentColumn,
-      overflowX,
-      scrollbarWidth,
-      tooltipOpts,
-      visibleColumn,
-      expandColumn
-    } = $xetable
+    const { tId, mergeFooterList, footerSpanMethod, scrollXLoad, showFooterOverflow: allColumnFooterOverflow, scrollbarWidth, visibleColumn, expandColumn } = $xetable
     // 如果是使用优化模式
     if (fixedType) {
       // 如果存在展开行使用全量渲染
@@ -139,134 +280,7 @@ export default {
          */
         h('tfoot', {
           ref: 'tfoot'
-        }, footerTableData.map((list: any, _rowIndex: any) => {
-          const $rowIndex = _rowIndex
-          const rowParams = { $table: $xetable, row: list, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
-          return h('tr', {
-            class: ['vxe-footer--row', footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
-            style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-          }, tableColumn.map((column: any, $columnIndex: any) => {
-            const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
-            const renderOpts = editRender || cellRender
-            const compConf = renderOpts ? renderer.get(renderOpts.name) : null
-            const showAllTip = tooltipOpts.showAll || tooltipOpts.enabled
-            const isColGroup = column.children && column.children.length
-            const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX
-            const footOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(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 tfOns: any = {}
-            const columnIndex = $xetable.getColumnIndex(column)
-            const _columnIndex = $xetable.getVTColumnIndex(column)
-            const itemIndex = _columnIndex
-            const cellParams = {
-              $table: $xetable,
-              $grid: $xetable.xegrid,
-              row: list,
-              _rowIndex,
-              $rowIndex,
-              column,
-              columnIndex,
-              $columnIndex,
-              _columnIndex,
-              itemIndex,
-              items: list,
-              fixed: fixedType,
-              type: renderType,
-              data: footerTableData
-            }
-            // 虚拟滚动不支持动态高度
-            if (scrollXLoad && !hasEllipsis) {
-              showEllipsis = hasEllipsis = true
-            }
-            if (showTitle || showTooltip || showAllTip) {
-              tfOns.mouseenter = (evnt: any) => {
-                if (showTitle) {
-                  updateCellTitle(evnt.currentTarget, column)
-                } else if (showTooltip || showAllTip) {
-                  $xetable.triggerFooterTooltipEvent(evnt, cellParams)
-                }
-              }
-            }
-            if (showTooltip || showAllTip) {
-              tfOns.mouseleave = (evnt: any) => {
-                if (showTooltip || showAllTip) {
-                  $xetable.handleTargetLeaveEvent(evnt)
-                }
-              }
-            }
-            if (tableListeners['footer-cell-click']) {
-              tfOns.click = (evnt: any) => {
-                $xetable.emitEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
-              }
-            }
-            if (tableListeners['footer-cell-dblclick']) {
-              tfOns.dblclick = (evnt: any) => {
-                $xetable.emitEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt)
-              }
-            }
-            // 合并行或列
-            if (mergeFooterList.length) {
-              const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex)
-              if (spanRest) {
-                const { rowspan, colspan } = spanRest
-                if (!rowspan || !colspan) {
-                  return null
-                }
-                if (rowspan > 1) {
-                  attrs.rowspan = rowspan
-                }
-                if (colspan > 1) {
-                  attrs.colspan = colspan
-                }
-              }
-            } else if (footerSpanMethod) {
-              // 自定义合并方法
-              const { rowspan = 1, colspan = 1 } = footerSpanMethod(cellParams) || {}
-              if (!rowspan || !colspan) {
-                return null
-              }
-              if (rowspan > 1) {
-                attrs.rowspan = rowspan
-              }
-              if (colspan > 1) {
-                attrs.colspan = colspan
-              }
-            }
-            return h('td', {
-              class: ['vxe-footer--column', column.id, {
-                [`col--${footAlign}`]: footAlign,
-                [`col--${type}`]: type,
-                'col--last': $columnIndex === tableColumn.length - 1,
-                'fixed--hidden': fixedHiddenColumn,
-                'col--ellipsis': hasEllipsis,
-                'col--current': currentColumn === column
-              }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
-              attrs,
-              style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,
-              on: tfOns,
-              key: columnKey || columnOpts.useKey ? column.id : $columnIndex
-            }, [
-              h('div', {
-                class: ['vxe-cell', {
-                  'c--title': showTitle,
-                  'c--tooltip': showTooltip,
-                  'c--ellipsis': showEllipsis
-                }]
-              }, column.renderFooter(h, cellParams))
-            ])
-          }).concat(scrollbarWidth
-            ? [
-                h('td', {
-                  class: 'vxe-footer--gutter col--gutter'
-                })
-              ]
-            : []))
-        }))
+        }, renderHeads(h, this, footerTableData))
       ])
     ])
   },