diff --git a/package.json b/package.json index e4b02e5222..ab0fb56489 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.9.29", + "version": "4.9.30", "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.3.35" + "vxe-pc-ui": "^4.3.36" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/locale/lang/ar-EG.ts b/packages/locale/lang/ar-EG.ts index 7f1d486504..11e8d16069 100644 --- a/packages/locale/lang/ar-EG.ts +++ b/packages/locale/lang/ar-EG.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/de-DE.ts b/packages/locale/lang/de-DE.ts index 94aea32605..4455cad519 100644 --- a/packages/locale/lang/de-DE.ts +++ b/packages/locale/lang/de-DE.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts index 3c5b088dbf..92807b3db2 100644 --- a/packages/locale/lang/en-US.ts +++ b/packages/locale/lang/en-US.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Preview', operBtn: { diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts index 31518ef649..537eac91cb 100644 --- a/packages/locale/lang/es-ES.ts +++ b/packages/locale/lang/es-ES.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Preview', operBtn: { diff --git a/packages/locale/lang/fr-FR.ts b/packages/locale/lang/fr-FR.ts index 7cdcb8bc79..80bf8f5a8e 100644 --- a/packages/locale/lang/fr-FR.ts +++ b/packages/locale/lang/fr-FR.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/hu-HU.ts b/packages/locale/lang/hu-HU.ts index e4ccfaf154..3f174f21ad 100644 --- a/packages/locale/lang/hu-HU.ts +++ b/packages/locale/lang/hu-HU.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Előnézet', operBtn: { diff --git a/packages/locale/lang/hy-AM.ts b/packages/locale/lang/hy-AM.ts index ea896a044f..1bb6cfa28c 100644 --- a/packages/locale/lang/hy-AM.ts +++ b/packages/locale/lang/hy-AM.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts index a9ed08a7fd..0adea061c5 100644 --- a/packages/locale/lang/ja-JP.ts +++ b/packages/locale/lang/ja-JP.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Preview', operBtn: { diff --git a/packages/locale/lang/ko-KR.ts b/packages/locale/lang/ko-KR.ts index a25525a6b5..7c47908985 100644 --- a/packages/locale/lang/ko-KR.ts +++ b/packages/locale/lang/ko-KR.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/nb-NO.ts b/packages/locale/lang/nb-NO.ts index 5a60d19c06..5cc1973a47 100644 --- a/packages/locale/lang/nb-NO.ts +++ b/packages/locale/lang/nb-NO.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts index 72aceebe2c..898156331e 100644 --- a/packages/locale/lang/pt-BR.ts +++ b/packages/locale/lang/pt-BR.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Preview', operBtn: { diff --git a/packages/locale/lang/ru-RU.ts b/packages/locale/lang/ru-RU.ts index d5dc0de425..b3be15e6bb 100644 --- a/packages/locale/lang/ru-RU.ts +++ b/packages/locale/lang/ru-RU.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'Предварительный просмотр', operBtn: { diff --git a/packages/locale/lang/ug-CN.ts b/packages/locale/lang/ug-CN.ts index 9bed511fef..5d87937fd4 100644 --- a/packages/locale/lang/ug-CN.ts +++ b/packages/locale/lang/ug-CN.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: 'كۆرۈش', operBtn: { diff --git a/packages/locale/lang/uk-UA.ts b/packages/locale/lang/uk-UA.ts index dfa24ba44c..8f63cb5534 100644 --- a/packages/locale/lang/uk-UA.ts +++ b/packages/locale/lang/uk-UA.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/vi-VN.ts b/packages/locale/lang/vi-VN.ts index dfa24ba44c..8f63cb5534 100644 --- a/packages/locale/lang/vi-VN.ts +++ b/packages/locale/lang/vi-VN.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '$' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/locale/lang/zh-CHT.ts b/packages/locale/lang/zh-CHT.ts index 4d31c1643e..b1c448b3fb 100644 --- a/packages/locale/lang/zh-CHT.ts +++ b/packages/locale/lang/zh-CHT.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '¥' + }, imagePreview: { popupTitle: '預覽', operBtn: { diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts index ea896a044f..babc48d5a3 100644 --- a/packages/locale/lang/zh-CN.ts +++ b/packages/locale/lang/zh-CN.ts @@ -289,6 +289,9 @@ export default { } } }, + numberInput: { + currencySymbol: '¥' + }, imagePreview: { popupTitle: '预览', operBtn: { diff --git a/packages/table/module/export/hook.ts b/packages/table/module/export/hook.ts index 002b69ba9f..8327148f61 100644 --- a/packages/table/module/export/hook.ts +++ b/packages/table/module/export/hook.ts @@ -16,7 +16,7 @@ const csvBOM = '\ufeff' const enterSymbol = '\r\n' function defaultFilterExportColumn (column: any) { - return column.property || ['seq', 'checkbox', 'radio'].indexOf(column.type) > -1 + return column.field || ['seq', 'checkbox', 'radio'].indexOf(column.type) > -1 } const getConvertColumns = (columns: any) => { @@ -271,7 +271,7 @@ function clearColumnConvert (columns: any) { function checkImportData (columns: any[], fields: string[]) { const tableFields: string[] = [] columns.forEach((column) => { - const field = column.property + const field = column.field if (field) { tableFields.push(field) } @@ -313,7 +313,7 @@ hooks.add('tableExportModule', { function getHeaderTitle (opts: any, column: any) { const columnOpts = computeColumnOpts.value const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod - return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.original ? column.property : column.getTitle()) || '') + return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.original ? column.field : column.getTitle()) || '') } const toBooleanValue = (cellValue: any) => { @@ -414,7 +414,7 @@ hooks.add('tableExportModule', { if (!bodyExportMethod && renderOpts && renderOpts.name) { const compConf = renderer.get(renderOpts.name) if (compConf) { - bodyExportMethod = compConf.exportMethod + bodyExportMethod = compConf.tableExportMethod || compConf.exportMethod } } if (bodyExportMethod) { @@ -995,13 +995,13 @@ hooks.add('tableExportModule', { } else { const colid = item.id || item.colId const type = item.type - const field = item.property || item.field + const field = item.field if (colid) { return column.id === colid } else if (field && type) { - return column.property === field && column.type === type + return column.field === field && column.type === type } else if (field) { - return column.property === field + return column.field === field } else if (type) { return column.type === type } @@ -1059,7 +1059,7 @@ hooks.add('tableExportModule', { const { tableFullColumn, afterFullData } = internalData const exportOpts = computeExportOpts.value const treeOpts = computeTreeOpts.value - const opts: any = Object.assign({ + const opts = Object.assign({ // filename: '', // sheetName: '', // original: false, @@ -1083,16 +1083,29 @@ hooks.add('tableExportModule', { }, exportOpts, { print: false }, options) - const { type, mode, columns, original, beforeExportMethod } = opts + const { type, mode, columns, original, beforeExportMethod, includeFields, excludeFields } = opts let groups: any[] = [] const customCols = columns && columns.length ? columns : null let columnFilterMethod = opts.columnFilterMethod // 如果设置源数据,则默认导出设置了字段的列 if (!customCols && !columnFilterMethod) { - columnFilterMethod = original ? ({ column }: any) => column.property : ({ column }: any) => defaultFilterExportColumn(column) + columnFilterMethod = ({ column }) => { + if (excludeFields) { + if (XEUtils.includes(excludeFields, column.field)) { + return false + } + } + if (includeFields) { + if (XEUtils.includes(includeFields, column.field)) { + return true + } + return false + } + return original ? column.field : defaultFilterExportColumn(column) + } } if (customCols) { - opts._isCustomColumn = true + (opts as any)._isCustomColumn = true groups = XEUtils.searchTree( XEUtils.mapTree(customCols, (item: any) => { let targetColumn @@ -1104,11 +1117,11 @@ hooks.add('tableExportModule', { } else { const colid = item.id || item.colId const type = item.type - const field = item.property || item.field + const field = item.field if (colid) { targetColumn = $xeTable.getColumnById(colid) } else if (field && type) { - targetColumn = tableFullColumn.find((column: any) => column.property === field && column.type === type) + targetColumn = tableFullColumn.find((column: any) => column.field === field && column.type === type) } else if (field) { targetColumn = $xeTable.getColumnByField(field) } else if (type) { @@ -1141,7 +1154,7 @@ hooks.add('tableExportModule', { }, { children: 'childNodes' }) // 构建分组层级 opts.columns = cols - opts.colgroups = convertToRows(groups) + ;(opts as any).colgroups = convertToRows(groups) if (!opts.filename) { opts.filename = getI18n(opts.original ? 'vxe.table.expOriginFilename' : 'vxe.table.expFilename', [XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss')]) } @@ -1163,7 +1176,7 @@ hooks.add('tableExportModule', { if (!opts.print) { if (beforeExportMethod) { - beforeExportMethod({ options: opts, $table: $xeTable, $grid: $xeGrid }) + beforeExportMethod({ options: opts, $table: $xeTable, $grid: $xeGrid } as any) } } if (!opts.data) { diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index e168db1579..a928d97f6c 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -578,7 +578,8 @@ renderer.mixin({ renderTableCell (renderOpts, params) { const { props = {} } = renderOpts const { row, column } = params - const digits = props.digits || getConfig().input?.digits || 2 + const inputConfig = getConfig().input || {} + const digits = props.digits || inputConfig.digits || 2 let cellValue = XEUtils.get(row, column.field) if (cellValue) { switch (props.type) { @@ -609,12 +610,17 @@ renderer.mixin({ const { type } = props let cellValue = XEUtils.get(row, column.field) if (cellValue) { + const numberInputConfig = getConfig().numberInput || {} if (type === 'float') { - const digits = props.digits || getConfig().numberInput.digits || 1 + const digits = props.digits || numberInputConfig.digits || 1 cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits) } else if (type === 'amount') { - const digits = props.digits || getConfig().numberInput.digits || 2 + const digits = props.digits || numberInputConfig.digits || 2 cellValue = XEUtils.commafy(XEUtils.toNumber(cellValue), { digits }) + const showCurrency = props.showCurrency + if (XEUtils.isBoolean(showCurrency) ? showCurrency : numberInputConfig.showCurrency) { + cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}` + } } } return getCellLabelVNs(renderOpts, params, cellValue) @@ -626,11 +632,12 @@ renderer.mixin({ // 兼容老模式 const cellValue = XEUtils.isArray(row) ? row[_columnIndex] : XEUtils.get(row, column.field) if (XEUtils.isNumber(cellValue)) { + const numberInputConfig = getConfig().numberInput || {} if (type === 'float') { - const digits = props.digits || getConfig().numberInput.digits || 1 + const digits = props.digits || numberInputConfig.digits || 1 return XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits) } else if (type === 'amount') { - const digits = props.digits || getConfig().numberInput.digits || 2 + const digits = props.digits || numberInputConfig.digits || 2 return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits }) } } @@ -638,7 +645,12 @@ renderer.mixin({ }, renderTableDefault: defaultEditRender, renderTableFilter: defaultFilterRender, - tableFilterDefaultMethod: handleInputFilterMethod + tableFilterDefaultMethod: handleInputFilterMethod, + tableExportMethod (params) { + const { row, column } = params + const cellValue = XEUtils.get(row, column.field) + return cellValue + } }, VxeDatePicker: { tableAutoFocus: 'input', diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index 10f1363989..5588eb5b84 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -363,6 +363,7 @@ export default defineComponent({ ) } } + const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto') return h('td', { class: [ @@ -376,6 +377,7 @@ export default defineComponent({ 'col--tree-node': treeNode, 'col--edit': isEdit, 'col--ellipsis': hasEllipsis, + 'fixed--width': !isAutoCellWidth, 'fixed--hidden': fixedHiddenColumn, 'is--drag-cell': isColDragCell, 'is--drag-disabled': isDisabledDrag, diff --git a/packages/table/src/footer.ts b/packages/table/src/footer.ts index 9091f4f0be..54f8670a8a 100644 --- a/packages/table/src/footer.ts +++ b/packages/table/src/footer.ts @@ -193,11 +193,14 @@ export default defineComponent({ attrs.colspan = colspan } } + const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto') + return h('td', { class: ['vxe-footer--column', column.id, { [`col--${footAlign}`]: footAlign, [`col--${type}`]: type, 'col--last': $columnIndex === tableColumn.length - 1, + 'fixed--width': !isAutoCellWidth, 'fixed--hidden': fixedHiddenColumn, 'col--ellipsis': hasEllipsis, 'col--current': currentColumn === column diff --git a/packages/table/src/header.ts b/packages/table/src/header.ts index 0056337454..6a3ece0ea4 100644 --- a/packages/table/src/header.ts +++ b/packages/table/src/header.ts @@ -219,6 +219,8 @@ export default defineComponent({ thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent } } + const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto') + return h('th', { class: ['vxe-header--column', colid, { [`col--${headAlign}`]: headAlign, @@ -227,6 +229,7 @@ export default defineComponent({ 'col--fixed': column.fixed, 'col--group': isColGroup, 'col--ellipsis': hasEllipsis, + 'fixed--width': !isAutoCellWidth, 'fixed--hidden': fixedHiddenColumn, 'is--sortable': column.sortable, 'col--filter': !!column.filters, diff --git a/styles/components/table.scss b/styles/components/table.scss index c02d5d5fc0..02e6147c65 100644 --- a/styles/components/table.scss +++ b/styles/components/table.scss @@ -60,6 +60,96 @@ } /*默认的渲染*/ +.vxe-header--column, +.vxe-footer--column { + &.fixed--width { + & > .vxe-cell { + .vxe-default-input, + .vxe-default-textarea, + .vxe-default-select { + width: 100%; + } + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + .vxe-cell--tree-node { + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + } + } + } +} +.vxe-body--column { + &.fixed--width { + & > .vxe-cell { + & > .vxe-default-input, + & > .vxe-default-textarea, + & > .vxe-default-select { + width: 100%; + } + & > .vxe-input, + & > .vxe-textarea, + & > .vxe-select, + & > .vxe-tree-select, + & > .vxe-date-picker, + & > .vxe-number-input, + & > .vxe-ico-picker { + width: 100%; + } + & > .vxe-cell--tree-node { + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + } + } + } +} +.vxe-table--filter-template { + & > .vxe-default-input, + & > .vxe-default-textarea, + & > .vxe-default-select { + width: 100%; + } + & > .vxe-input, + & > .vxe-textarea, + & > .vxe-select, + & > .vxe-tree-select, + & > .vxe-date-picker, + & > .vxe-number-input, + & > .vxe-ico-picker { + width: 100%; + } + & > .vxe-cell--tree-node { + .vxe-input, + .vxe-textarea, + .vxe-select, + .vxe-tree-select, + .vxe-date-picker, + .vxe-number-input, + .vxe-ico-picker { + width: 100%; + } + } +} .vxe-cell, .vxe-table--filter-template { .vxe-default-input, @@ -71,7 +161,6 @@ .vxe-default-select { outline: 0; padding: 0 2px; - width: 100%; color: var(--vxe-ui-font-color); border-radius: var(--vxe-ui-border-radius); border: 1px solid var(--vxe-ui-input-border-color); @@ -107,15 +196,6 @@ height: var(--vxe-ui-input-height-default); } } - & > .vxe-input, - & > .vxe-textarea, - & > .vxe-select, - & > .vxe-tree-select, - & > .vxe-date-picker, - & > .vxe-number-input, - & > .vxe-ico-picker { - width: 100%; - } & > .vxe-input > .vxe-input--inner, & > .vxe-textarea > .vxe-textarea--inner { padding: 0 2px; @@ -125,15 +205,6 @@ resize: none; } & > .vxe-cell--tree-node { - .vxe-input, - .vxe-textarea, - .vxe-select, - .vxe-tree-select, - .vxe-date-picker, - .vxe-number-input, - .vxe-ico-picker { - width: 100%; - } .vxe-input > .vxe-input--inner, .vxe-textarea > .vxe-textarea--inner { padding: 0 2px;