From b9cf8eaeb9cbe77b3ba8711deb3564c2b514bccf Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Tue, 20 Aug 2024 16:44:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E6=B8=B2?= =?UTF-8?q?=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/grid/src/grid.ts | 33 +++-- packages/locale/lang/en-US.ts | 5 +- packages/locale/lang/es-ES.ts | 5 +- packages/locale/lang/hu-HU.ts | 5 +- packages/locale/lang/ja-JP.ts | 5 +- packages/locale/lang/ko-KR.ts | 5 +- packages/locale/lang/pt-BR.ts | 5 +- packages/locale/lang/ru-RU.ts | 5 +- packages/locale/lang/vi-VN.ts | 5 +- packages/locale/lang/zh-CN.ts | 5 +- packages/locale/lang/zh-TC.ts | 5 +- packages/table/module/custom/panel.ts | 9 +- packages/table/module/edit/hook.ts | 21 +-- packages/table/module/export/hook.ts | 16 ++- packages/table/render/index.ts | 179 ++++++++++++++------------ packages/table/src/table.ts | 28 +++- styles/components/table.scss | 9 +- 18 files changed, 215 insertions(+), 132 deletions(-) diff --git a/package.json b/package.json index ea3a460499..7e7dce77a1 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "vxe-pc-ui": "^4.0.94" + "vxe-pc-ui": "^4.0.96" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts index d1bd0b22af..2248d0db7a 100644 --- a/packages/grid/src/grid.ts +++ b/packages/grid/src/grid.ts @@ -220,6 +220,14 @@ export default defineComponent({ } } + const getFormData = () => { + const { proxyConfig } = props + const { formData } = reactData + const proxyOpts = computeProxyOpts.value + const formOpts = computeFormOpts.value + return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data + } + const initPages = () => { const { tablePage } = reactData const { pagerConfig } = props @@ -694,7 +702,7 @@ export default defineComponent({ const formOpts = computeFormOpts.value if (proxyConfig && isEnableConf(proxyOpts)) { if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) { - const formData: any = {} + const fData: any = {} formOpts.items.forEach(item => { const { field, itemRender } = item if (field) { @@ -707,10 +715,10 @@ export default defineComponent({ itemValue = defaultValue } } - formData[field] = itemValue + fData[field] = itemValue } }) - reactData.formData = formData + reactData.formData = fData } if (!proxyInited) { reactData.proxyInited = true @@ -733,7 +741,7 @@ export default defineComponent({ */ commitProxy (proxyTarget: string | VxeToolbarPropTypes.ButtonConfig, ...args: any[]) { const { toolbarConfig, pagerConfig, editRules, validConfig } = props - const { tablePage, formData } = reactData + const { tablePage } = reactData const isActiveMsg = computeIsActiveMsg.value const isRespMsg = computeIsRespMsg.value const proxyOpts = computeProxyOpts.value @@ -742,6 +750,7 @@ export default defineComponent({ const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts const resConfigs = proxyOpts.response || proxyOpts.props || {} const $xeTable = refTable.value + const formData = getFormData() let button: VxeToolbarPropTypes.ButtonConfig | null = null let code: string | null = null if (XEUtils.isString(proxyTarget)) { @@ -1055,6 +1064,7 @@ export default defineComponent({ revert () { return handleZoom() }, + getFormData, getFormItems (itemIndex?: number): any { const formOpts = computeFormOpts.value const { formConfig } = props @@ -1072,7 +1082,7 @@ export default defineComponent({ return { data: reactData.tableData, filter: reactData.filterData, - form: reactData.formData, + form: getFormData(), sort: sortData.length ? sortData[0] : {}, sorts: sortData, pager: reactData.tablePage, @@ -1231,12 +1241,13 @@ export default defineComponent({ onMounted(() => { nextTick(() => { - const { data, columns, proxyConfig } = props - const proxyOpts = computeProxyOpts.value - const formOpts = computeFormOpts.value - if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) { - errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config']) - } + const { columns } = props + // const { data, columns, proxyConfig } = props + // const proxyOpts = computeProxyOpts.value + // const formOpts = computeFormOpts.value + // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) { + // errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config']) + // } // if (process.env.VUE_APP_VXE_ENV === 'development') { // if (proxyOpts.props) { diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts index 7db7f0b24c..14cf2732a1 100644 --- a/packages/locale/lang/en-US.ts +++ b/packages/locale/lang/en-US.ts @@ -306,7 +306,9 @@ export default { reUpload: 'Re upload', uploadProgress: 'Uploading {0}%', uploadErr: 'Fail to upload', - uploadSuccess: 'Successfully upload' + uploadSuccess: 'Successfully upload', + moreBtnText: 'More ({0})', + viewItemTitle: 'click to view' }, formDesign: { formName: 'Form name', @@ -337,6 +339,7 @@ export default { group: { base: 'Base control', layout: 'Layout control', + system: 'System control', advanced: 'Advanced control' }, copyTitle: 'Copy_{0}', diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts index 7b01191e5c..4bee6a39ad 100644 --- a/packages/locale/lang/es-ES.ts +++ b/packages/locale/lang/es-ES.ts @@ -306,7 +306,9 @@ export default { reUpload: 'Re upload', uploadProgress: 'Uploading {0}%', uploadErr: 'Fail to upload', - uploadSuccess: 'Successfully upload' + uploadSuccess: 'Successfully upload', + moreBtnText: 'More ({0})', + viewItemTitle: 'click to view' }, formDesign: { formName: 'Form name', @@ -337,6 +339,7 @@ export default { group: { base: 'Base control', layout: 'Layout control', + system: 'System control', advanced: 'Advanced control' }, copyTitle: 'Copy_{0}', diff --git a/packages/locale/lang/hu-HU.ts b/packages/locale/lang/hu-HU.ts index 943f617ae2..44177bf409 100644 --- a/packages/locale/lang/hu-HU.ts +++ b/packages/locale/lang/hu-HU.ts @@ -305,7 +305,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '点击查看' }, formDesign: { formName: '表单名称', @@ -336,6 +338,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系统控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts index c1ccbc7922..819721adbd 100644 --- a/packages/locale/lang/ja-JP.ts +++ b/packages/locale/lang/ja-JP.ts @@ -306,7 +306,9 @@ export default { reUpload: 'Re upload', uploadProgress: 'Uploading {0}%', uploadErr: 'Fail to upload', - uploadSuccess: 'Successfully upload' + uploadSuccess: 'Successfully upload', + moreBtnText: 'More ({0})', + viewItemTitle: 'click to view' }, formDesign: { formName: 'Form name', @@ -337,6 +339,7 @@ export default { group: { base: 'Base control', layout: 'Layout control', + system: 'System control', advanced: 'Advanced control' }, copyTitle: 'Copy_{0}', diff --git a/packages/locale/lang/ko-KR.ts b/packages/locale/lang/ko-KR.ts index a1f66e0663..80626b3844 100644 --- a/packages/locale/lang/ko-KR.ts +++ b/packages/locale/lang/ko-KR.ts @@ -306,7 +306,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '点击查看' }, formDesign: { formName: '表单名称', @@ -337,6 +339,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系统控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts index b125c88b32..f4763180fa 100644 --- a/packages/locale/lang/pt-BR.ts +++ b/packages/locale/lang/pt-BR.ts @@ -306,7 +306,9 @@ export default { reUpload: 'Re upload', uploadProgress: 'Uploading {0}%', uploadErr: 'Fail to upload', - uploadSuccess: 'Successfully upload' + uploadSuccess: 'Successfully upload', + moreBtnText: 'More ({0})', + viewItemTitle: 'click to view' }, formDesign: { formName: 'Form name', @@ -337,6 +339,7 @@ export default { group: { base: 'Base control', layout: 'Layout control', + system: 'System control', advanced: 'Advanced control' }, copyTitle: 'Copy_{0}', diff --git a/packages/locale/lang/ru-RU.ts b/packages/locale/lang/ru-RU.ts index a1f66e0663..80626b3844 100644 --- a/packages/locale/lang/ru-RU.ts +++ b/packages/locale/lang/ru-RU.ts @@ -306,7 +306,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '点击查看' }, formDesign: { formName: '表单名称', @@ -337,6 +339,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系统控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/locale/lang/vi-VN.ts b/packages/locale/lang/vi-VN.ts index a1f66e0663..80626b3844 100644 --- a/packages/locale/lang/vi-VN.ts +++ b/packages/locale/lang/vi-VN.ts @@ -306,7 +306,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '点击查看' }, formDesign: { formName: '表单名称', @@ -337,6 +339,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系统控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts index a1f66e0663..80626b3844 100644 --- a/packages/locale/lang/zh-CN.ts +++ b/packages/locale/lang/zh-CN.ts @@ -306,7 +306,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '点击查看' }, formDesign: { formName: '表单名称', @@ -337,6 +339,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系统控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/locale/lang/zh-TC.ts b/packages/locale/lang/zh-TC.ts index 7e9ecfad71..14dee30406 100644 --- a/packages/locale/lang/zh-TC.ts +++ b/packages/locale/lang/zh-TC.ts @@ -304,7 +304,9 @@ export default { reUpload: '重新上传', uploadProgress: '上传中 {0}%', uploadErr: '上传失败', - uploadSuccess: '上传成功' + uploadSuccess: '上传成功', + moreBtnText: '更多（{0}）', + viewItemTitle: '點擊查看' }, formDesign: { formName: '表單名稱', @@ -335,6 +337,7 @@ export default { group: { base: '基础控件', layout: '布局控件', + system: '系統控件', advanced: '高级控件' }, copyTitle: '副本_{0}', diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts index 69f2b1c302..28e0fb4537 100644 --- a/packages/table/module/custom/panel.ts +++ b/packages/table/module/custom/panel.ts @@ -185,7 +185,7 @@ export default defineComponent({ // } // } - const allCustomEvent = () => { + const allOptionEvent = () => { const { customStore } = props const { customColumnList } = reactData const customOpts = computeCustomOpts.value @@ -435,7 +435,7 @@ export default defineComponent({ 'is--indeterminate': isAllIndeterminate }], title: getI18n('vxe.table.allTitle'), - onClick: allCustomEvent + onClick: allOptionEvent }, [ h('span', { class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)] @@ -678,7 +678,7 @@ export default defineComponent({ 'is--indeterminate': isAllIndeterminate }], title: getI18n('vxe.table.allTitle'), - onClick: allCustomEvent + onClick: allOptionEvent }, [ h('span', { class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)] @@ -697,7 +697,8 @@ export default defineComponent({ VxeUITooltipComponent ? h(VxeUITooltipComponent, { enterable: true, - content: getI18n('vxe.custom.setting.sortHelpTip') + content: getI18n('vxe.custom.setting.sortHelpTip'), + popupClassName: 'vxe-table--ignore-clear' }, { default: () => { return h('i', { diff --git a/packages/table/module/edit/hook.ts b/packages/table/module/edit/hook.ts index 86bca55a25..504d716e50 100644 --- a/packages/table/module/edit/hook.ts +++ b/packages/table/module/edit/hook.ts @@ -764,25 +764,26 @@ hooks.add('tableEditModule', { const { editRender } = column if (isEnableConf(editRender)) { const compRender = renderer.get(editRender.name) - let { autofocus, autoselect } = editRender + let autoFocus = editRender.autofocus || editRender.autoFocus + let autoSelect = editRender.autoSelect || editRender.autoselect let inputElem - if (!autofocus && compRender) { - autofocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus + if (!autoFocus && compRender) { + autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus } - if (!autoselect && compRender) { - autoselect = compRender.tableAutoSelect || compRender.autoselect + if (!autoSelect && compRender) { + autoSelect = compRender.tableAutoSelect || compRender.autoselect } // 如果指定了聚焦 class - if (XEUtils.isFunction(autofocus)) { - inputElem = autofocus(params) - } else if (autofocus) { - inputElem = cell.querySelector(autofocus) + if (XEUtils.isFunction(autoFocus)) { + inputElem = autoFocus(params) + } else if (autoFocus) { + inputElem = cell.querySelector(autoFocus) if (inputElem) { inputElem.focus() } } if (inputElem) { - if (autoselect) { + if (autoSelect) { inputElem.select() } else { // 保持一致行为，光标移到末端 diff --git a/packages/table/module/export/hook.ts b/packages/table/module/export/hook.ts index 87acc6e57a..dca3c30601 100644 --- a/packages/table/module/export/hook.ts +++ b/packages/table/module/export/hook.ts @@ -294,7 +294,7 @@ hooks.add('tableExportModule', { return row[childrenField] && row[childrenField].length } - const getSeq = (row: any, $rowIndex: any, column: any, $columnIndex: any) => { + const getSeq = (cellValue: any, row: any, $rowIndex: any, column: any, $columnIndex: any) => { const seqOpts = computeSeqOpts.value const seqMethod = seqOpts.seqMethod || column.seqMethod if (seqMethod) { @@ -307,7 +307,7 @@ hooks.add('tableExportModule', { $columnIndex }) } - return $xeTable.getRowSeq(row) + return cellValue } function getHeaderTitle (opts: any, column: any) { @@ -363,9 +363,11 @@ hooks.add('tableExportModule', { cellValue = bodyExportMethod({ $table: $xeTable, row, column, options: opts }) } else { switch (column.type) { - case 'seq': - cellValue = mode === 'all' ? path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('') : getSeq(row, $rowIndex, column, $columnIndex) + case 'seq': { + const seqVal = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('') + cellValue = mode === 'all' ? seqVal : getSeq(seqVal, row, $rowIndex, column, $columnIndex) break + } case 'checkbox': cellValue = toBooleanValue($xeTable.isCheckedByCheckboxRow(row)) item._checkboxLabel = checkboxOpts.labelField ? XEUtils.get(row, checkboxOpts.labelField) : '' @@ -419,9 +421,11 @@ hooks.add('tableExportModule', { cellValue = exportLabelMethod({ $table: $xeTable, row, column, options: opts }) } else { switch (column.type) { - case 'seq': - cellValue = mode === 'all' ? $rowIndex + 1 : getSeq(row, $rowIndex, column, $columnIndex) + case 'seq': { + const seqValue = $rowIndex + 1 + cellValue = mode === 'all' ? seqValue : getSeq(seqValue, row, $rowIndex, column, $columnIndex) break + } case 'checkbox': cellValue = toBooleanValue($xeTable.isCheckedByCheckboxRow(row)) item._checkboxLabel = checkboxOpts.labelField ? XEUtils.get(row, checkboxOpts.labelField) : '' diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index bfba5792d4..b241d8cad0 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -436,14 +436,14 @@ function oldFilterRender (renderOpts: any, params: any) { function handleFilterMethod ({ option, row, column }: any) { const { data } = option - const cellValue = XEUtils.get(row, column.property) + const cellValue = XEUtils.get(row, column.field) /* eslint-disable eqeqeq */ return cellValue == data } function handleInputFilterMethod ({ option, row, column }: any) { const { data } = option - const cellValue = XEUtils.get(row, column.property) + const cellValue = XEUtils.get(row, column.field) /* eslint-disable eqeqeq */ return XEUtils.toValueString(cellValue).indexOf(data) > -1 } @@ -501,7 +501,7 @@ function oldSelectEditRender (renderOpts: any, params: any) { function getSelectCellValue (renderOpts: any, { row, column }: any) { const { options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts - const cellValue = XEUtils.get(row, column.property) + const cellValue = XEUtils.get(row, column.field) let selectItem: any const labelProp = optionProps.label || 'label' const valueProp = optionProps.value || 'value' @@ -536,7 +536,7 @@ function handleExportSelectMethod (params: any) { function getTreeSelectCellValue (renderOpts: any, { row, column }: any) { const { options, optionProps = {} } = renderOpts - const cellValue = XEUtils.get(row, column.property) + const cellValue = XEUtils.get(row, column.field) const labelProp = optionProps.label || 'label' const valueProp = optionProps.value || 'value' const childrenProp = optionProps.children || 'children' @@ -564,23 +564,23 @@ function handleExportTreeSelectMethod (params: any) { */ renderer.mixin({ input: { - autofocus: 'input', - renderEdit: nativeEditRender, - renderDefault: nativeEditRender, - renderFilter: nativeFilterRender, - defaultFilterMethod: handleInputFilterMethod + tableAutoFocus: 'input', + renderTableEdit: nativeEditRender, + renderTableDefault: nativeEditRender, + renderTableFilter: nativeFilterRender, + tableFilterDefaultMethod: handleInputFilterMethod }, textarea: { - autofocus: 'textarea', - renderEdit: nativeEditRender + tableAutoFocus: 'textarea', + renderTableEdit: nativeEditRender }, select: { - renderEdit: nativeSelectEditRender, - renderDefault: nativeSelectEditRender, - renderCell (renderOpts, params) { + renderTableEdit: nativeSelectEditRender, + renderTableDefault: nativeSelectEditRender, + renderTableCell (renderOpts, params) { return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params)) }, - renderFilter (renderOpts, params) { + renderTableFilter (renderOpts, params) { const { column } = params return column.filters.map((option, oIndex) => { return h('select', { @@ -592,17 +592,17 @@ renderer.mixin({ renderOpts.optionGroups ? renderNativeOptgroups(renderOpts, params, renderNativeOptions) : renderNativeOptions(renderOpts.options, renderOpts, params)) }) }, - defaultFilterMethod: handleFilterMethod, - exportMethod: handleExportSelectMethod + tableFilterDefaultMethod: handleFilterMethod, + tableExportMethod: handleExportSelectMethod }, VxeInput: { - autofocus: 'input', - renderEdit: defaultEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: 'input', + renderTableEdit: defaultEditRender, + renderTableCell (renderOpts, params) { const { props = {} } = renderOpts const { row, column } = params const digits = props.digits || getConfig().input?.digits || 2 - let cellValue = XEUtils.get(row, column.property) + let cellValue = XEUtils.get(row, column.field) if (cellValue) { switch (props.type) { case 'date': @@ -619,18 +619,18 @@ renderer.mixin({ } return getCellLabelVNs(renderOpts, params, cellValue) }, - renderDefault: defaultEditRender, - renderFilter: defaultFilterRender, - defaultFilterMethod: handleInputFilterMethod + renderTableDefault: defaultEditRender, + renderTableFilter: defaultFilterRender, + tableFilterDefaultMethod: handleInputFilterMethod }, VxeNumberInput: { - autofocus: 'input', - renderEdit: defaultEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: 'input', + renderTableEdit: defaultEditRender, + renderTableCell (renderOpts, params) { const { props = {} } = renderOpts const { row, column } = params const digits = props.digits || getConfig().numberInput?.digits || 2 - let cellValue = XEUtils.get(row, column.property) + let cellValue = XEUtils.get(row, column.field) if (cellValue) { switch (props.type) { case 'float': @@ -640,17 +640,17 @@ renderer.mixin({ } return getCellLabelVNs(renderOpts, params, cellValue) }, - renderDefault: defaultEditRender, - renderFilter: defaultFilterRender, - defaultFilterMethod: handleInputFilterMethod + renderTableDefault: defaultEditRender, + renderTableFilter: defaultFilterRender, + tableFilterDefaultMethod: handleInputFilterMethod }, VxeDatePicker: { - autofocus: 'input', - renderEdit: defaultEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: 'input', + renderTableEdit: defaultEditRender, + renderTableCell (renderOpts, params) { const { props = {} } = renderOpts const { row, column } = params - let cellValue = XEUtils.get(row, column.property) + let cellValue = XEUtils.get(row, column.field) if (cellValue) { switch (props.type) { case 'date': @@ -664,18 +664,18 @@ renderer.mixin({ } return getCellLabelVNs(renderOpts, params, cellValue) }, - renderDefault: defaultEditRender, - renderFilter: defaultFilterRender, - defaultFilterMethod: handleFilterMethod + renderTableDefault: defaultEditRender, + renderTableFilter: defaultFilterRender, + tableFilterDefaultMethod: handleFilterMethod }, VxeTextarea: { - autofocus: 'VxeTextarea' + tableAutoFocus: 'VxeTextarea' }, VxeButton: { - renderDefault: buttonCellRender + renderTableDefault: buttonCellRender }, VxeButtonGroup: { - renderDefault (renderOpts, params) { + renderTableDefault (renderOpts, params) { const { options } = renderOpts return [ h(getDefaultComponent(renderOpts), { @@ -687,13 +687,13 @@ renderer.mixin({ } }, VxeSelect: { - autofocus: 'input', - renderEdit: defaultSelectEditRender, - renderDefault: defaultSelectEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: 'input', + renderTableEdit: defaultSelectEditRender, + renderTableDefault: defaultSelectEditRender, + renderTableCell (renderOpts, params) { return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params)) }, - renderFilter (renderOpts, params) { + renderTableFilter (renderOpts, params) { const { column } = params const { options, optionProps, optionGroups, optionGroupProps } = renderOpts return column.filters.map((option, oIndex) => { @@ -705,35 +705,46 @@ renderer.mixin({ }) }) }, - defaultFilterMethod: handleFilterMethod, - exportMethod: handleExportSelectMethod + tableFilterDefaultMethod: handleFilterMethod, + tableExportMethod: handleExportSelectMethod }, VxeTreeSelect: { - autofocus: 'input', - renderEdit: defaultTreeSelectEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: 'input', + renderTableEdit: defaultTreeSelectEditRender, + renderTableCell (renderOpts, params) { return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params)) }, - exportMethod: handleExportTreeSelectMethod + tableExportMethod: handleExportTreeSelectMethod + }, + VxeIconPicker: { + tableAutoFocus: 'input', + renderTableEdit: defaultEditRender, + renderTableCell (renderOpts, params) { + const { row, column } = params + const cellValue = XEUtils.get(row, column.field) + return h('i', { + class: cellValue + }) + } }, VxeRadioGroup: { - renderDefault: radioAndCheckboxEditRender + renderTableDefault: radioAndCheckboxEditRender }, VxeCheckboxGroup: { - renderDefault: radioAndCheckboxEditRender + renderTableDefault: radioAndCheckboxEditRender }, VxeSwitch: { - autofocus: 'button', - renderEdit: defaultEditRender, - renderDefault: defaultEditRender + tableAutoFocus: 'button', + renderTableEdit: defaultEditRender, + renderTableDefault: defaultEditRender }, VxeUpload: { - renderEdit: defaultEditRender, - renderCell: defaultEditRender, - renderDefault: defaultEditRender + renderTableEdit: defaultEditRender, + renderTableCell: defaultEditRender, + renderTableDefault: defaultEditRender }, VxeImage: { - renderDefault (renderOpts, params) { + renderTableDefault (renderOpts, params) { const { row, column } = params const { props } = renderOpts const cellValue = getCellValue(row, column) @@ -747,7 +758,7 @@ renderer.mixin({ } }, VxeImageGroup: { - renderDefault (renderOpts, params) { + renderTableDefault (renderOpts, params) { const { row, column } = params const { props } = renderOpts const cellValue = getCellValue(row, column) @@ -763,13 +774,13 @@ renderer.mixin({ // 以下已废弃 $input: { - autofocus: '.vxe-input--inner', - renderEdit: oldEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: '.vxe-input--inner', + renderTableEdit: oldEditRender, + renderTableCell (renderOpts, params) { const { props = {} } = renderOpts const { row, column } = params const digits = props.digits || getConfig().input?.digits || 2 - let cellValue = XEUtils.get(row, column.property) + let cellValue = XEUtils.get(row, column.field) if (cellValue) { switch (props.type) { case 'date': @@ -785,27 +796,27 @@ renderer.mixin({ } return getCellLabelVNs(renderOpts, params, cellValue) }, - renderDefault: oldEditRender, - renderFilter: oldFilterRender, - defaultFilterMethod: handleInputFilterMethod + renderTableDefault: oldEditRender, + renderTableFilter: oldFilterRender, + tableFilterDefaultMethod: handleInputFilterMethod }, $textarea: { - autofocus: '.vxe-textarea--inner' + tableAutoFocus: '.vxe-textarea--inner' }, $button: { - renderDefault: oldButtonEditRender + renderTableDefault: oldButtonEditRender }, $buttons: { - renderDefault: oldButtonsEditRender + renderTableDefault: oldButtonsEditRender }, $select: { - autofocus: '.vxe-input--inner', - renderEdit: oldSelectEditRender, - renderDefault: oldSelectEditRender, - renderCell (renderOpts, params) { + tableAutoFocus: '.vxe-input--inner', + renderTableEdit: oldSelectEditRender, + renderTableDefault: oldSelectEditRender, + renderTableCell (renderOpts, params) { return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params)) }, - renderFilter (renderOpts, params) { + renderTableFilter (renderOpts, params) { const { column } = params const { options, optionProps, optionGroups, optionGroupProps } = renderOpts return column.filters.map((option, oIndex) => { @@ -817,19 +828,19 @@ renderer.mixin({ }) }) }, - defaultFilterMethod: handleFilterMethod, - exportMethod: handleExportSelectMethod + tableFilterDefaultMethod: handleFilterMethod, + tableExportMethod: handleExportSelectMethod }, $radio: { - autofocus: '.vxe-radio--input' + tableAutoFocus: '.vxe-radio--input' }, $checkbox: { - autofocus: '.vxe-checkbox--input' + tableAutoFocus: '.vxe-checkbox--input' }, $switch: { - autofocus: '.vxe-switch--button', - renderEdit: oldEditRender, - renderDefault: oldEditRender + tableAutoFocus: '.vxe-switch--button', + renderTableEdit: oldEditRender, + renderTableDefault: oldEditRender } // 以上已废弃 }) diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts index 28e095e942..3b09f0e960 100644 --- a/packages/table/src/table.ts +++ b/packages/table/src/table.ts @@ -18,7 +18,7 @@ import TableImportPanelComponent from '../module/export/import-panel' import TableExportPanelComponent from '../module/export/export-panel' import TableMenuPanelComponent from '../module/menu/panel' -import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent } from 'vxe-pc-ui' +import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui' import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableProps, VxeColumnPropTypes } from '../../../types' const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI @@ -40,6 +40,8 @@ export default defineComponent({ const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading') const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip') + const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null) + const { computeSize } = useFns.useSize(props) const reactData = reactive({ @@ -3273,6 +3275,11 @@ export default defineComponent({ const fullColumnFieldData = internalData.fullColumnFieldData return field && fullColumnFieldData[field] ? fullColumnFieldData[field].column : null }, + getParentColumn (fieldOrColumn) { + const fullColumnIdData = internalData.fullColumnIdData + const column = handleFieldOrColumn($xeTable, fieldOrColumn) + return column && column.parentId && fullColumnIdData[column.parentId] ? fullColumnIdData[column.parentId].column : null + }, /** * 获取当前表格的列 * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列 @@ -3551,10 +3558,14 @@ export default defineComponent({ * 计算单元格列宽，动态分配可用剩余空间 * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?% */ - recalculate (refull?: boolean) { + recalculate (reFull?: boolean) { + const el = refElem.value + if (!el || !el.clientWidth) { + return nextTick() + } calcCellWidth() autoCellWidth() - if (refull === true) { + if (reFull === true) { // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果 return computeScrollLoad().then(() => { autoCellWidth() @@ -5251,6 +5262,10 @@ export default defineComponent({ if ($xeTable.closeMenu) { $xeTable.closeMenu() } + const el = refElem.value + if (!el || !el.clientWidth) { + return nextTick() + } tableMethods.updateCellAreas() tableMethods.recalculate(true) } @@ -6686,6 +6701,12 @@ export default defineComponent({ }) }) + if ($xeTabs) { + watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => { + handleGlobalResizeEvent() + }) + } + hooks.forEach((options) => { const { setupTable } = options if (setupTable) { @@ -6971,6 +6992,7 @@ export default defineComponent({ 'is--virtual-x': scrollXLoad, 'is--virtual-y': scrollYLoad }], + spellcheck: false, onKeydown: keydownEvent }, [ /** diff --git a/styles/components/table.scss b/styles/components/table.scss index 3ed89f3093..431b9ab7ad 100644 --- a/styles/components/table.scss +++ b/styles/components/table.scss @@ -94,7 +94,8 @@ & > .vxe-select, & > .vxe-tree-select, & > .vxe-date-picker, - & > .vxe-number-input { + & > .vxe-number-input, + & > .vxe-ico-picker { width: 100%; } & > .vxe-input > .vxe-input--inner, @@ -111,7 +112,8 @@ .vxe-select, .vxe-tree-select, .vxe-date-picker, - .vxe-number-input { + .vxe-number-input, + .vxe-ico-picker { width: 100%; } .vxe-input > .vxe-input--inner, @@ -1277,7 +1279,8 @@ .vxe-default-select { border-color: var(--vxe-ui-table-validate-error-color); } - .vxe-input { + .vxe-input, + .vxe-ico-picker { border-color: var(--vxe-ui-table-validate-error-color); } }