vxe-table 4.17.0-beta.0 → 4.17.0-beta.10

package/packages/table/src/header.ts

@@ -123,7 +123,7 @@ export default defineVxeComponent({
           columnIndex,
           $columnIndex,
           _columnIndex,
-          firstFilterOption,
+          firstFilterOption: firstFilterOption as VxeTableDefines.FilterOption,
           fixed: fixedType,
           type: renderType,
           isHidden: fixedHiddenColumn,
@@ -314,7 +314,7 @@ export default defineVxeComponent({
           columnIndex,
           $columnIndex,
           _columnIndex,
-          option: firstFilterOption,
+          option: firstFilterOption as VxeTableDefines.FilterOption,
           fixed: fixedType,
           type: renderType,
           isHidden: fixedHiddenColumn,

package/packages/table/src/table.ts

@@ -2470,7 +2470,6 @@ export default defineVxeComponent({
       }
 
       const scrollbarXConf = scrollbarOpts.x || {}
-      const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYConf = scrollbarOpts.y || {}
       const scrollbarYToLeft = computeScrollbarYToLeft.value
 
@@ -2522,16 +2521,28 @@ export default defineVxeComponent({
       }
       const xWrapperEl = refScrollXWrapperElem.value
       if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
         xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
+        if (scrollbarYToLeft) {
+          xWrapperEl.style.left = `${osbWidth}px`
+        } else {
+          xWrapperEl.style.left = ''
+        }
       }
       if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
-        xLeftCornerEl.style.display = scrollbarXToTop ? (overflowX && osbHeight ? 'block' : '') : ''
+        if (scrollbarYToLeft) {
+          xLeftCornerEl.style.width = `${osbWidth}px`
+          xLeftCornerEl.style.display = overflowY && osbWidth ? 'block' : ''
+        } else {
+          xLeftCornerEl.style.display = ''
+        }
       }
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '')
+        if (scrollbarYToLeft) {
+          xRightCornerEl.style.display = ''
+        } else {
+          xRightCornerEl.style.width = `${osbWidth}px`
+          xRightCornerEl.style.display = xScrollbarVisible === 'visible' ? 'block' : ''
+        }
       }
 
       const scrollYVirtualEl = refScrollYVirtualElem.value
@@ -4149,8 +4160,10 @@ export default defineVxeComponent({
         updateAfterDataIndex()
         return nextTick()
       }).then(() => {
+        updateTreeLineStyle()
         return handleLazyRecalculate(true, true, true)
       }).then(() => {
+        updateTreeLineStyle()
         setTimeout(() => {
           $xeTable.updateCellAreas()
         }, 30)
@@ -4418,7 +4431,9 @@ export default defineVxeComponent({
       let countTop = 0
       const step = (timestamp: number) => {
         let progress = (timestamp - startTime) / duration
-        if (progress > 1) {
+        if (progress < 0) {
+          progress = 0
+        } else if (progress > 1) {
           progress = 1
         }
         const easedProgress = Math.pow(progress, 2)
@@ -4521,6 +4536,9 @@ export default defineVxeComponent({
       }
     }
 
+    /**
+     * 更新展开行样式
+     */
     const updateRowExpandStyle = () => {
       const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData
       const expandOpts = computeExpandOpts.value
@@ -4576,6 +4594,13 @@ export default defineVxeComponent({
       }
     }
 
+    /**
+     * 更新树连接线样式
+     */
+    const updateTreeLineStyle = () => {
+      // 待优化
+    }
+
     const handleRowExpandScroll = () => {
       const { elemStore } = internalData
       const rowExpandEl = refRowExpandElem.value
@@ -9966,8 +9991,8 @@ export default defineVxeComponent({
             $xeTable.handleHeaderCellDragMousedownEvent(evnt, params)
           }
         }
-        if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaModownEvent) {
-          $xeTable.handleHeaderCellAreaModownEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params))
+        if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaMouseDnEvent) {
+          $xeTable.handleHeaderCellAreaMouseDnEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params))
         }
         $xeTable.focus()
         if ($xeTable.closeMenu) {
@@ -11358,6 +11383,10 @@ export default defineVxeComponent({
         if (target && /^textarea$/i.test((target as HTMLElement).tagName)) {
           return
         }
+        // 如果滚轮未移动或者触摸板未变化位置
+        if (!deltaY && !deltaX) {
+          return
+        }
 
         const { highlightHoverRow } = tableProps
         const { scrollXLoad, scrollYLoad, expandColumn } = reactData
@@ -11388,21 +11417,25 @@ export default defineVxeComponent({
         }
 
         const wheelSpeed = getWheelSpeed(reactData.lastScrollTime)
-        const deltaTop = shiftKey ? 0 : Math.ceil(deltaY * wheelSpeed)
-        const deltaLeft = shiftKey ? Math.ceil((shiftKey ? (deltaY || deltaX) : deltaX) * wheelSpeed) : 0
+        const deltaTop = shiftKey ? 0 : (deltaY * wheelSpeed)
+        const deltaLeft = (shiftKey ? (deltaX || deltaY) : deltaX) * wheelSpeed
 
-        const isTopWheel = deltaTop < 0
         const currScrollTop = bodyScrollElem.scrollTop
+        const currScrollLeft = bodyScrollElem.scrollLeft
 
-        // 如果滚动位置已经是顶部或底部，则不需要触发
-        if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
-          return
-        }
         const scrollTop = currScrollTop + deltaTop
-        const scrollLeft = bodyScrollElem.scrollLeft + deltaLeft
+        const scrollLeft = currScrollLeft + deltaLeft
         const isRollX = scrollLeft !== lastScrollLeft
         const isRollY = scrollTop !== lastScrollTop
 
+        if (isRollY) {
+          const isTopWheel = deltaTop < 0
+          // 如果滚动位置已经是顶部或底部，则不需要触发
+          if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
+            return
+          }
+        }
+
         if (rowOpts.isHover || highlightHoverRow) {
           $xeTable.clearHoverRow()
         }

package/packages/table/src/util.ts

@@ -638,7 +638,7 @@ const lineOffsetSizes = {
   large: 0
 }
 
-function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
+function countTreeExpandSize (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
   let count = 1
   if (!prevRow) {
     return count
@@ -655,7 +655,7 @@ function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyPa
   const rowChildren = prevRow[transform ? mapChildrenField : childrenField]
   if (rowChildren && treeExpandedFlag && treeExpandedMaps[getRowid($table, prevRow)]) {
     for (let index = 0; index < rowChildren.length; index++) {
-      count += countTreeExpand(rowChildren[index], params)
+      count += countTreeExpandSize(rowChildren[index], params)
     }
   }
   return count
@@ -688,7 +688,7 @@ export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prev
   const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
   let expandSize = 1
   if (prevRow) {
-    expandSize = countTreeExpand(prevRow, params)
+    expandSize = countTreeExpandSize(prevRow, params)
   }
   let cellHeight = currCellHeight
   const vnHeight = rowRest.height

package/packages/ui/src/utils.ts

@@ -2,6 +2,8 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '@vxe-ui/core'
 import DomZIndex from 'dom-zindex'
 
+const { getConfig } = VxeUI
+
 export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
@@ -31,15 +33,15 @@ export function hasChildrenList (item: any) {
 }
 
 export function getFuncText (content?: string | number | boolean | null, args?: any) {
-  if (content) {
-    const translate = VxeUI.getConfig().translate
-    return XEUtils.toValueString(translate ? translate('' + content, args) : content)
+  if (XEUtils.eqNull(content)) {
+    return ''
   }
-  return ''
+  const translate = getConfig().translate
+  return `${translate ? translate('' + content, args) : content}`
 }
 
 export function formatText (value: any, placeholder?: any) {
-  return '' + (isEmptyValue(value) ? (placeholder ? VxeUI.getConfig().emptyCell : '') : value)
+  return '' + (isEmptyValue(value) ? (placeholder ? getConfig().emptyCell : '') : value)
 }
 
 /**

package/styles/components/table.scss

@@ -640,6 +640,9 @@ $btnThemeList: (
     left: 0;
     bottom: 0;
   }
+  .vxe-table--scroll-x-wrapper {
+    height: 100%;
+  }
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
     overflow-x: scroll;