From db36cc12a176ce8f2b83458db959b511dcb84c54 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Fri, 27 Sep 2024 18:19:15 +0800 Subject: [PATCH] releases 4.7.84 --- package.json | 4 +- packages/locale/lang/en-US.ts | 3 +- packages/locale/lang/es-ES.ts | 3 +- packages/locale/lang/hu-HU.ts | 3 +- packages/locale/lang/ja-JP.ts | 3 +- packages/locale/lang/ko-KR.ts | 3 +- packages/locale/lang/pt-BR.ts | 3 +- packages/locale/lang/ru-RU.ts | 3 +- packages/locale/lang/uk-UA.ts | 3 +- packages/locale/lang/vi-VN.ts | 3 +- packages/locale/lang/zh-CHT.ts | 3 +- packages/locale/lang/zh-CN.ts | 3 +- packages/table/render/index.ts | 14 + packages/table/src/table.ts | 466 ++++++++++++++++----------------- styles/components/table.scss | 6 +- 15 files changed, 276 insertions(+), 247 deletions(-) diff --git a/package.json b/package.json index c019398047..aa00b71686 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.7.83", + "version": "4.7.84", "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.2.7" + "vxe-pc-ui": "^4.2.9" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts index 65d21bea24..9ba3ae313a 100644 --- a/packages/locale/lang/en-US.ts +++ b/packages/locale/lang/en-US.ts @@ -200,7 +200,8 @@ export default { zoomIn: 'Maximize', zoomOut: 'Reduction', close: 'Close', - miniMaxSize: 'The number of minimized Windows cannot exceed {0}.' + miniMaxSize: 'The number of minimized Windows cannot exceed {0}.', + footPropErr: '"show-footer" is only used to enable table tails and needs to be used in conjunction with "show-confirm-button" | "show-cancel-button" | slots' }, drawer: { close: 'Close' diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts index 4a19d30287..603cdf5aa9 100644 --- a/packages/locale/lang/es-ES.ts +++ b/packages/locale/lang/es-ES.ts @@ -200,7 +200,8 @@ export default { zoomIn: 'Maximize', zoomOut: 'Reducir', close: 'Cerrar', - miniMaxSize: 'The number of minimized Windows cannot exceed {0}.' + miniMaxSize: 'The number of minimized Windows cannot exceed {0}.', + footPropErr: '"show-footer" is only used to enable table tails and needs to be used in conjunction with "show-confirm-button" | "show-cancel-button" | slots' }, drawer: { close: 'Cerrar' diff --git a/packages/locale/lang/hu-HU.ts b/packages/locale/lang/hu-HU.ts index d3b57216bb..91909c0bd5 100644 --- a/packages/locale/lang/hu-HU.ts +++ b/packages/locale/lang/hu-HU.ts @@ -200,7 +200,8 @@ export default { zoomIn: 'maximalizálni', zoomOut: 'csökkentés', close: 'bezárás', - miniMaxSize: 'A minimalizált ablakok száma nem haladhatja meg a következőt: {0}' + miniMaxSize: 'A minimalizált ablakok száma nem haladhatja meg a következőt: {0}', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: 'bezárás' diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts index eb5b6ebce8..24830557b4 100644 --- a/packages/locale/lang/ja-JP.ts +++ b/packages/locale/lang/ja-JP.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '縮小', close: '閉じる', - miniMaxSize: 'The number of minimized Windows cannot exceed {0}.' + miniMaxSize: 'The number of minimized Windows cannot exceed {0}.', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '閉じる' diff --git a/packages/locale/lang/ko-KR.ts b/packages/locale/lang/ko-KR.ts index 7077578efc..66dc06627e 100644 --- a/packages/locale/lang/ko-KR.ts +++ b/packages/locale/lang/ko-KR.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '还原', close: '关闭', - miniMaxSize: '最小化窗口的数量不能超过 {0} 个' + miniMaxSize: '最小化窗口的数量不能超过 {0} 个', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '关闭' diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts index 8a0987ccaf..a068ada210 100644 --- a/packages/locale/lang/pt-BR.ts +++ b/packages/locale/lang/pt-BR.ts @@ -200,7 +200,8 @@ export default { zoomIn: 'Maximize', zoomOut: 'Restaurar', close: 'Fechar', - miniMaxSize: 'The number of minimized Windows cannot exceed {0}.' + miniMaxSize: 'The number of minimized Windows cannot exceed {0}.', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: 'Fechar' diff --git a/packages/locale/lang/ru-RU.ts b/packages/locale/lang/ru-RU.ts index c4d8be36c4..2999d2e4ce 100644 --- a/packages/locale/lang/ru-RU.ts +++ b/packages/locale/lang/ru-RU.ts @@ -200,7 +200,8 @@ export default { zoomIn: 'максимизировать', zoomOut: 'снижение', close: 'закрытие', - miniMaxSize: 'Количество свернутых окон не может превышать {0}.' + miniMaxSize: 'Количество свернутых окон не может превышать {0}.', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: 'закрытие' diff --git a/packages/locale/lang/uk-UA.ts b/packages/locale/lang/uk-UA.ts index 7077578efc..66dc06627e 100644 --- a/packages/locale/lang/uk-UA.ts +++ b/packages/locale/lang/uk-UA.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '还原', close: '关闭', - miniMaxSize: '最小化窗口的数量不能超过 {0} 个' + miniMaxSize: '最小化窗口的数量不能超过 {0} 个', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '关闭' diff --git a/packages/locale/lang/vi-VN.ts b/packages/locale/lang/vi-VN.ts index 7077578efc..66dc06627e 100644 --- a/packages/locale/lang/vi-VN.ts +++ b/packages/locale/lang/vi-VN.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '还原', close: '关闭', - miniMaxSize: '最小化窗口的数量不能超过 {0} 个' + miniMaxSize: '最小化窗口的数量不能超过 {0} 个', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '关闭' diff --git a/packages/locale/lang/zh-CHT.ts b/packages/locale/lang/zh-CHT.ts index 969a49f43d..b341d6f3ce 100644 --- a/packages/locale/lang/zh-CHT.ts +++ b/packages/locale/lang/zh-CHT.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '還原', close: '關閉', - miniMaxSize: '最小化視窗的數量不能超過 {0} 個' + miniMaxSize: '最小化視窗的數量不能超過 {0} 個', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '關閉' diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts index 7077578efc..66dc06627e 100644 --- a/packages/locale/lang/zh-CN.ts +++ b/packages/locale/lang/zh-CN.ts @@ -200,7 +200,8 @@ export default { zoomIn: '最大化', zoomOut: '还原', close: '关闭', - miniMaxSize: '最小化窗口的数量不能超过 {0} 个' + miniMaxSize: '最小化窗口的数量不能超过 {0} 个', + footPropErr: 'show-footer 仅用于启用表尾，需配合 show-confirm-button | show-cancel-button | 插槽使用' }, drawer: { close: '关闭' diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index b9374487ef..0129bc5878 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -746,6 +746,20 @@ renderer.mixin({ ] } }, + VxeTextEllipsis: { + renderTableDefault (renderOpts, params) { + const { row, column } = params + const { props } = renderOpts + const cellValue = getCellValue(row, column) + return [ + h(getDefaultComponent(renderOpts), { + ...props, + content: cellValue, + ...getEditOns(renderOpts, params) + }) + ] + } + }, // 以下已废弃 $input: { diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index aa4e271b8b..fb3b4fdd4e 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -6625,6 +6625,237 @@ export default defineComponent({ } } + const renderVN = () => { + const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props + const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData + const { leftList, rightList } = columnStore + const loadingSlot = slots.loading + const tipConfig = computeTipConfig.value + const validOpts = computeValidOpts.value + const checkboxOpts = computeCheckboxOpts.value + const treeOpts = computeTreeOpts.value + const rowOpts = computeRowOpts.value + const columnOpts = computeColumnOpts.value + const vSize = computeSize.value + const tableBorder = computeTableBorder.value + const mouseOpts = computeMouseOpts.value + const validTipOpts = computeValidTipOpts.value + const loadingOpts = computeLoadingOpts.value + const isMenu = computeIsMenu.value + const currLoading = reactData._isLoading || loading + return h('div', { + ref: refElem, + class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, { + [`size--${vSize}`]: vSize, + [`valid-msg--${validOpts.msgMode}`]: !!editRules, + 'vxe-editable': !!editConfig, + 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete', + 'cell--highlight': highlightCell, + 'cell--selected': mouseConfig && mouseOpts.selected, + 'cell--area': mouseConfig && mouseOpts.area, + 'row--highlight': rowOpts.isHover || highlightHoverRow, + 'column--highlight': columnOpts.isHover || highlightHoverColumn, + 'checkbox--range': checkboxOpts.range, + 'column--calc': isCalcColumn, + 'is--header': showHeader, + 'is--footer': showFooter, + 'is--group': isGroup, + 'is--tree-line': treeConfig && (treeOpts.showLine || treeOpts.line), + 'is--fixed-left': leftList.length, + 'is--fixed-right': rightList.length, + 'is--animat': !!props.animat, + 'is--padding': props.padding, + 'is--round': props.round, + 'is--stripe': !treeConfig && stripe, + 'is--loading': currLoading, + 'is--empty': !currLoading && !tableData.length, + 'is--scroll-y': overflowY, + 'is--scroll-x': overflowX, + 'is--virtual-x': scrollXLoad, + 'is--virtual-y': scrollYLoad + }], + spellcheck: false, + onKeydown: keydownEvent + }, [ + /** + * 隐藏列 + */ + h('div', { + class: 'vxe-table-slots' + }, slots.default ? slots.default({}) : []), + h('div', { + class: 'vxe-table--render-wrapper' + }, [ + h('div', { + class: 'vxe-table--main-wrapper' + }, [ + /** + * 表头 + */ + showHeader + ? h(TableHeaderComponent, { + ref: refTableHeader, + tableData, + tableColumn, + tableGroupColumn + }) + : createCommentVNode(), + /** + * 表体 + */ + h(TableBodyComponent, { + ref: refTableBody, + tableData, + tableColumn + }), + /** + * 表尾 + */ + showFooter + ? h(TableFooterComponent, { + ref: refTableFooter, + footerTableData, + tableColumn + }) + : createCommentVNode() + ]), + h('div', { + class: 'vxe-table--fixed-wrapper' + }, [ + /** + * 左侧固定区域 + */ + leftList && leftList.length && overflowX ? renderFixed('left') : createCommentVNode(), + /** + * 右侧固定区域 + */ + rightList && rightList.length && overflowX ? renderFixed('right') : createCommentVNode() + ]) + ]), + /** + * 空数据 + */ + h('div', { + ref: refEmptyPlaceholder, + class: 'vxe-table--empty-placeholder' + }, [ + h('div', { + class: 'vxe-table--empty-content' + }, renderEmptyContenet()) + ]), + /** + * 边框线 + */ + h('div', { + class: 'vxe-table--border-line' + }), + /** + * 列宽线 + */ + h('div', { + ref: refCellResizeBar, + class: 'vxe-table--resizable-bar', + style: overflowX + ? { + 'padding-bottom': `${scrollbarHeight}px` + } + : null + }), + /** + * 加载中 + */ + VxeUILoadingComponent + ? h(VxeUILoadingComponent, { + class: 'vxe-table--loading', + modelValue: currLoading, + icon: loadingOpts.icon, + text: loadingOpts.text + }, loadingSlot + ? { + default: () => loadingSlot({ $table: $xeTable, $grid: $xeGrid }) + } + : {}) + : createCommentVNode(), + /** + * 自定义列 + */ + initStore.custom + ? h(TableCustomPanelComponent, { + ref: refTableCustom, + customStore + }) + : createCommentVNode(), + /** + * 筛选 + */ + initStore.filter + ? h(TableFilterPanelComponent, { + ref: refTableFilter, + filterStore + }) + : createCommentVNode(), + /** + * 导入 + */ + initStore.import && props.importConfig + ? h(TableImportPanelComponent, { + defaultOptions: reactData.importParams, + storeData: reactData.importStore + }) + : createCommentVNode(), + /** + * 导出 + */ + initStore.export && (props.exportConfig || props.printConfig) + ? h(TableExportPanelComponent, { + defaultOptions: reactData.exportParams, + storeData: reactData.exportStore + }) + : createCommentVNode(), + /** + * 快捷菜单 + */ + isMenu + ? h(TableMenuPanelComponent, { + ref: refTableMenu + }) + : createCommentVNode(), + /** + * 提示相关 + */ + VxeUITooltipComponent + ? h('div', {}, [ + /** + * 通用提示 + */ + h(VxeUITooltipComponent, { + ref: refCommTooltip, + isArrow: false, + enterable: false + }), + /** + * 工具提示 + */ + h(VxeUITooltipComponent, Object.assign({ + ref: refTooltip + }, tipConfig, tooltipStore.currOpts)), + /** + * 校验提示 + */ + props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') + ? h(VxeUITooltipComponent, { + ref: refValidTooltip, + class: [{ + 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete' + }, 'vxe-table--valid-error'], + ...(validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : {}) as any + }) + : createCommentVNode() + ]) + : createCommentVNode() + ]) + } + const dataFlag = ref(0) watch(() => props.data ? props.data.length : -1, () => { dataFlag.value++ @@ -7006,239 +7237,6 @@ export default defineComponent({ tablePrivateMethods.preventEvent(null, 'unmounted', { $table: $xeTable }) }) - const renderVN = () => { - const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props - const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData - const { leftList, rightList } = columnStore - const loadingSlot = slots.loading - const tipConfig = computeTipConfig.value - const validOpts = computeValidOpts.value - const checkboxOpts = computeCheckboxOpts.value - const treeOpts = computeTreeOpts.value - const rowOpts = computeRowOpts.value - const columnOpts = computeColumnOpts.value - const vSize = computeSize.value - const tableBorder = computeTableBorder.value - const mouseOpts = computeMouseOpts.value - const validTipOpts = computeValidTipOpts.value - const loadingOpts = computeLoadingOpts.value - const isMenu = computeIsMenu.value - const currLoading = reactData._isLoading || loading - return h('div', { - ref: refElem, - class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, { - [`size--${vSize}`]: vSize, - [`valid-msg--${validOpts.msgMode}`]: !!editRules, - 'vxe-editable': !!editConfig, - 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete', - 'cell--highlight': highlightCell, - 'cell--selected': mouseConfig && mouseOpts.selected, - 'cell--area': mouseConfig && mouseOpts.area, - 'row--highlight': rowOpts.isHover || highlightHoverRow, - 'column--highlight': columnOpts.isHover || highlightHoverColumn, - 'checkbox--range': checkboxOpts.range, - 'column--calc': isCalcColumn, - 'is--header': showHeader, - 'is--footer': showFooter, - 'is--group': isGroup, - 'is--tree-line': treeConfig && (treeOpts.showLine || treeOpts.line), - 'is--fixed-left': leftList.length, - 'is--fixed-right': rightList.length, - 'is--animat': !!props.animat, - 'is--padding': props.padding, - 'is--round': props.round, - 'is--stripe': !treeConfig && stripe, - 'is--loading': currLoading, - 'is--empty': !currLoading && !tableData.length, - 'is--scroll-y': overflowY, - 'is--scroll-x': overflowX, - 'is--virtual-x': scrollXLoad, - 'is--virtual-y': scrollYLoad - }], - spellcheck: false, - onKeydown: keydownEvent - }, [ - /** - * 隐藏列 - */ - h('div', { - class: 'vxe-table-slots' - }, slots.default ? slots.default({}) : []), - h('div', { - class: 'vxe-table--render-wrapper' - }, [ - h('div', { - class: 'vxe-table--main-wrapper' - }, [ - /** - * 表头 - */ - showHeader - ? h(TableHeaderComponent, { - ref: refTableHeader, - tableData, - tableColumn, - tableGroupColumn - }) - : createCommentVNode(), - /** - * 表体 - */ - h(TableBodyComponent, { - ref: refTableBody, - tableData, - tableColumn - }), - /** - * 表尾 - */ - showFooter - ? h(TableFooterComponent, { - ref: refTableFooter, - footerTableData, - tableColumn - }) - : createCommentVNode() - ]), - h('div', { - class: 'vxe-table--fixed-wrapper' - }, [ - /** - * 左侧固定区域 - */ - leftList && leftList.length && overflowX ? renderFixed('left') : createCommentVNode(), - /** - * 右侧固定区域 - */ - rightList && rightList.length && overflowX ? renderFixed('right') : createCommentVNode() - ]) - ]), - /** - * 空数据 - */ - h('div', { - ref: refEmptyPlaceholder, - class: 'vxe-table--empty-placeholder' - }, [ - h('div', { - class: 'vxe-table--empty-content' - }, renderEmptyContenet()) - ]), - /** - * 边框线 - */ - h('div', { - class: 'vxe-table--border-line' - }), - /** - * 列宽线 - */ - h('div', { - ref: refCellResizeBar, - class: 'vxe-table--resizable-bar', - style: overflowX - ? { - 'padding-bottom': `${scrollbarHeight}px` - } - : null - }), - /** - * 加载中 - */ - VxeUILoadingComponent - ? h(VxeUILoadingComponent, { - class: 'vxe-table--loading', - modelValue: currLoading, - icon: loadingOpts.icon, - text: loadingOpts.text - }, loadingSlot - ? { - default: () => loadingSlot({ $table: $xeTable, $grid: $xeGrid }) - } - : {}) - : createCommentVNode(), - /** - * 自定义列 - */ - initStore.custom - ? h(TableCustomPanelComponent, { - ref: refTableCustom, - customStore - }) - : createCommentVNode(), - /** - * 筛选 - */ - initStore.filter - ? h(TableFilterPanelComponent, { - ref: refTableFilter, - filterStore - }) - : createCommentVNode(), - /** - * 导入 - */ - initStore.import && props.importConfig - ? h(TableImportPanelComponent, { - defaultOptions: reactData.importParams, - storeData: reactData.importStore - }) - : createCommentVNode(), - /** - * 导出 - */ - initStore.export && (props.exportConfig || props.printConfig) - ? h(TableExportPanelComponent, { - defaultOptions: reactData.exportParams, - storeData: reactData.exportStore - }) - : createCommentVNode(), - /** - * 快捷菜单 - */ - isMenu - ? h(TableMenuPanelComponent, { - ref: refTableMenu - }) - : createCommentVNode(), - /** - * 提示相关 - */ - VxeUITooltipComponent - ? h('div', {}, [ - /** - * 通用提示 - */ - h(VxeUITooltipComponent, { - ref: refCommTooltip, - isArrow: false, - enterable: false - }), - /** - * 工具提示 - */ - h(VxeUITooltipComponent, Object.assign({ - ref: refTooltip - }, tipConfig, tooltipStore.currOpts)), - /** - * 校验提示 - */ - props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') - ? h(VxeUITooltipComponent, { - ref: refValidTooltip, - class: [{ - 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete' - }, 'vxe-table--valid-error'], - ...(validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : {}) as any - }) - : createCommentVNode() - ]) - : createCommentVNode() - ]) - } - - $xeTable.renderVN = renderVN - if (process.env.VUE_APP_VXE_ENV === 'development') { nextTick(() => { if (props.loading) { @@ -7260,6 +7258,8 @@ export default defineComponent({ provide('$xeColgroup', null) provide('$xeTable', $xeTable) + $xeTable.renderVN = renderVN + return $xeTable }, render () { diff --git a/styles/components/table.scss b/styles/components/table.scss index b1b9ee8d11..0e3e82ba70 100644 --- a/styles/components/table.scss +++ b/styles/components/table.scss @@ -132,8 +132,12 @@ } .vxe-body--column { &.col--height { + &.col--active { + & > .vxe-cell { + height: 100%; + } + } & > .vxe-cell { - height: 100%; & > .vxe-textarea, & > .vxe-default-textarea { height: 100%;