vxe-table 4.19.21 → 4.19.23

package/packages/locale/lang/th-TH.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: 'Width (pixels)',
         colVisible: 'Visible',
         colFixed: 'Freeze',
-        colFixedMax: 'Freeze (up to {0} columns)',
+        colFixedMax: 'Freeze (Max {0})',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
         fixedLeft: 'Left',
-        fixedUnset: 'Not set​',
+        fixedUnset: 'None',
         fixedRight: 'Right',
+        alignLeft: '居左',
+        alignCenter: '居中',
+        alignRight: '居右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: 'แช่แข็งขวา',
       cancelFixed: 'สูดดม'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} ปี'
     },

package/packages/locale/lang/ug-CN.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: 'Width (pixels)',
         colVisible: 'Visible',
         colFixed: 'Freeze',
-        colFixedMax: 'Freeze (up to {0} columns)',
+        colFixedMax: 'Freeze (Max {0})',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
         fixedLeft: 'Left',
-        fixedUnset: 'Not set​',
+        fixedUnset: 'None',
         fixedRight: 'Right',
+        alignLeft: '居左',
+        alignCenter: '居中',
+        alignRight: '居右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: 'ئوڭ ياندا توڭلىتىش',
       cancelFixed: 'قۇر توڭلىتىشنى ئەمەلدىن قالدۇرۇش'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} يىل'
     },

package/packages/locale/lang/uk-UA.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: 'Width (pixels)',
         colVisible: 'Visible',
         colFixed: 'Freeze',
-        colFixedMax: 'Freeze (up to {0} columns)',
+        colFixedMax: 'Freeze (Max {0})',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
         fixedLeft: 'Left',
-        fixedUnset: 'Not set​',
+        fixedUnset: 'None',
         fixedRight: 'Right',
+        alignLeft: '居左',
+        alignCenter: '居中',
+        alignRight: '居右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: 'Заморожуйте право',
       cancelFixed: 'Розморожувати'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} років'
     },

package/packages/locale/lang/uz-UZ.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: 'Width (pixels)',
         colVisible: 'Visible',
         colFixed: 'Freeze',
-        colFixedMax: 'Freeze (up to {0} columns)',
+        colFixedMax: 'Freeze (Max {0})',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
         fixedLeft: 'Left',
-        fixedUnset: 'Not set​',
+        fixedUnset: 'None',
         fixedRight: 'Right',
+        alignLeft: '居左',
+        alignCenter: '居中',
+        alignRight: '居右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: "O'ng tomonda muzlatib qo'ying",
       cancelFixed: "Urug'lar ustunini"
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} yillar'
     },

package/packages/locale/lang/vi-VN.ts

@@ -176,9 +176,15 @@ export default {
         colVisible: 'Chiều rộng (pixels)',
         colFixed: 'Sử dụn',
         colFixedMax: 'Sử dụng (lên đến {0})',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
         fixedLeft: 'Trái',
-        fixedUnset: 'Không',
+        fixedUnset: '无',
         fixedRight: 'Đúng',
+        alignLeft: '居左',
+        alignCenter: '居中',
+        alignRight: '居右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: 'Đóng băng bên phải',
       cancelFixed: 'Mở ra cột'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} năm'
     },

package/packages/locale/lang/zh-CHT.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: '列寬（像素）',
         colVisible: '是否顯示',
         colFixed: '凍結列',
-        colFixedMax: '凍結列（最多 {0} 列）',
-        fixedLeft: '左側',
-        fixedUnset: '不設置',
-        fixedRight: '右側',
+        colFixedMax: '凍結列（{0}）',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
+        fixedLeft: '左',
+        fixedUnset: '无',
+        fixedRight: '右',
+        alignLeft: '左',
+        alignCenter: '中',
+        alignRight: '右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: '凍結在右側',
       cancelFixed: '取消凍結列'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} 年'
     },

package/packages/locale/lang/zh-CN.ts

