diff --git a/package.json b/package.json index ae9bdf878a..de271ef194 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.7.49", + "version": "4.7.50", "description": "一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", @@ -28,7 +28,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "vxe-pc-ui": "^4.0.63" + "vxe-pc-ui": "^4.0.67" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts index 96e7eb42bf..2bfd9f1001 100644 --- a/packages/grid/src/grid.ts +++ b/packages/grid/src/grid.ts @@ -184,9 +184,9 @@ export default defineComponent({ const tableProps = Object.assign({}, tableExtendProps) if (isZMax) { if (tableExtendProps.maxHeight) { - tableProps.maxHeight = 'fill' + tableProps.maxHeight = '100%' } else { - tableProps.height = 'fill' + tableProps.height = '100%' } } if (proxyConfig && isEnableConf(proxyOpts)) { @@ -1125,7 +1125,7 @@ export default defineComponent({ const topWrapper = refTopWrapper.value const bottomWrapper = refBottomWrapper.value const pagerWrapper = refPagerWrapper.value - const parentPaddingSize = isZMax || !(height === 'auto' || height === 'fill') ? 0 : getPaddingTopBottomSize(el.parentNode as HTMLElement) + const parentPaddingSize = isZMax || !(height === 'auto' || height === '100%') ? 0 : getPaddingTopBottomSize(el.parentNode as HTMLElement) return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper) }, getParentHeight () { diff --git a/packages/table/src/cell.ts b/packages/table/src/cell.ts index afff3f91eb..7c6125fd1a 100644 --- a/packages/table/src/cell.ts +++ b/packages/table/src/cell.ts @@ -6,9 +6,9 @@ import { updateCellTitle } from '../../ui/src/dom' import { createColumn, getRowid } from './util' import { getSlotVNs } from '../../ui/src/vn' -import type { VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types' +import type { VxeTableConstructor, VxeTableDefines, VxeColumnPropTypes, VxeTablePrivateMethods, VxeComponentSlotType } from '../../../types' -const { getI18n, getIcon, renderer } = VxeUI +const { getI18n, getIcon, renderer, formats } = VxeUI function renderTitlePrefixIcon (params: VxeTableDefines.CellRenderHeaderParams) { const { $table, column } = params @@ -94,9 +94,28 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams, con ] } +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) { const { $table, column, _columnIndex, items, row } = params - const { slots, editRender, cellRender } = column + const { slots, editRender, cellRender, footerFormatter } = column const renderOpts = editRender || cellRender const footerSlot = slots ? slots.footer : null if (footerSlot) { @@ -111,11 +130,34 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams) { } } } + let itemValue = '' // 兼容老模式 if (XEUtils.isArray(items)) { - return [formatText(items[_columnIndex], 1)] + itemValue = items[_columnIndex] + return [ + footerFormatter + ? formatFooterLabel(footerFormatter, { + itemValue, + column, + row, + items, + _columnIndex + }) + : formatText(itemValue, 1) + ] } - return [formatText(XEUtils.get(row, column.field), 1)] + itemValue = XEUtils.get(row, column.field) + return [ + footerFormatter + ? formatFooterLabel(footerFormatter, { + itemValue, + column, + row, + items, + _columnIndex + }) + : formatText(itemValue, 1) + ] } function getDefaultCellLabel (params: VxeTableDefines.CellRenderBodyParams) { diff --git a/packages/table/src/column.ts b/packages/table/src/column.ts index 9f1409a8ab..2bc469cbea 100644 --- a/packages/table/src/column.ts +++ b/packages/table/src/column.ts @@ -43,6 +43,8 @@ export const columnProps = { footerClassName: [String, Function] as PropType, // 格式化显示内容 formatter: [Function, Array, String] as PropType>, + // 格式化表尾显示内容 + footerFormatter: [Function, Array, String] as PropType, // 是否允许排序 sortable: Boolean as PropType, // 自定义排序的属性 diff --git a/packages/table/src/columnInfo.ts b/packages/table/src/columnInfo.ts index a9990ecd9b..7bfddbf4be 100644 --- a/packages/table/src/columnInfo.ts +++ b/packages/table/src/columnInfo.ts @@ -73,6 +73,7 @@ export class ColumnInfo { headerClassName: _vm.headerClassName, footerClassName: _vm.footerClassName, formatter: formatter, + footerFormatter: _vm.footerFormatter, sortable: _vm.sortable, sortBy: _vm.sortBy, sortType: _vm.sortType, diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 26ed7c6930..f62467f34e 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -890,7 +890,7 @@ export default defineComponent({ const val = props[key] let num = 0 if (val) { - if (val === 'fill' || val === 'auto') { + if (val === '100%' || val === 'auto') { num = parentHeight } else { const excludeHeight = $xeTable.getExcludeHeight()