vxe-table 3.21.21 → 3.21.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/mixin.ts

@@ -4,6 +4,8 @@ import { toCssUnit } from '../../../ui/src/dom'
 
 import type { VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, TableReactData, TableInternalData, VxeComponentStyleType } from '../../../../types'
 
+const customColumnCssKeys = ['checkbox', 'sort', 'title', 'width', 'fixed', 'align', 'header-align', 'footer-align']
+
 function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const $xeGrid = $xeTable.$xeGrid
   const $xeGantt = $xeTable.$xeGantt
@@ -14,14 +16,15 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const customOpts = $xeTable.computeCustomOpts
   const { mode, placement, popupOptions } = customOpts
   const showSimple = !(mode === 'modal' || mode === 'drawer')
-  const { transfer, maxHeight } = popupOptions || {}
+  const { transfer, minWidth, maxWidth, maxHeight } = popupOptions || {}
   const customSimpleMode = $xeTable.computeCustomSimpleMode
   const showCustomSimpleOutside = customSimpleMode === 'outside'
   const bodyEl = document.documentElement
   let wrapperEl = $xeTable.$refs.refElem as HTMLDivElement
   let popupTop = 0
   let popupMaxHeight: string | number = 0
-  const popupStys: VxeComponentStyleType = {}
+  const defPupStys: VxeComponentStyleType = {}
+  const panePupStys: VxeComponentStyleType = {}
   if ($xeGantt) {
     const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem as HTMLDivElement
     if (ganttContainerElem) {
@@ -51,25 +54,42 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   }
   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 $xeTable.$nextTick()
 }
@@ -159,44 +179,63 @@ export default {
       }
       return $xeTable.openCustom()
     },
-    _saveCustom () {
+    _saveCustom (isDirectly?: boolean) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
 
       const { customColumnList, aggHandleFields, rowGroupList } = reactData
       const customOpts = $xeTable.computeCustomOpts
-      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 && allowValues && !!$xeTable.handlePivotTableAggData) {
+      if (allowGroup && !!$xeTable.handlePivotTableAggData) {
         if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
           // 更新数据分组
           if (aggHandleFields.length) {
@@ -221,7 +260,7 @@ export default {
       const { customColumnList, customStore } = reactData
       const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore
       const customOpts = $xeTable.computeCustomOpts
-      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]
@@ -240,6 +279,21 @@ export default {
         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 $xeTable.$nextTick()
     },
@@ -252,12 +306,15 @@ export default {
       const { collectColumn } = internalData
       const customOpts = $xeTable.computeCustomOpts
       const { checkMethod } = customOpts
-      const opts = Object.assign({
+      const opts: VxeTableDefines.VxeTableCustomStorageObj = Object.assign({
         visible: true,
         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) => {
@@ -266,6 +323,7 @@ export default {
         }
         if (opts.fixed) {
           column.fixed = column.defaultFixed
+          column.renderFixed = column.defaultFixed
         }
         if (opts.sort) {
           column.renderSortNumber = column.sortNumber
@@ -274,6 +332,18 @@ export default {
         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
@@ -376,10 +446,12 @@ export default {
       if (customStore.visible) {
         $xeTable.closeCustom()
         emitCustomEvent($xeTable, 'close', evnt)
+        $xeTable.dispatchEvent('custom-close', {}, evnt)
       } else {
         customStore.btnEl = evnt.target
         $xeTable.openCustom()
         emitCustomEvent($xeTable, 'open', evnt)
+        $xeTable.dispatchEvent('custom-open', {}, evnt)
       }
     },
     customOpenEvent (evnt: any) {
@@ -392,6 +464,7 @@ export default {
         customStore.btnEl = evnt.target
         $xeTable.openCustom()
         emitCustomEvent($xeTable, 'open', evnt)
+        $xeTable.dispatchEvent('custom-open', {}, evnt)
       }
     },
     customCloseEvent (evnt: any) {
@@ -403,6 +476,7 @@ export default {
         customStore.activeBtn = false
         $xeTable.closeCustom()
         emitCustomEvent($xeTable, 'close', evnt)
+        $xeTable.dispatchEvent('custom-close', {}, evnt)
       }
     },
     handleUpdateCustomColumn () {
@@ -421,6 +495,9 @@ export default {
           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