vxe-table 4.19.0-beta.9 → 4.19.1

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

@@ -25,7 +25,7 @@ export default {
       useErr: '安裝 "{0}" 模塊時發生錯誤，可能順序不正確，依賴的模塊需要在 Table 之前安裝',
       barUnableLink: '工具欄無法關聯表格',
       expandContent: '展開行的插槽應該是 "content"，請檢查是否正確',
-      reqComp: '缺少 "{0}" 組件，請檢查是否正確安裝。 https://vxeui.com/#/start/useGlobal',
+      reqComp: '缺少 "{0}" 组件，请检查是否正确安装。 https://vxeui.com/#/start/useUI/useGlobal',
       reqModule: '缺少 "{0}" 模塊',
       reqProp: '缺少必要的 "{0}" 參數，這可能會導致出現錯誤',
       emptyProp: '參數 "{0}" 不允許為空',
@@ -104,7 +104,8 @@ export default {
     select: {
       clear: '清除',
       allChecked: '全選',
-      total: '{0} / {1}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜尋',
       loadingText: '載入中',
       emptyText: '暫無數據',
@@ -121,7 +122,8 @@ export default {
       allChecked: '全選',
       allExpand: '全部展開',
       clearExpand: '全部收起',
-      total: '已選 {0}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜尋',
       emptyText: '暫無數據'
     },

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

@@ -25,7 +25,7 @@ export default {
       useErr: '安装 "{0}" 模块时发生错误，可能顺序不正确，依赖的模块需要在 Table 之前安装',
       barUnableLink: '工具栏无法关联表格',
       expandContent: '展开行的插槽应该是 "content"，请检查是否正确',
-      reqComp: '缺少 "{0}" 组件，请检查是否正确安装。 https://vxeui.com/#/start/useGlobal',
+      reqComp: '缺少 "{0}" 组件，请检查是否正确安装。 https://vxeui.com/#/start/useUI/useGlobal',
       reqModule: '缺少 "{0}" 模块',
       reqProp: '缺少必要的 "{0}" 参数，这可能会导致出现错误',
       emptyProp: '参数 "{0}" 不允许为空',
@@ -104,7 +104,8 @@ export default {
     select: {
       clear: '清除',
       allChecked: '全选',
-      total: '{0} / {1}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜索',
       loadingText: '加载中...',
       emptyText: '暂无数据',
@@ -121,7 +122,8 @@ export default {
       allChecked: '全选',
       allExpand: '全部展开',
       clearExpand: '全部收起',
-      total: '已选 {0}',
+      total: '已选 {0} 项',
+      close: '关闭',
       search: '搜索',
       emptyText: '暂无数据'
     },

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

@@ -43,7 +43,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeSize, computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { computeSize, computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts, computeAggregateOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyWrapperElem = ref() as Ref<HTMLDivElement>
@@ -537,7 +537,7 @@ export default defineVxeComponent({
 
     const sortDragoverEvent = (evnt: DragEvent) => {
       const customOpts = computeCustomOpts.value
-      const { immediate } = customOpts
+      const { showSortDragButton, allowSort, immediate } = customOpts
       const columnDragOpts = computeColumnDragOpts.value
       const { isCrossDrag, isToChildDrag } = columnDragOpts
       const optEl = evnt.currentTarget as HTMLElement
@@ -554,9 +554,12 @@ export default defineVxeComponent({
         const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom'
         if (
           !dragCol ||
+          !(showSortDragButton && allowSort) ||
           (dragCol && dragCol.id === column.id) ||
           (!isCrossDrag && column.level > 1) ||
-          (!immediate && column.level > 1)
+          (!immediate && column.level > 1) ||
+          (!isCrossDrag && dragCol.level > 1) ||
+          (!immediate && dragCol.level > 1)
         ) {
           showDropTip(evnt, optEl, false, dragPos)
           return
@@ -697,7 +700,7 @@ export default defineVxeComponent({
       const { immediate } = customOpts
       const columnDragOpts = computeColumnDragOpts.value
       const { popupStyle } = customStore
-      const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement, showSortDragButton, showSortMoveButton, showSortPutButton } = customOpts
+      const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, allowGroup, allowValues, trigger, placement, showSortDragButton, showSortMoveButton, showSortPutButton } = customOpts
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
       const vSize = computeSize.value
       const { isCrossDrag } = columnDragOpts
@@ -769,27 +772,31 @@ export default defineVxeComponent({
               h('div', {
                 class: 'vxe-table-custom--name-option'
               }, [
-                allowSort && showSortDragButton && showSortBtn
-                  ? h('div', {
-                    class: 'vxe-table-custom--sort-option'
-                  }, [
-                    h('span', {
-                      class: ['vxe-table-custom--sort-btn', {
-                        'is--disabled': isHidden
-                      }],
-                      title: getI18n('vxe.custom.setting.sortHelpTip'),
-                      ...(isHidden
-                        ? {}
-                        : {
-                            onMousedown: sortMousedownEvent,
-                            onMouseup: sortMouseupEvent
-                          })
-                    }, [
-                      h('i', {
-                        class: getIcon().TABLE_CUSTOM_SORT
-                      })
-                    ])
-                  ])
+                (allowSort && showSortDragButton) || (allowGroup || allowValues)
+                  ? (
+                      showSortBtn || ((allowGroup || allowValues) && !isColGroup)
+                        ? h('div', {
+                          class: 'vxe-table-custom--sort-option'
+                        }, [
+                          h('span', {
+                            class: ['vxe-table-custom--sort-btn', {
+                              'is--disabled': isHidden
+                            }],
+                            title: getI18n('vxe.custom.setting.sortHelpTip'),
+                            ...(isHidden
+                              ? {}
+                              : {
+                                  onMousedown: sortMousedownEvent,
+                                  onMouseup: sortMouseupEvent
+                                })
+                          }, [
+                            h('i', {
+                              class: getIcon().TABLE_CUSTOM_SORT
+                            })
+                          ])
+                        ])
+                        : renderEmptyElement($xeTable)
+                    )
                   : renderEmptyElement($xeTable),
                 column.type === 'html'
                   ? h('div', {
@@ -1030,9 +1037,10 @@ export default defineVxeComponent({
       const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps
       const { isCustomStatus, customColumnList } = tableReactData
       const customOpts = computeCustomOpts.value
-      const { immediate, showSortDragButton, showSortMoveButton, showSortPutButton } = customOpts
       const columnDragOpts = computeColumnDragOpts.value
-      const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
+      const aggregateOpts = computeAggregateOpts.value
+      const { placement: aggPlacement } = aggregateOpts
+      const { mode, immediate, showSortDragButton, showSortMoveButton, showSortPutButton, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues, checkMethod, visibleMethod } = customOpts
       const columnOpts = computeColumnOpts.value
       const { maxFixedSize } = columnOpts
       const resizableOpts = computeResizableOpts.value
@@ -1050,6 +1058,7 @@ export default defineVxeComponent({
       const trVNs: VNode[] = []
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
+      const isAggRtBmLayout = aggPlacement === 'right' || aggPlacement === 'bottom'
       const params = {
         $table: $xeTable,
         $grid: $xeGrid,
@@ -1128,27 +1137,29 @@ export default defineVxeComponent({
                 h('div', {
                   class: 'vxe-table-custom-popup--name'
                 }, [
-                  allowSort
-                    ? showSortDragButton && (showSortBtn
-                      ? h('div', {
-                        class: ['vxe-table-custom-popup--column-sort-btn', {
-                          'is--disabled': isHidden
-                        }],
-                        title: getI18n('vxe.custom.setting.sortHelpTip'),
-                        ...(isHidden
-                          ? {}
-                          : {
-                              onMousedown: sortMousedownEvent,
-                              onMouseup: sortMouseupEvent
+                  (allowSort && showSortDragButton) || (allowGroup || allowValues)
+                    ? (
+                        showSortBtn || ((allowGroup || allowValues) && !isColGroup)
+                          ? h('div', {
+                            class: ['vxe-table-custom-popup--column-sort-btn', {
+                              'is--disabled': isHidden
+                            }],
+                            title: getI18n('vxe.custom.setting.sortHelpTip'),
+                            ...(isHidden
+                              ? {}
+                              : {
+                                  onMousedown: sortMousedownEvent,
+                                  onMouseup: sortMouseupEvent
+                                })
+                          }, [
+                            h('i', {
+                              class: getIcon().TABLE_CUSTOM_SORT
                             })
-                      }, [
-                        h('i', {
-                          class: getIcon().TABLE_CUSTOM_SORT
-                        })
-                      ])
-                      : h('div', {
-                        class: 'vxe-table-custom-popup--column-sort-placeholder'
-                      }))
+                          ])
+                          : h('div', {
+                            class: 'vxe-table-custom-popup--column-sort-placeholder'
+                          })
+                      )
                     : renderEmptyElement($xeTable),
                   column.type === 'html'
                     ? h('div', {
@@ -1279,11 +1290,11 @@ export default defineVxeComponent({
         default: () => {
           return h('div', {
             ref: refBodyWrapperElem,
-            class: 'vxe-table-custom-popup--body-wrapper'
+            class: ['vxe-table-custom-popup--body-wrapper', `agg-layout--${aggPlacement}`]
           }, defaultSlot
             ? $xeTable.callSlot(defaultSlot, params)
             : [
-                !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                !isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
                   ? h($xeTable.getPivotTableAggregatePopupPanel(), {
                     customStore
                   })
@@ -1366,7 +1377,12 @@ export default defineVxeComponent({
                     }, $xeTable.callSlot(bottomSlot, params))
                     : renderEmptyElement($xeTable),
                   renderDragTip()
-                ])
+                ]),
+                isAggRtBmLayout && !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                  ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                    customStore
+                  })
+                  : renderEmptyElement($xeTable)
               ])
         },
         footer: () => {

package/packages/table/src/table.ts

@@ -1884,6 +1884,7 @@ export default defineVxeComponent({
      * 计算自适应列宽
      */
     const calcColumnAutoWidth = (column: VxeTableDefines.ColumnInfo, wrapperEl: HTMLDivElement) => {
+      const { scrollYLoad } = reactData
       const columnOpts = computeColumnOpts.value
       const { autoOptions } = columnOpts
       const { isCalcHeader, isCalcBody, isCalcFooter } = autoOptions || {}
@@ -1904,7 +1905,7 @@ export default defineVxeComponent({
         const cellStyle = getComputedStyle(firstCellEl.parentElement)
         leftRightPadding = Math.ceil(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight))
       }
-      let colWidth = column.renderAutoWidth - leftRightPadding
+      let colWidth = (scrollYLoad ? column.renderAutoWidth : 0) - leftRightPadding
       for (let i = 0; i < cellElemList.length; i++) {
         const celEl = cellElemList[i] as HTMLDivElement
         colWidth = Math.max(colWidth, celEl ? Math.ceil(celEl.scrollWidth) + 4 : 0)
@@ -4553,7 +4554,7 @@ export default defineVxeComponent({
             })
           }
         })
-      }, 200)
+      }, 240)
     }
 
     const getWheelSpeed = (lastScrollTime: number) => {
@@ -12265,7 +12266,7 @@ export default defineVxeComponent({
         }
 
         const { highlightHoverRow } = tableProps
-        const { scrollXLoad, scrollYLoad, expandColumn } = reactData
+        const { scrollXLoad, scrollYLoad, overflowX, overflowY, expandColumn } = reactData
         const leftFixedWidth = computeLeftFixedWidth.value
         const rightFixedWidth = computeRightFixedWidth.value
 
@@ -12292,10 +12293,10 @@ export default defineVxeComponent({
         const currScrollTop = bodyScrollElem.scrollTop
         const currScrollLeft = bodyScrollElem.scrollLeft
 
-        const scrollTop = currScrollTop + deltaTop
-        const scrollLeft = currScrollLeft + deltaLeft
-        const isRollX = scrollLeft !== lastScrollLeft
-        const isRollY = scrollTop !== lastScrollTop
+        const scrollTop = Math.max(0, currScrollTop + deltaTop)
+        const scrollLeft = Math.max(0, currScrollLeft + deltaLeft)
+        const isRollX = overflowX && scrollLeft !== lastScrollLeft
+        const isRollY = overflowY && scrollTop !== lastScrollTop
 
         if (isRollX) {
           // 如果禁用滚动
@@ -12333,7 +12334,7 @@ export default defineVxeComponent({
           }
         }
 
-        if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
+        if (!(isRollX || leftFixedWidth || rightFixedWidth || expandColumn)) {
           return
         }
 
@@ -14110,7 +14111,7 @@ export default defineVxeComponent({
         warnLog('vxe.error.errConflicts', ['mouse-config.area', 'mouse-config.selected'])
       }
       if (mouseOpts.area && (props.treeConfig && !treeOpts.transform)) {
-        errLog('vxe.error.noTree', ['mouse-config.area'])
+        errLog('vxe.error.notSupportProp', ['mouse-config.area', 'tree-config.transform=false', 'tree-config.transform=true'])
       }
       if (props.editConfig && editOpts.activeMethod) {
         warnLog('vxe.error.delProp', ['edit-config.activeMethod', 'edit-config.beforeEditMethod'])

package/packages/ui/index.ts

@@ -170,6 +170,7 @@ VxeUI.setConfig({
     },
     aggregateConfig: {
       padding: true,
+      placement: 'left',
       rowField: 'id',
       parentField: '_X_ROW_PARENT_KEY',
       childrenField: '_X_ROW_CHILDREN',

package/styles/components/table-module/custom.scss

@@ -225,10 +225,14 @@
 .vxe-table-custom-popup--body-wrapper {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   overflow: hidden;
   height: 100%;
   outline: 0;
+  &.agg-layout--top,
+  &.agg-layout--bottom {
+    flex-direction: column;
+  }
 }
 .vxe-table-custom-popup--handle-wrapper {
   flex-grow: 1;