vxe-table 4.10.6-beta.25 → 4.10.6-beta.27

package/packages/table/src/body.ts

@@ -103,7 +103,7 @@ export default defineComponent({
       items: any[]
     ) => {
       const { fullAllDataRowIdData } = tableInternalData
-      const { columnKey, height, showOverflow: allColumnOverflow, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
+      const { columnKey, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
       const { tableData, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
       const { afterFullData, scrollXStore, scrollYStore } = tableInternalData
       const cellOpts = computeCellOpts.value
@@ -120,8 +120,8 @@ export default defineComponent({
       const mouseOpts = computeMouseOpts.value
       const areaOpts = computeAreaOpts.value
       const { selectCellToRow } = areaOpts
-      const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, slots } = column
-      const { verticalAlign } = cellOpts
+      const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column
+      const { verticalAlign: allVerticalAlign } = cellOpts
       const { actived } = editStore
       const rowRest = fullAllDataRowIdData[rowid]
       const colid = column.id
@@ -135,16 +135,17 @@ export default defineComponent({
       const isEdit = isEnableConf(editRender)
       const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0
       let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX
-      const isPadding = allPadding === null ? cellOpts.padding : allPadding
-      const cellOverflow = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
+      const isCellPadding = XEUtils.eqNull(padding) ? (allPadding === null ? cellOpts.padding : allPadding) : padding
+      const cellOverflow = XEUtils.eqNull(showOverflow) ? isAllOverflow : showOverflow
       const showEllipsis = cellOverflow === 'ellipsis'
       const showTitle = cellOverflow === 'title'
       const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
-      // 如果表格加上 showOverflow 则不再支持列单独设置
-      const hasEllipsis = allColumnOverflow || showTitle || showTooltip || showEllipsis || resizeHeight > 0
+      const hasEllipsis = isAllOverflow || showTitle || showTooltip || showEllipsis
+      const isRsHeight = resizeHeight > 0
       let isDirty
       const tdOns: any = {}
       const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign
+      const cellVerticalAlign = XEUtils.eqNull(verticalAlign) ? allVerticalAlign : verticalAlign
       const errorValidItem = validErrorMaps[`${rowid}:${colid}`]
       const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
       const tdAttrs: any = { colid }
@@ -288,14 +289,14 @@ export default defineComponent({
       }
 
       const tcStyle: Record<string, string> = {}
-      if (hasEllipsis) {
+      if (scrollYLoad || hasEllipsis || isRsHeight) {
         tcStyle.height = `${cellHeight}px`
       } else {
         tcStyle.minHeight = `${cellHeight}px`
       }
 
       const tdVNs: any[] = []
-      if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
+      if (fixedHiddenColumn && isAllOverflow) {
         tdVNs.push(
           h('div', {
             key: 'tc',
@@ -385,19 +386,20 @@ export default defineComponent({
         class: [
           'vxe-body--column',
           colid,
+          cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
+          cellAlign ? `col--${cellAlign}` : '',
+          type ? `col--${type}` : '',
           {
-            [`col--${cellAlign}`]: cellAlign,
-            [`col--vertical-${verticalAlign}`]: verticalAlign,
-            [`col--${type}`]: type,
             'col--last': isLastColumn,
             'col--tree-node': treeNode,
             'col--edit': isEdit,
             'col--ellipsis': hasEllipsis,
+            'col--rs-height': isRsHeight,
             'col--to-row': showAreaRowStatus,
             'col--auto-height': isVNAutoHeight,
             'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
-            'is--padding': isPadding,
+            'is--padding': isCellPadding,
             'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
             'is--drag-disabled': isDisabledDrag,
             'col--dirty': isDirty,
@@ -417,8 +419,8 @@ export default defineComponent({
     }
 
     const renderRows = (fixedType: VxeColumnPropTypes.Fixed, isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {
-      const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, showOverflow: allColumnOverflow, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedMaps, scrollXLoad, scrollYLoad, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
+      const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
+      const { hasFixedColumn, treeExpandedMaps, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData
       const { fullAllDataRowIdData } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -535,7 +537,7 @@ export default defineComponent({
             cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`
           }
           const { showOverflow } = expandColumn
-          const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
+          const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? isAllOverflow : showOverflow
           const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex }
           rows.push(
             h('tr', {
@@ -609,7 +611,7 @@ export default defineComponent({
       const { slots } = tableContext
 
       const { fixedColumn, fixedType, tableColumn } = props
-      const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps
+      const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
       const { isGroup, tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
       const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
       const rowOpts = computeRowOpts.value
@@ -623,7 +625,7 @@ export default defineComponent({
       let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
       let isOptimizeMode = false
       // 如果是使用优化模式
-      if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+      if (scrollXLoad || scrollYLoad || isAllOverflow) {
         if (expandColumn || spanMethod || footerSpanMethod) {
           // 如果不支持优化模式
         } else {
@@ -705,7 +707,7 @@ export default defineComponent({
           $xeTable.triggerBodyScrollEvent(evnt, fixedType)
         }
       }
-      if (leftFixedWidth || rightFixedWidth) {
+      if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
         ons.onWheel = $xeTable.triggerBodyWheelEvent
       }
 

package/packages/table/src/cell.ts

@@ -6,7 +6,7 @@ import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTableConstructor, VxeTableDefines, VxeColumnPropTypes, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types'
+import type { VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types'
 
 const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
@@ -207,25 +207,6 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
   ]
 }
 
-function formatFooterLabel (footerFormatter: VxeColumnPropTypes.FooterFormatter, params: {
-  itemValue: any
-  column: VxeTableDefines.ColumnInfo
-  row: any
-  items: any[]
-  _columnIndex: number
-}) {
-  if (XEUtils.isFunction(footerFormatter)) {
-    return `${footerFormatter(params)}`
-  }
-  const isArr = XEUtils.isArray(footerFormatter)
-  const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter)
-  const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null
-  if (footerFormatMethod) {
-    return `${isArr ? footerFormatMethod(params, ...footerFormatter.slice(1)) : footerFormatMethod(params)}`
-  }
-  return ''
-}
-
 function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { $table, column, _columnIndex, items, row } = params
   const { slots, editRender, cellRender, footerFormatter } = column
@@ -234,42 +215,39 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
   if (footerSlot) {
     return $table.callSlot(footerSlot, params)
   }
+  let itemValue = ''
+  // 兼容老模式
+  if (XEUtils.isArray(items)) {
+    itemValue = items[_columnIndex]
+  } else {
+    itemValue = XEUtils.get(row, column.field)
+  }
+  const footParams = Object.assign(params, {
+    itemValue
+  })
+  if (footerFormatter) {
+    if (XEUtils.isFunction(footerFormatter)) {
+      return `${footerFormatter(footParams)}`
+    }
+    const isArr = XEUtils.isArray(footerFormatter)
+    const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter)
+    const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null
+    if (footerFormatMethod) {
+      return `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`
+    }
+    return ''
+  }
   if (renderOpts) {
     const compConf = renderer.get(renderOpts.name)
     if (compConf) {
       const rtFooter = compConf.renderTableFooter || compConf.renderFooter
       if (rtFooter) {
-        return getSlotVNs(rtFooter(renderOpts, params))
+        return getSlotVNs(rtFooter(renderOpts, footParams))
       }
     }
   }
-  let itemValue = ''
-  // 兼容老模式
-  if (XEUtils.isArray(items)) {
-    itemValue = items[_columnIndex]
-    return [
-      footerFormatter
-        ? formatFooterLabel(footerFormatter, {
-          itemValue,
-          column,
-          row,
-          items,
-          _columnIndex
-        })
-        : formatText(itemValue, 1)
-    ]
-  }
-  itemValue = XEUtils.get(row, column.field)
   return [
-    footerFormatter
-      ? formatFooterLabel(footerFormatter, {
-        itemValue,
-        column,
-        row,
-        items,
-        _columnIndex
-      })
-      : formatText(itemValue, 1)
+    formatText(itemValue, 1)
   ]
 }
 

package/packages/table/src/column.ts

@@ -57,6 +57,16 @@ export const columnProps = {
   formatter: [Function, Array, String] as PropType<VxeColumnPropTypes.Formatter<any>>,
   // 格式化表尾显示内容
   footerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.FooterFormatter>,
+  // 是否显示间距
+  padding: {
+    type: Boolean as PropType<VxeColumnPropTypes.Padding>,
+    default: null
+  },
+  // 垂直对齐方式
+  verticalAlign: {
+    type: String as PropType<VxeColumnPropTypes.VerticalAlign>,
+    default: null
+  },
   // 是否允许排序
   sortable: Boolean as PropType<VxeColumnPropTypes.Sortable>,
   // 自定义排序的属性

package/packages/table/src/columnInfo.ts

@@ -74,6 +74,8 @@ export class ColumnInfo {
       footerClassName: _vm.footerClassName,
       formatter: formatter,
       footerFormatter: _vm.footerFormatter,
+      padding: _vm.padding,
+      verticalAlign: _vm.verticalAlign,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,

package/packages/table/src/footer.ts

@@ -2,6 +2,7 @@ import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTi
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
+import { getCellHeight } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
 
@@ -66,7 +67,7 @@ export default defineComponent({
       const defaultRowHeight = computeDefaultRowHeight.value
       const cellOpts = computeCellOpts.value
       const footerCellOpts = computeFooterCellOpts.value
-      const currCellHeight = footerCellOpts.height || cellOpts.height || defaultRowHeight
+      const currCellHeight = getCellHeight(footerCellOpts.height || cellOpts.height) || defaultRowHeight
 
       return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column

package/packages/table/src/header.ts

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { convertHeaderColumnToRows } from './util'
+import { getCellHeight, convertHeaderColumnToRows } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
 
@@ -52,7 +52,7 @@ export default defineComponent({
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
       const headerCellOpts = computeHeaderCellOpts.value
-      const currCellHeight = headerCellOpts.height || cellOpts.height || defaultRowHeight
+      const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column