releases 4.7.48

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",

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'
 

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',

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',

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',

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',

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: '电脑端',

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: '电脑端',

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<string, any> = {}
+    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
   },

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 {

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%;