diff --git a/package.json b/package.json index d6305ab28b..10ccc73af5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.7.47", + "version": "4.7.48", "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.56" + "vxe-pc-ui": "^4.0.61" }, "devDependencies": { "@types/resize-observer-browser": "^0.1.11", diff --git a/packages/components.ts b/packages/components.ts index 6a1f901393..0535940244 100644 --- a/packages/components.ts +++ b/packages/components.ts @@ -26,10 +26,14 @@ export function install (app: App, options?: VxeGlobalConfig) { } // 保留兼容老版本 -const defaultLanguage = 'zh-CN' -VxeUI.setI18n(defaultLanguage, zhCN) -VxeUI.setLanguage(defaultLanguage) VxeUI.setTheme('light') +setTimeout(() => { + if (!VxeUI.hasLanguage('zh-CN')) { + const defaultLanguage = 'zh-CN' + VxeUI.setI18n(defaultLanguage, zhCN) + VxeUI.setLanguage(defaultLanguage) + } +}) export * from './ui' diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts index cede47e1d0..aa04ce50cb 100644 --- a/packages/locale/lang/en-US.ts +++ b/packages/locale/lang/en-US.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: 'Error installing "{0}" module, possibly in the wrong order, dependent modules need to be installed before Table.', barUnableLink: 'Toolbar cannot associate table.', expandContent: 'Expand row slot should be "content", please check if it is correct.', - reqComp: 'Require "{0}" component, check whether the install is correct. https://vxetable.cn/#/start/useGlobal', + reqComp: 'Require "{0}" component, check whether the install is correct', reqModule: 'require "{0}" module.', reqProp: 'Missing the necessary "{0}" parameter, which can cause error.', emptyProp: 'The property "{0}" is not allowed to be empty.', @@ -351,6 +355,7 @@ export default { VxeDatePicker: 'Date', VxeTextarea: 'Textarea', VxeSelect: 'Select', + VxeTreeSelect: 'Tree select', VxeRadioGroup: 'Radio', VxeCheckboxGroup: 'Checkbox', VxeUploadFile: 'File', @@ -361,6 +366,7 @@ export default { name: 'Field name', placeholder: 'Field placeholder', required: 'Required', + multiple: 'Allow to select multiple', displaySetting: { name: 'Display setting', pc: 'PC', diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts index 406c743e5d..1a832b6406 100644 --- a/packages/locale/lang/es-ES.ts +++ b/packages/locale/lang/es-ES.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: 'Error al instalar el módulo "{0}", posiblemente en el orden equivocado, los módulos dependientes deben ser instalados antes de la tabla.', barUnableLink: 'La barra de herramientas no puede asociarse con la tabla.', expandContent: 'La ranura de fila expandible debería ser "contenido", por favor revise si está correcta.', - reqComp: 'Require "{0}" component, check whether the install is correct. https://vxetable.cn/#/start/useGlobal', + reqComp: 'Require "{0}" component, check whether the install is correct', reqModule: 'Requerir el módulo "{0}".', reqProp: 'Falta el parámetro necesario "{0}", lo que puede causar errores.', emptyProp: 'La propiedad "{0}" no se permite estar vacía.', @@ -351,6 +355,7 @@ export default { VxeDatePicker: 'Date', VxeTextarea: 'Textarea', VxeSelect: 'Select', + VxeTreeSelect: 'Tree select', VxeRadioGroup: 'Radio', VxeCheckboxGroup: 'Checkbox', VxeUploadFile: 'File', @@ -361,6 +366,7 @@ export default { name: 'Field name', placeholder: 'Field placeholder', required: 'Required', + multiple: 'Allow to select multiple', displaySetting: { name: 'Display setting', pc: 'PC', diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts index f5470fe479..0c45d2084d 100644 --- a/packages/locale/lang/ja-JP.ts +++ b/packages/locale/lang/ja-JP.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: '"{0}" モジュールをインストールする際にエラーが発生し、順序が正しくない可能性がある。依存するモジュールはTableの前にインストールする必要がある', barUnableLink: 'ツールバーはフォームを関連付けることができない', expandContent: '拡張行スロットは "content" である必要があります。確認してください', - reqComp: 'Require "{0}" component, check whether the install is correct. https://vxetable.cn/#/start/useGlobal', + reqComp: 'Require "{0}" component, check whether the install is correct', reqModule: '"{0}" モジュールが必要です', reqProp: '必要な "{0}" パラメーターが欠落しているため、エラーが発生する可能性があります', emptyProp: '"{0}" プロパティは空白が許可されていません', @@ -351,6 +355,7 @@ export default { VxeDatePicker: 'Date', VxeTextarea: 'Textarea', VxeSelect: 'Select', + VxeTreeSelect: 'Tree select', VxeRadioGroup: 'Radio', VxeCheckboxGroup: 'Checkbox', VxeUploadFile: 'File', @@ -361,6 +366,7 @@ export default { name: 'Field name', placeholder: 'Field placeholder', required: 'Required', + multiple: 'Allow to select multiple', displaySetting: { name: 'Display setting', pc: 'PC', diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts index 649b4feade..6c5f5421cc 100644 --- a/packages/locale/lang/pt-BR.ts +++ b/packages/locale/lang/pt-BR.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: 'Erro ao instalar o módulo "{0}", possivelmente na ordem errada, os módulos dependentes precisam ser instalados antes da Tabela.', barUnableLink: 'A barra de ferramentas não pode ser associada à tabela.', expandContent: 'O slot de linha expandida deve ser "content", verifique se está correto.', - reqComp: 'Require "{0}" component, check whether the install is correct. https://vxetable.cn/#/start/useGlobal', + reqComp: 'Require "{0}" component, check whether the install is correct', reqModule: 'requerir o módulo "{0}".', reqProp: 'Faltando o parâmetro necessário "{0}", o que pode causar um erro.', emptyProp: 'A propriedade "{0}" não pode estar vazia.', @@ -351,6 +355,7 @@ export default { VxeDatePicker: 'Date', VxeTextarea: 'Textarea', VxeSelect: 'Select', + VxeTreeSelect: 'Tree select', VxeRadioGroup: 'Radio', VxeCheckboxGroup: 'Checkbox', VxeUploadFile: 'File', @@ -361,6 +366,7 @@ export default { name: 'Field name', placeholder: 'Field placeholder', required: 'Required', + multiple: 'Allow to select multiple', displaySetting: { name: 'Display setting', pc: 'PC', diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts index c743df258e..8ad4ce20ad 100644 --- a/packages/locale/lang/zh-CN.ts +++ b/packages/locale/lang/zh-CN.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: '安装 "{0}" 模块时发生错误,可能顺序不正确,依赖的模块需要在 Table 之前安装', barUnableLink: '工具栏无法关联表格', expandContent: '展开行的插槽应该是 "content",请检查是否正确', - reqComp: '缺少 "{0}" 组件,请检查是否正确安装 https://vxetable.cn/#/start/useGlobal', + reqComp: '缺少 "{0}" 组件,请检查是否正确安装', reqModule: '缺少 "{0}" 模块', reqProp: '缺少必要的 "{0}" 参数,这可能会导致出现错误', emptyProp: '参数 "{0}" 不允许为空', @@ -341,7 +345,7 @@ export default { component: { input: '输入框', textarea: '文本域', - select: '下拉框', + select: '下拉选择', row: '一行多列', title: '文本', subtable: '子表', @@ -350,7 +354,8 @@ export default { VxeNumberInput: '数字', VxeDatePicker: '日期', VxeTextarea: '文本域', - VxeSelect: '下拉框', + VxeSelect: '下拉选择', + VxeTreeSelect: '树形选择', VxeRadioGroup: '单选框', VxeCheckboxGroup: '复选框', VxeUploadFile: '文件', @@ -361,6 +366,7 @@ export default { name: '控件名称', placeholder: '提示语', required: '必填校验', + multiple: '允许多选', displaySetting: { name: '显示设置', pc: '电脑端', diff --git a/packages/locale/lang/zh-TC.ts b/packages/locale/lang/zh-TC.ts index b9c89b9796..30a4657a5f 100644 --- a/packages/locale/lang/zh-TC.ts +++ b/packages/locale/lang/zh-TC.ts @@ -1,3 +1,7 @@ +/** + * 已废弃 + * @deprecated + */ export default { vxe: { base: { @@ -19,7 +23,7 @@ export default { useErr: '安裝 "{0}" 模組時發生錯誤,可能順序不正確,依賴的模組需要在Table之前安裝', barUnableLink: '工具欄無法關聯表格', expandContent: '展開行的插槽應該是 “content”,請檢查是否正確', - reqComp: '缺少 "{0}" 組件,请检查是否正确安装 https://vxetable.cn/#/start/useGlobal', + reqComp: '缺少 "{0}" 組件,请检查是否正确安装', reqModule: '缺少 "{0}" 模組', reqProp: '缺少必要的 "{0}" 參數,可能會導致出現錯誤', emptyProp: '參數 "{0}" 不允許為空', @@ -339,7 +343,7 @@ export default { component: { input: '输入框', textarea: '文本域', - select: '下拉框', + select: '下拉选择', row: '一行多列', title: '文本', subtable: '子表', @@ -348,7 +352,8 @@ export default { VxeNumberInput: '数字', VxeDatePicker: '日期', VxeTextarea: '文本域', - VxeSelect: '下拉框', + VxeSelect: '下拉选择', + VxeTreeSelect: '树形选择', VxeRadioGroup: '单选框', VxeCheckboxGroup: '复选框', VxeUploadFile: '文件', @@ -359,6 +364,7 @@ export default { name: '控件名称', placeholder: '控件提示', required: '必填校验', + multiple: '允许多选', displaySetting: { name: '显示设置', pc: '电脑端', diff --git a/packages/table/render/index.ts b/packages/table/render/index.ts index 2c9cbfee6a..2b8e014779 100644 --- a/packages/table/render/index.ts +++ b/packages/table/render/index.ts @@ -464,6 +464,18 @@ function defaultSelectEditRender (renderOpts: any, params: any) { ] } +function defaultTreeSelectEditRender (renderOpts: any, params: any) { + const { row, column } = params + const { options, optionProps } = renderOpts + const cellValue = getCellValue(row, column) + return [ + h(getDefaultComponent(renderOpts), { + ...getCellEditProps(renderOpts, params, cellValue, { options, optionProps }), + ...getEditOns(renderOpts, params) + }) + ] +} + /** * 已废弃 * @deprecated @@ -481,13 +493,13 @@ function oldSelectEditRender (renderOpts: any, params: any) { } function getSelectCellValue (renderOpts: any, { row, column }: any) { - const { props = {}, options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts + const { options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts const cellValue = XEUtils.get(row, column.property) let selectItem: any const labelProp = optionProps.label || 'label' const valueProp = optionProps.value || 'value' if (!isEmptyValue(cellValue)) { - return XEUtils.map(props.multiple ? cellValue : [cellValue], + return XEUtils.map(XEUtils.isArray(cellValue) ? cellValue : [cellValue], optionGroups ? (value) => { const groupOptions = optionGroupProps.options || 'options' @@ -515,6 +527,31 @@ function handleExportSelectMethod (params: any) { return options.original ? getCellValue(row, column) : getSelectCellValue(column.editRender || column.cellRender, params) } +function getTreeSelectCellValue (renderOpts: any, { row, column }: any) { + const { options, optionProps = {} } = renderOpts + const cellValue = XEUtils.get(row, column.property) + const labelProp = optionProps.label || 'label' + const valueProp = optionProps.value || 'value' + const childrenProp = optionProps.children || 'children' + if (!isEmptyValue(cellValue)) { + const keyMaps: Record = {} + XEUtils.eachTree(options, item => { + keyMaps[XEUtils.get(item, valueProp)] = item + }, { children: childrenProp }) + return XEUtils.map(XEUtils.isArray(cellValue) ? cellValue : [cellValue], (value) => { + const item = keyMaps[value] + return item ? XEUtils.get(item, labelProp) : item + } + ).join(', ') + } + return '' +} + +function handleExportTreeSelectMethod (params: any) { + const { row, column, options } = params + return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params) +} + /** * 表格 - 渲染器 */ @@ -664,6 +701,14 @@ renderer.mixin({ defaultFilterMethod: handleFilterMethod, exportMethod: handleExportSelectMethod }, + VxeTreeSelect: { + autofocus: '.vxe-input--inner', + renderEdit: defaultTreeSelectEditRender, + renderCell (renderOpts, params) { + return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params)) + }, + exportMethod: handleExportTreeSelectMethod + }, VxeRadioGroup: { renderDefault: radioAndCheckboxEditRender }, diff --git a/styles/components/table-module/export.scss b/styles/components/table-module/export.scss index bdc5cff0b4..f756313633 100644 --- a/styles/components/table-module/export.scss +++ b/styles/components/table-module/export.scss @@ -90,10 +90,10 @@ cursor: pointer; } &:hover { + color: var(--vxe-ui-font-primary-color); & > i { display: block; } - color: var(--vxe-ui-font-primary-color); } } .vxe-import-select--file { diff --git a/styles/components/table.scss b/styles/components/table.scss index 5ad6b3880a..625bf2cc58 100644 --- a/styles/components/table.scss +++ b/styles/components/table.scss @@ -92,6 +92,7 @@ & > .vxe-input, & > .vxe-textarea, & > .vxe-select, + & > .vxe-tree-select, & > .vxe-date-picker, & > .vxe-number-input { width: 100%;