From 7a470d43177dd2d6141809d9188d6c8813e12dbd Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Tue, 24 Dec 2024 16:12:28 +0800 Subject: [PATCH] releases 3.11.39 --- examples/views/table/TableTest8.vue | 2 +- examples/views/table/TableTest9.vue | 2 +- package.json | 4 +- packages/table/render/index.ts | 56 ++++++++++++++++++++++------ packages/table/src/body.ts | 58 ++++++++++++++++------------- packages/table/src/footer.ts | 51 ++++++++++++++++--------- packages/table/src/header.ts | 32 ++++++++++++---- packages/table/src/methods.ts | 44 ++++++++++++---------- 8 files changed, 164 insertions(+), 85 deletions(-) diff --git a/examples/views/table/TableTest8.vue b/examples/views/table/TableTest8.vue index bb77db19cb..fb8a584c4f 100644 --- a/examples/views/table/TableTest8.vue +++ b/examples/views/table/TableTest8.vue @@ -148,7 +148,7 @@ export default Vue.extend({ moreConfig: { maxCount: 2 }, - imageStyle: { + imageConfig: { width: 40, height: 40 } diff --git a/examples/views/table/TableTest9.vue b/examples/views/table/TableTest9.vue index eff8f77cd8..38f9212c39 100644 --- a/examples/views/table/TableTest9.vue +++ b/examples/views/table/TableTest9.vue @@ -145,7 +145,7 @@ export default Vue.extend({ moreConfig: { maxCount: 2 }, - imageStyle: { + imageConfig: { width: 40, height: 40 } diff --git a/package.json b/package.json index 667616b39d..09cc65c4c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "3.11.38", + "version": "3.11.39", "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": "^3.3.45" + "vxe-pc-ui": "^3.3.46" }, "devDependencies": { "@babel/plugin-transform-modules-commonjs": "^7.25.7", diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index f593d67511..45ded6ab63 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -14,6 +14,10 @@ const componentDefaultModelProp = 'value' const defaultCompProps = {} +function handleDefaultValue (value: any, defaultVal: any, initVal: any) { + return XEUtils.eqNull(value) ? (XEUtils.eqNull(defaultVal) ? initVal : defaultVal) : value +} + function parseDate (value: any, props: any) { return value && props.valueFormat ? XEUtils.toStringDate(value, props.valueFormat) : value } @@ -623,13 +627,25 @@ renderer.mixin({ if (cellValue) { const numberInputConfig = getConfig().numberInput || {} if (type === 'float') { - const digits = props.digits || numberInputConfig.digits || 1 + const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true) + const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1) cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits) + if (!autoFill) { + cellValue = XEUtils.toNumber(cellValue) + } } else if (type === 'amount') { - const digits = props.digits || numberInputConfig.digits || 2 + const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true) + const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2) + const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false) cellValue = XEUtils.commafy(XEUtils.toNumber(cellValue), { digits }) - const showCurrency = props.showCurrency - if (XEUtils.isBoolean(showCurrency) ? showCurrency : numberInputConfig.showCurrency) { + if (!autoFill) { + const [iStr, dStr] = cellValue.split('.') + if (dStr) { + const dRest = dStr.replace(/0+$/, '') + cellValue = dRest ? [iStr, '.', dRest].join('') : iStr + } + } + if (showCurrency) { cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}` } } @@ -641,18 +657,36 @@ renderer.mixin({ const { row, column, _columnIndex } = params const { type } = props // 兼容老模式 - const cellValue = XEUtils.isArray(row) ? row[_columnIndex] : XEUtils.get(row, column.field) - if (XEUtils.isNumber(cellValue)) { + const itemValue = XEUtils.isArray(row) ? row[_columnIndex] : XEUtils.get(row, column.field) + if (XEUtils.isNumber(itemValue)) { const numberInputConfig = getConfig().numberInput || {} if (type === 'float') { - const digits = props.digits || numberInputConfig.digits || 1 - return XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits) + const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true) + const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 1) + let amountLabel = XEUtils.toFixed(XEUtils.floor(itemValue, digits), digits) + if (!autoFill) { + amountLabel = XEUtils.toNumber(amountLabel) + } + return amountLabel } else if (type === 'amount') { - const digits = props.digits || numberInputConfig.digits || 2 - return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits }) + const autoFill = handleDefaultValue(props.autoFill, numberInputConfig.autoFill, true) + const digits = handleDefaultValue(props.digits, numberInputConfig.digits, 2) + const showCurrency = handleDefaultValue(props.showCurrency, numberInputConfig.showCurrency, false) + let amountLabel = XEUtils.commafy(XEUtils.toNumber(itemValue), { digits }) + if (!autoFill) { + const [iStr, dStr] = amountLabel.split('.') + if (dStr) { + const dRest = dStr.replace(/0+$/, '') + amountLabel = dRest ? [iStr, '.', dRest].join('') : iStr + } + } + if (showCurrency) { + amountLabel = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${amountLabel}` + } + return amountLabel } } - return getFuncText(cellValue, 1) + return getFuncText(itemValue, 1) }, renderTableDefault: defaultEditRender, renderTableFilter: defaultFilterRender, diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index f342eae13f..bc4e8ef540 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -579,44 +579,50 @@ export default { elemStore[`${prefix}emptyBlock`] = null }, render (this: any, h: CreateElement) { + const props = this const $xeTable = this.$parent + const tableProps = $xeTable + const tableReactData = $xeTable + const tableInternalData = $xeTable - const { _e, $parent: $xetable, fixedColumn, fixedType } = this + const { tId, $scopedSlots } = $xeTable + const { fixedColumn, fixedType, tableColumn } = props + const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps + const { tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn } = tableReactData + const { visibleColumn } = tableInternalData const rowOpts = $xeTable.computeRowOpts + const sYOpts = $xeTable.computeSYOpts + const emptyOpts = $xeTable.computeEmptyOpts + const mouseOpts = $xeTable.computeMouseOpts const rowDragOpts = $xeTable.computeRowDragOpts - let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, isDragRowMove } = $xetable - // 如果是使用优化模式 + + let renderColumnList = tableColumn + if (fixedType) { - // 如果存在展开行使用全量渲染 - if (!expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) { - if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) { - tableColumn = fixedColumn + // 如果是使用优化模式 + if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) { + // 如果不支持优化模式 + if (expandColumn || spanMethod || footerSpanMethod) { + renderColumnList = visibleColumn } else { - tableColumn = visibleColumn - // 检查固定列是否被合并，合并范围是否超出固定列 - // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') { - // tableColumn = fixedColumn - // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') { - // tableColumn = fixedColumn - // } else { - // tableColumn = visibleColumn - // } + renderColumnList = fixedColumn || [] } } else { - tableColumn = visibleColumn + renderColumnList = visibleColumn } } + let emptyContent if ($scopedSlots.empty) { - emptyContent = $scopedSlots.empty.call(this, { $table: $xetable }, h) + emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeTable.xegrid }, h) } else { const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null if (rtEmptyView) { - emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xetable })) + emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xeTable })) } else { - emptyContent = $xetable.emptyText || getI18n('vxe.table.emptyText') + emptyContent = tableProps.emptyText || getI18n('vxe.table.emptyText') } } @@ -636,7 +642,7 @@ export default { on: ons }, [ fixedType - ? _e() + ? renderEmptyElement($xeTable) : h('div', { class: 'vxe-body--x-space', ref: 'xSpace' @@ -660,7 +666,7 @@ export default { */ h('colgroup', { ref: 'colgroup' - }, tableColumn.map((column: any, $columnIndex: any) => { + }, renderColumnList.map((column: any, $columnIndex: any) => { return h('col', { attrs: { name: column.id @@ -677,10 +683,10 @@ export default { tag: 'tbody', name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}` } - }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn)) + }, renderRows(h, this, $xeTable, fixedType, tableData, renderColumnList)) : h('tbody', { ref: 'tbody' - }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn)) + }, renderRows(h, this, $xeTable, fixedType, tableData, renderColumnList)) ]), h('div', { class: 'vxe-table--checkbox-range' @@ -697,8 +703,8 @@ export default { class: 'vxe-table--cell-main-area-btn', on: { mousedown (evnt: any) { - if ($xetable.triggerCellAreaExtendMousedownEvent) { - $xetable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType }) + if ($xeTable.triggerCellAreaExtendMousedownEvent) { + $xeTable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xeTable, fixed: fixedType, type: renderType }) } } } diff --git a/packages/table/src/footer.ts b/packages/table/src/footer.ts index 921c5457a8..34a74894e6 100644 --- a/packages/table/src/footer.ts +++ b/packages/table/src/footer.ts @@ -8,7 +8,7 @@ import type { VxeTableDefines } from '../../../types' const renderType = 'footer' -const { renderer } = VxeUI +const { renderer, renderEmptyElement } = VxeUI function mergeFooterMethod (mergeFooterList: any, _rowIndex: any, _columnIndex: any) { for (let mIndex = 0; mIndex < mergeFooterList.length; mIndex++) { @@ -155,18 +155,19 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co : []) } -function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) { +function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefines.ColumnInfo[]) { const $xeTable = _vm.$parent + const props = _vm const columnOpts = $xeTable.computeColumnOpts const columnDragOpts = $xeTable.computeColumnDragOpts - const { $parent: $xetable, fixedType, tableColumn } = _vm - const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable + const { fixedType, footerTableData } = props + const { footerRowClassName, footerRowStyle, isDragColMove } = $xeTable return footerTableData.map((row: any, $rowIndex: any) => { const _rowIndex = $rowIndex - const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType } + const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType } if (columnOpts.drag && columnDragOpts.animation) { return h('transition-group', { @@ -180,7 +181,7 @@ function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) { ], style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null } - }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex)) + }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex)) } return h('tr', { key: $rowIndex, @@ -189,7 +190,7 @@ function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) { footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : '' ], style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null - }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex)) + }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex)) }) } @@ -223,19 +224,33 @@ export default { elemStore[`${prefix}xSpace`] = null }, render (h: CreateElement) { - let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this - const { tId, mergeFooterList, footerSpanMethod, scrollXLoad, showFooterOverflow: allColumnFooterOverflow, scrollbarWidth, visibleColumn, expandColumn } = $xetable + const props = this + const $xeTable = this.$parent + const tableProps = $xeTable + const tableReactData = $xeTable + const tableInternalData = $xeTable + + const { tId } = $xeTable + const { fixedType, fixedColumn, tableColumn } = props + + const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps + const { visibleColumn } = tableInternalData + const { scrollbarWidth } = tableReactData + + let renderColumnList = tableColumn + // 如果是使用优化模式 if (fixedType) { - // 如果存在展开行使用全量渲染 - if (!expandColumn && (scrollXLoad || allColumnFooterOverflow)) { - if (!mergeFooterList.length || !footerSpanMethod) { - tableColumn = fixedColumn + // 如果是使用优化模式 + if (allColumnFooterOverflow) { + // 如果不支持优化模式 + if (spanMethod || footerSpanMethod) { + renderColumnList = visibleColumn } else { - tableColumn = visibleColumn + renderColumnList = fixedColumn || [] } } else { - tableColumn = visibleColumn + renderColumnList = visibleColumn } } @@ -252,7 +267,7 @@ export default { on: ons }, [ fixedType - ? _e() + ? renderEmptyElement($xeTable) : h('div', { class: 'vxe-body--x-space', ref: 'xSpace' @@ -272,7 +287,7 @@ export default { */ h('colgroup', { ref: 'colgroup' - }, tableColumn.map((column: any, $columnIndex: any) => { + }, renderColumnList.map((column: any, $columnIndex: any) => { return h('col', { attrs: { name: column.id @@ -293,7 +308,7 @@ export default { */ h('tfoot', { ref: 'tfoot' - }, renderHeads(h, this, footerTableData)) + }, renderHeads(h, this, renderColumnList)) ]) ]) }, diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts index a491b80b5f..24983530cf 100644 --- a/packages/table/src/header.ts +++ b/packages/table/src/header.ts @@ -7,7 +7,7 @@ import { convertHeaderColumnToRows, getColReMinWidth } from './util' import type { VxeTableDefines } from '../../../types' -const { renderer } = VxeUI +const { renderer, renderEmptyElement } = VxeUI const cellType = 'header' @@ -209,17 +209,35 @@ export default { elemStore[`${prefix}repair`] = null }, render (h: CreateElement) { - const { _e, $parent: $xetable, fixedType, headerColumn, tableColumn, fixedColumn } = this - const { tId, isGroup, visibleColumn, showHeaderOverflow: allColumnHeaderOverflow, scrollXLoad, scrollbarWidth } = $xetable + const props = this + const $xeTable = this.$parent + const tableProps = $xeTable + const tableReactData = $xeTable + const tableInternalData = $xeTable + + const { tId } = $xeTable + const { fixedType, fixedColumn, tableColumn } = props + const { headerColumn } = this + + const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps + const { isGroup, scrollbarWidth } = tableReactData + const { visibleColumn } = tableInternalData let headerGroups = headerColumn let renderColumnList = tableColumn if (isGroup) { renderColumnList = visibleColumn } else { - // 如果是使用优化模式 if (fixedType) { - if (scrollXLoad || allColumnHeaderOverflow) { - renderColumnList = fixedColumn + // 如果是使用优化模式 + if (allColumnHeaderOverflow) { + // 如果不支持优化模式 + if (spanMethod || footerSpanMethod) { + renderColumnList = visibleColumn + } else { + renderColumnList = fixedColumn || [] + } + } else { + renderColumnList = visibleColumn } } headerGroups = [renderColumnList] @@ -231,7 +249,7 @@ export default { } }, [ fixedType - ? _e() + ? renderEmptyElement($xeTable) : h('div', { class: 'vxe-body--x-space', ref: 'xSpace' diff --git a/packages/table/src/methods.ts b/packages/table/src/methods.ts index 96e4fefbb4..9b5c7a17ca 100644 --- a/packages/table/src/methods.ts +++ b/packages/table/src/methods.ts @@ -2969,11 +2969,8 @@ const Methods = { editStore, currentRow, mouseConfig, - keyboardConfig, - keyboardOpts, spanMethod, - mergeList, - mergeFooterList, + expandColumn, footerSpanMethod, isAllOverflow, visibleColumn @@ -3034,10 +3031,17 @@ const Methods = { if (isGroup) { renderColumnList = visibleColumn } else { - // 如果是使用优化模式 if (fixedType) { - if (scrollXLoad || allColumnHeaderOverflow) { - renderColumnList = fixedColumn + // 如果是使用优化模式 + if (allColumnHeaderOverflow) { + // 如果不支持优化模式 + if (spanMethod || footerSpanMethod) { + renderColumnList = visibleColumn + } else { + renderColumnList = fixedColumn || [] + } + } else { + renderColumnList = visibleColumn } } } @@ -3129,19 +3133,20 @@ const Methods = { let tWidth = tableWidth let renderColumnList = tableColumn - // 如果是使用优化模式 if (fixedType) { - // 如果存在展开行使用全量渲染 - if (!this.expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) { - if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) { - renderColumnList = fixedColumn - } else { + // 如果是使用优化模式 + if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) { + // 如果不支持优化模式 + if (expandColumn || spanMethod || footerSpanMethod) { renderColumnList = visibleColumn + } else { + renderColumnList = fixedColumn || [] } } else { renderColumnList = visibleColumn } } + tWidth = renderColumnList.reduce((previous: any, column: any) => previous + column.renderWidth, 0) if (tableElem) { @@ -3156,19 +3161,20 @@ const Methods = { let tWidth = tableWidth let renderColumnList = tableColumn - // 如果是使用优化模式 if (fixedType) { - // 如果存在展开行使用全量渲染 - if (!this.expandColumn && (scrollXLoad || allColumnFooterOverflow)) { - if (!mergeFooterList.length || !footerSpanMethod) { - renderColumnList = fixedColumn - } else { + // 如果是使用优化模式 + if (allColumnFooterOverflow) { + // 如果不支持优化模式 + if (spanMethod || footerSpanMethod) { renderColumnList = visibleColumn + } else { + renderColumnList = fixedColumn || [] } } else { renderColumnList = visibleColumn } } + tWidth = renderColumnList.reduce((previous: any, column: any) => previous + column.renderWidth, 0) if (isNodeElement(wrapperElem)) {