@@ -175,10 +175,16 @@ export default {
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
-        colFixedMax: '冻结列（最多 {0} 列）',
-        fixedLeft: '左侧',
-        fixedUnset: '不设置',
-        fixedRight: '右侧',
+        colFixedMax: '冻结列（{0}）',
+        colAlign: '对齐方式',
+        colHeadAlign: '表头对齐方式',
+        colFootAlign: '表尾对齐方式',
+        fixedLeft: '左',
+        fixedUnset: '无',
+        fixedRight: '右',
+        alignLeft: '左',
+        alignCenter: '中',
+        alignRight: '右',
         moveUp: '上移',
         moveDn: '下移',
         putTop: '置顶',
@@ -186,7 +192,10 @@ export default {
         moveUpTitle: '点击向上移动',
         moveDnTitle: '点击向下移动',
         putTopTitle: '点击置顶',
-        putBottomTitle: '点击置尾'
+        putBottomTitle: '点击置尾',
+        anLeftTitle: '左对齐',
+        anCenterTitle: '居中',
+        anRightTitle: '右对齐'
       }
     },
     import: {
@@ -287,6 +296,10 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    iconPicker: {
+      search: '搜索',
+      emptyText: '暂无数据'
+    },
     datePicker: {
       yearTitle: '{0} 年'
     },

package/packages/table/module/custom/hook.ts

@@ -8,6 +8,8 @@ import type { TableCustomMethods, TableCustomPrivateMethods, VxeColumnPropTypes,
 
 const tableCustomMethodKeys: (keyof TableCustomMethods)[] = ['openCustom', 'closeCustom', 'getCustomVisible', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox']
 
+const customColumnCssKeys = ['checkbox', 'sort', 'title', 'width', 'fixed', 'align', 'header-align', 'footer-align']
+
 VxeUI.hooks.add('tableCustomModule', {
   setupTable ($xeTable) {
     const { reactData, internalData } = $xeTable
@@ -23,14 +25,15 @@ VxeUI.hooks.add('tableCustomModule', {
       const customOpts = computeCustomOpts.value
       const { mode, placement, popupOptions } = customOpts
       const showSimple = !(mode === 'modal' || mode === 'drawer')
-      const { transfer, maxHeight } = popupOptions || {}
+      const { transfer, minWidth, maxWidth, maxHeight } = popupOptions || {}
       const customSimpleMode = computeCustomSimpleMode.value
       const showCustomSimpleOutside = customSimpleMode === 'outside'
       const bodyEl = document.documentElement
       let wrapperEl = refElem.value
       let popupTop = 0
       let popupMaxHeight: string | number = 0
-      const popupStys: VxeComponentStyleType = {}
+      const defPupStys: VxeComponentStyleType = {}
+      const panePupStys: VxeComponentStyleType = {}
       if ($xeGantt) {
         const { refGanttContainerElem } = $xeGantt.getRefMaps()
         const ganttContainerElem = refGanttContainerElem.value
@@ -61,25 +64,42 @@ VxeUI.hooks.add('tableCustomModule', {
       }
       if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
         if (popupTop) {
-          popupStys.top = toCssUnit(popupTop)
+          defPupStys.top = toCssUnit(popupTop)
         }
       }
 
       if (showSimple && transfer) {
         if (placement === 'bottom-left' || placement === 'bottom-right') {
-          popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1)
+          defPupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1)
         }
         if (placement === 'top-left' || placement === 'bottom-left') {
-          popupStys.left = toCssUnit(tableRect.left)
+          defPupStys.left = toCssUnit(tableRect.left)
         } else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
-          popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1)
+          defPupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1)
         }
       }
 
+      // 同步表格的css变量到弹窗中
+      const bodyComputeStyle = getComputedStyle(bodyEl)
+      const tableComputeStyle = getComputedStyle(wrapperEl)
+      customColumnCssKeys.forEach(key => {
+        const currCssKey = `--vxe-ui-vxe-table-custom-column-${key}-${key === 'title' ? 'min-' : ''}width`
+        const currCssVal = tableComputeStyle.getPropertyValue(currCssKey)
+        if (currCssVal && currCssVal !== bodyComputeStyle.getPropertyValue(currCssKey)) {
+          panePupStys[currCssKey] = currCssVal
+        }
+      })
+      if (minWidth) {
+        defPupStys['--vxe-ui-vxe-table-custom-default-min-width'] = toCssUnit(minWidth)
+      }
+      if (maxWidth) {
+        defPupStys['--vxe-ui-vxe-table-custom-default-max-width'] = toCssUnit(maxWidth)
+      }
       if (popupMxHeight) {
-        popupStys.maxHeight = toCssUnit(popupMxHeight)
+        defPupStys.maxHeight = toCssUnit(popupMxHeight)
       }
-      customStore.popupStyle = popupStys
+      customStore.defPopupStyle = defPupStys
+      customStore.panePopupStyle = panePupStys
       customStore.maxHeight = popupMxHeight
       return nextTick()
     }
@@ -129,6 +149,9 @@ VxeUI.hooks.add('tableCustomModule', {
           column.renderFixed = column.fixed
           column.renderVisible = column.visible
           column.renderResizeWidth = column.renderWidth
+          column.renderAlign = column.align
+          column.renderHeaderAlign = column.headerAlign
+          column.renderFooterAlign = column.footerAlign
           sortMaps[colid] = column.renderSortNumber
           fixedMaps[colid] = column.fixed
           visibleMaps[colid] = column.visible
@@ -160,38 +183,57 @@ VxeUI.hooks.add('tableCustomModule', {
       return openCustom()
     }
 
-    const saveCustom = () => {
+    const saveCustom = (isDirectly?: boolean) => {
       const { customColumnList, aggHandleFields, rowGroupList } = reactData
       const customOpts = computeCustomOpts.value
-      const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts
-      XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
-        if (parentColumn) {
-          // 更新子列信息
-          column.fixed = parentColumn.fixed
-        } else {
-          if (allowSort) {
-            const sortIndex = index + 1
-            column.renderSortNumber = sortIndex
+      const { allowVisible, allowSort, allowFixed, allowResizable, allowAlign, allowHeaderAlign, allowFooterAlign, allowGroup, allowValues } = customOpts
+      if (isDirectly) {
+        XEUtils.eachTree(customColumnList, (column) => {
+          if (allowResizable) {
+            if (column.renderVisible && (!column.children || !column.children.length)) {
+              column.resizeWidth = Math.max(0, XEUtils.toNumber(column.renderWidth))
+            }
           }
-          if (allowFixed) {
-            column.fixed = column.renderFixed
+        })
+      } else {
+        XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
+          if (parentColumn) {
+          // 更新子列信息
+            column.fixed = parentColumn.fixed
+          } else {
+            if (allowSort) {
+              const sortIndex = index + 1
+              column.renderSortNumber = sortIndex
+            }
+            if (allowFixed) {
+              column.fixed = column.renderFixed
+            }
           }
-        }
-        if (allowResizable) {
-          if (column.renderVisible && (!column.children || !column.children.length)) {
-            if (column.renderResizeWidth !== column.renderWidth) {
-              column.resizeWidth = column.renderResizeWidth
-              column.renderWidth = column.renderResizeWidth
+          if (allowResizable) {
+            if (column.renderVisible && (!column.children || !column.children.length)) {
+              if (column.renderResizeWidth !== column.renderWidth) {
+                column.resizeWidth = column.renderResizeWidth
+                column.renderWidth = column.renderResizeWidth
+              }
             }
           }
-        }
-        if (allowVisible) {
-          column.visible = column.renderVisible
-        }
-        if (allowGroup && allowValues) {
-          column.aggFunc = column.renderAggFn
-        }
-      })
+          if (allowVisible) {
+            column.visible = column.renderVisible
+          }
+          if (allowAlign) {
+            column.align = column.renderAlign
+          }
+          if (allowHeaderAlign) {
+            column.headerAlign = column.renderHeaderAlign
+          }
+          if (allowFooterAlign) {
+            column.footerAlign = column.renderFooterAlign
+          }
+          if (allowGroup && allowValues) {
+            column.aggFunc = column.renderAggFn
+          }
+        })
+      }
       reactData.isCustomStatus = true
       if (allowGroup && !!$xeTable.handlePivotTableAggData) {
         if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
@@ -216,7 +258,7 @@ VxeUI.hooks.add('tableCustomModule', {
       const { customColumnList, customStore } = reactData
       const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore
       const customOpts = computeCustomOpts.value
-      const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts
+      const { allowVisible, allowSort, allowFixed, allowAlign, allowHeaderAlign, allowFooterAlign, allowResizable, allowGroup, allowValues } = customOpts
       XEUtils.eachTree(customColumnList, column => {
         const colid = column.getKey()
         const visible = !!oldVisibleMaps[colid]
@@ -235,6 +277,21 @@ VxeUI.hooks.add('tableCustomModule', {
         if (allowResizable) {
           column.renderResizeWidth = column.renderWidth
         }
+        if (allowAlign) {
+          column.align = column.renderAlign
+        }
+        if (allowHeaderAlign) {
+          column.headerAlign = column.renderHeaderAlign
+        }
+        if (allowFooterAlign) {
+          column.footerAlign = column.renderFooterAlign
+        }
+        if (allowGroup) {
+          // 无
+        }
+        if (allowValues) {
+          // 无
+        }
       }, { children: 'children' })
       return nextTick()
     }
@@ -298,7 +355,10 @@ VxeUI.hooks.add('tableCustomModule', {
           resizable: options === true,
           fixed: options === true,
           sort: options === true,
-          aggFunc: options === true
+          aggFunc: options === true,
+          align: options === true,
+          headerAlign: options === true,
+          footerAlign: options === true
         }, options)
         const allCols: VxeTableDefines.ColumnInfo[] = []
         XEUtils.eachTree(collectColumn, (column) => {
@@ -307,6 +367,7 @@ VxeUI.hooks.add('tableCustomModule', {
           }
           if (opts.fixed) {
             column.fixed = column.defaultFixed
+            column.renderFixed = column.defaultFixed
           }
           if (opts.sort) {
             column.renderSortNumber = column.sortNumber
@@ -315,6 +376,18 @@ VxeUI.hooks.add('tableCustomModule', {
           if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
             column.visible = column.defaultVisible
           }
+          if (opts.align) {
+            column.align = column.defaultAlign
+            column.renderAlign = column.defaultAlign
+          }
+          if (opts.headerAlign) {
+            column.headerAlign = column.defaultHeaderAlign
+            column.renderHeaderAlign = column.defaultHeaderAlign
+          }
+          if (opts.footerAlign) {
+            column.footerAlign = column.defaultFooterAlign
+            column.renderFooterAlign = column.defaultFooterAlign
+          }
           if (opts.aggFunc) {
             column.aggFunc = column.defaultAggFunc
             column.renderAggFn = column.defaultAggFunc
@@ -375,10 +448,12 @@ VxeUI.hooks.add('tableCustomModule', {
         if (customStore.visible) {
           closeCustom()
           emitCustomEvent('close', evnt)
+          $xeTable.dispatchEvent('custom-close', {}, evnt)
         } else {
           customStore.btnEl = evnt.target as HTMLDivElement
           openCustom()
           emitCustomEvent('open', evnt)
+          $xeTable.dispatchEvent('custom-open', {}, evnt)
         }
       },
       customOpenEvent (evnt) {
@@ -390,6 +465,7 @@ VxeUI.hooks.add('tableCustomModule', {
           customStore.btnEl = evnt.target as HTMLDivElement
           $xeTable.openCustom()
           $xeTable.emitCustomEvent('open', evnt)
+          $xeTable.dispatchEvent('custom-open', {}, evnt)
         }
       },
       customCloseEvent (evnt) {
@@ -400,6 +476,7 @@ VxeUI.hooks.add('tableCustomModule', {
           customStore.activeBtn = false
           $xeTable.closeCustom()
           $xeTable.emitCustomEvent('close', evnt)
+          $xeTable.dispatchEvent('custom-close', {}, evnt)
         }
       },
       handleUpdateCustomColumn,