vxe-table 4.10.6-beta.6 → 4.10.6-beta.8

package/packages/table/src/table.ts

@@ -391,9 +391,12 @@ export default defineComponent({
     const refScrollXVirtualElem = ref<HTMLDivElement>()
     const refScrollYVirtualElem = ref<HTMLDivElement>()
     const refScrollXHandleElem = ref<HTMLDivElement>()
+    const refScrollXLeftCornerElem = ref<HTMLDivElement>()
     const refScrollXRightCornerElem = ref<HTMLDivElement>()
     const refScrollYHandleElem = ref<HTMLDivElement>()
     const refScrollYTopCornerElem = ref<HTMLDivElement>()
+    const refScrollXWrapperElem = ref<HTMLDivElement>()
+    const refScrollYWrapperElem = ref<HTMLDivElement>()
     const refScrollYBottomCornerElem = ref<HTMLDivElement>()
     const refScrollXSpaceElem = ref<HTMLDivElement>()
     const refScrollYSpaceElem = ref<HTMLDivElement>()
@@ -453,6 +456,16 @@ export default defineComponent({
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig)
     })
 
+    const computeScrollbarXToTop = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top')
+    })
+
+    const computeScrollbarYToLeft = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
+    })
+
     const computeScrollYThreshold = computed(() => {
       const sYOpts = computeSYOpts.value
       const { threshold } = sYOpts
@@ -759,6 +772,8 @@ export default defineComponent({
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXToTop,
+      computeScrollbarYToLeft,
       computeColumnOpts,
       computeScrollXThreshold,
       computeScrollYThreshold,
@@ -1810,19 +1825,26 @@ export default defineComponent({
         bodyHeight = Math.max(bodyMinHeight, bodyHeight)
       }
 
+      const xLeftCornerEl = refScrollXLeftCornerElem.value
+      const xRightCornerEl = refScrollXRightCornerElem.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollXVirtualEl = refScrollXVirtualElem.value
       if (scrollXVirtualEl) {
         scrollXVirtualEl.style.height = `${scrollbarHeight}px`
         scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden'
       }
-      const xHandleEl = refScrollXHandleElem.value
-      if (xHandleEl) {
-        xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`
+      const xWrapperEl = refScrollXWrapperElem.value
+      if (xWrapperEl) {
+        xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : ''
+        xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`
+      }
+      if (xLeftCornerEl) {
+        xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : ''
+        xLeftCornerEl.style.display = scrollbarXToTop ? (scrollbarWidth && scrollbarHeight ? 'block' : '') : ''
       }
-      const xRightCornerEl = refScrollXRightCornerElem.value
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = `${scrollbarWidth}px`
-        xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : ''
+        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`
+        xRightCornerEl.style.display = scrollbarXToTop ? '' : (scrollbarWidth && scrollbarHeight ? 'block' : '')
       }
 
       const scrollYVirtualEl = refScrollYVirtualElem.value
@@ -1836,10 +1858,10 @@ export default defineComponent({
         yTopCornerEl.style.height = `${headerHeight}px`
         yTopCornerEl.style.display = headerHeight ? 'block' : ''
       }
-      const yHandleEl = refScrollYHandleElem.value
-      if (yHandleEl) {
-        yHandleEl.style.height = `${bodyHeight}px`
-        yHandleEl.style.top = `${headerHeight}px`
+      const yWrapperEl = refScrollYWrapperElem.value
+      if (yWrapperEl) {
+        yWrapperEl.style.height = `${bodyHeight}px`
+        yWrapperEl.style.top = `${headerHeight}px`
       }
       const yBottomCornerEl = refScrollYBottomCornerElem.value
       if (yBottomCornerEl) {
@@ -3242,72 +3264,6 @@ export default defineComponent({
       }, fpsTime)
     }
 
-    const scrollXEvent = (evnt: Event) => {
-      const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return
-      }
-      if (inWheelScroll) {
-        return
-      }
-      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
-      const yHandleEl = refScrollYHandleElem.value
-      const wrapperEl = evnt.currentTarget as HTMLDivElement
-      const { scrollLeft } = wrapperEl
-      const yBodyEl = yHandleEl || bodyScrollElem
-      let scrollTop = 0
-      if (yBodyEl) {
-        scrollTop = yBodyEl.scrollTop
-      }
-      const isRollX = true
-      const isRollY = scrollTop !== lastScrollTop
-
-      internalData.inVirtualScroll = true
-      setScrollLeft(bodyScrollElem, scrollLeft)
-      setScrollLeft(headerScrollElem, scrollLeft)
-      setScrollLeft(footerScrollElem, scrollLeft)
-      $xeTable.triggerScrollXEvent(evnt)
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      })
-    }
-
-    const scrollYEvent = (evnt: Event) => {
-      const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return
-      }
-      if (inWheelScroll) {
-        return
-      }
-      const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
-      const xHandleEl = refScrollXHandleElem.value
-      const wrapperEl = evnt.currentTarget as HTMLDivElement
-      const { scrollTop } = wrapperEl
-      const xBodyEl = xHandleEl || bodyScrollElem
-      let scrollLeft = 0
-      if (xBodyEl) {
-        scrollLeft = xBodyEl.scrollLeft
-      }
-      const isRollX = scrollLeft !== lastScrollLeft
-      const isRollY = true
-
-      internalData.inVirtualScroll = true
-      setScrollTop(bodyScrollElem, scrollTop)
-      setScrollTop(leftScrollElem, scrollTop)
-      setScrollTop(rightScrollElem, scrollTop)
-      $xeTable.triggerScrollYEvent(evnt)
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      })
-    }
-
     const checkLastSyncScroll = (isRollX: boolean, isRollY: boolean) => {
       const { scrollXLoad, scrollYLoad } = reactData
       const { lcsTimeout } = internalData
@@ -3352,6 +3308,13 @@ export default defineComponent({
       return nextTick()
     }
 
+    function handleUupdateResize () {
+      const el = refElem.value
+      if (el && el.clientWidth && el.clientHeight) {
+        tableMethods.recalculate()
+      }
+    }
+
     tableMethods = {
       dispatchEvent,
       /**
@@ -6270,6 +6233,7 @@ export default defineComponent({
         const rdLineEl = refDragRowLineElem.value
         if (rdLineEl) {
           if (showLine) {
+            const scrollbarYToLeft = computeScrollbarYToLeft.value
             const trRect = trEl.getBoundingClientRect()
             let trHeight = trEl.clientHeight
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
@@ -6277,6 +6241,7 @@ export default defineComponent({
               trHeight = tableHeight - offsetTop - scrollbarHeight
             }
             rdLineEl.style.display = 'block'
+            rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`
             rdLineEl.style.top = `${offsetTop}px`
             rdLineEl.style.height = `${trHeight}px`
             rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`
@@ -6290,6 +6255,7 @@ export default defineComponent({
         const cdLineEl = refDragColLineElem.value
         if (cdLineEl) {
           if (showLine) {
+            const scrollbarXToTop = computeScrollbarXToTop.value
             const leftContainerElem = refLeftContainer.value
             const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
             const rightContainerElem = refRightContainer.value
@@ -6314,7 +6280,7 @@ export default defineComponent({
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`
+              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`
             }
             cdLineEl.setAttribute('drag-pos', dragPos)
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -8407,6 +8373,70 @@ export default defineComponent({
           })
         }
       },
+      triggerVirtualScrollXEvent (evnt) {
+        const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return
+        }
+        if (inWheelScroll) {
+          return
+        }
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+        const yHandleEl = refScrollYHandleElem.value
+        const wrapperEl = evnt.currentTarget as HTMLDivElement
+        const { scrollLeft } = wrapperEl
+        const yBodyEl = yHandleEl || bodyScrollElem
+        let scrollTop = 0
+        if (yBodyEl) {
+          scrollTop = yBodyEl.scrollTop
+        }
+        const isRollX = true
+        const isRollY = scrollTop !== lastScrollTop
+
+        internalData.inVirtualScroll = true
+        setScrollLeft(bodyScrollElem, scrollLeft)
+        setScrollLeft(headerScrollElem, scrollLeft)
+        setScrollLeft(footerScrollElem, scrollLeft)
+        $xeTable.triggerScrollXEvent(evnt)
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        })
+      },
+      triggerVirtualScrollYEvent (evnt) {
+        const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return
+        }
+        if (inWheelScroll) {
+          return
+        }
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
+        const xHandleEl = refScrollXHandleElem.value
+        const wrapperEl = evnt.currentTarget as HTMLDivElement
+        const { scrollTop } = wrapperEl
+        const xBodyEl = xHandleEl || bodyScrollElem
+        let scrollLeft = 0
+        if (xBodyEl) {
+          scrollLeft = xBodyEl.scrollLeft
+        }
+        const isRollX = scrollLeft !== lastScrollLeft
+        const isRollY = true
+
+        internalData.inVirtualScroll = true
+        setScrollTop(bodyScrollElem, scrollTop)
+        setScrollTop(leftScrollElem, scrollTop)
+        setScrollTop(rightScrollElem, scrollTop)
+        $xeTable.triggerScrollYEvent(evnt)
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        })
+      },
       /**
        * 对于树形结构中，可以直接滚动到指定深层节点中
        * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -8782,16 +8812,137 @@ export default defineComponent({
       return renderEmptyElement($xeTable)
     }
 
-    function handleUupdateResize () {
-      const el = refElem.value
-      if (el && el.clientWidth && el.clientHeight) {
-        tableMethods.recalculate()
-      }
+    const renderScrollX = () => {
+      return h('div', {
+        key: 'vsx',
+        ref: refScrollXVirtualElem,
+        class: 'vxe-table--scroll-x-virtual'
+      }, [
+        h('div', {
+          ref: refScrollXLeftCornerElem,
+          class: 'vxe-table--scroll-x-left-corner'
+        }),
+        h('div', {
+          ref: refScrollXWrapperElem,
+          class: 'vxe-table--scroll-x-wrapper'
+        }, [
+          h('div', {
+            ref: refScrollXHandleElem,
+            class: 'vxe-table--scroll-x-handle',
+            onScroll: $xeTable.triggerVirtualScrollXEvent
+          }, [
+            h('div', {
+              ref: refScrollXSpaceElem,
+              class: 'vxe-table--scroll-x-space'
+            })
+          ])
+        ]),
+        h('div', {
+          ref: refScrollXRightCornerElem,
+          class: 'vxe-table--scroll-x-right-corner'
+        })
+      ])
+    }
+
+    const renderScrollY = () => {
+      return h('div', {
+        ref: refScrollYVirtualElem,
+        class: 'vxe-table--scroll-y-virtual'
+      }, [
+        h('div', {
+          ref: refScrollYTopCornerElem,
+          class: 'vxe-table--scroll-y-top-corner'
+        }),
+        h('div', {
+          ref: refScrollYWrapperElem,
+          class: 'vxe-table--scroll-y-wrapper'
+        }, [
+          h('div', {
+            ref: refScrollYHandleElem,
+            class: 'vxe-table--scroll-y-handle',
+            onScroll: $xeTable.triggerVirtualScrollYEvent
+          }, [
+            h('div', {
+              ref: refScrollYSpaceElem,
+              class: 'vxe-table--scroll-y-space'
+            })
+          ])
+        ]),
+        h('div', {
+          ref: refScrollYBottomCornerElem,
+          class: 'vxe-table--scroll-y-bottom-corner'
+        })
+      ])
+    }
+
+    const renderViewport = () => {
+      const { showHeader, showFooter } = props
+      const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData
+      const { leftList, rightList } = columnStore
+      return h('div', {
+        ref: refTableViewportElem,
+        class: 'vxe-table--viewport-wrapper'
+      }, [
+        h('div', {
+          class: 'vxe-table--main-wrapper'
+        }, [
+          /**
+           * 表头
+           */
+          showHeader
+            ? h(TableHeaderComponent, {
+              ref: refTableHeader,
+              tableData,
+              tableColumn,
+              tableGroupColumn
+            })
+            : renderEmptyElement($xeTable),
+          /**
+           * 表体
+           */
+          h(TableBodyComponent, {
+            ref: refTableBody,
+            tableData,
+            tableColumn
+          }),
+          /**
+           * 表尾
+           */
+          showFooter
+            ? h(TableFooterComponent, {
+              ref: refTableFooter,
+              footerTableData,
+              tableColumn
+            })
+            : renderEmptyElement($xeTable)
+        ]),
+        h('div', {
+          class: 'vxe-table--fixed-wrapper'
+        }, [
+          leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+          rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+        ])
+      ])
+    }
+
+    const renderBody = () => {
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      return h('div', {
+        class: 'vxe-table--layout-wrapper'
+      }, scrollbarYToLeft
+        ? [
+            renderScrollY(),
+            renderViewport()
+          ]
+        : [
+            renderViewport(),
+            renderScrollY()
+          ])
     }
 
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tooltipOpts = computeTooltipOpts.value
@@ -8810,9 +8961,11 @@ export default defineComponent({
       const resizableOpts = computeResizableOpts.value
       const isArea = mouseConfig && mouseOpts.area
       const columnDragOpts = computeColumnDragOpts.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
       return h('div', {
         ref: refElem,
-        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
           [`size--${vSize}`]: vSize,
           [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
@@ -8856,95 +9009,15 @@ export default defineComponent({
         h('div', {
           key: 'tw',
           class: 'vxe-table--render-wrapper'
-        }, [
-          h('div', {
-            ref: refTableViewportElem,
-            class: 'vxe-table--viewport-wrapper'
-          }, [
-            h('div', {
-              class: 'vxe-table--main-wrapper'
-            }, [
-              /**
-               * 表头
-               */
-              showHeader
-                ? h(TableHeaderComponent, {
-                  ref: refTableHeader,
-                  tableData,
-                  tableColumn,
-                  tableGroupColumn
-                })
-                : renderEmptyElement($xeTable),
-              /**
-               * 表体
-               */
-              h(TableBodyComponent, {
-                ref: refTableBody,
-                tableData,
-                tableColumn
-              }),
-              /**
-               * 表尾
-               */
-              showFooter
-                ? h(TableFooterComponent, {
-                  ref: refTableFooter,
-                  footerTableData,
-                  tableColumn
-                })
-                : renderEmptyElement($xeTable)
-            ]),
-            h('div', {
-              class: 'vxe-table--fixed-wrapper'
-            }, [
-              leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-              rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
-            ])
-          ]),
-          h('div', {
-            ref: refScrollYVirtualElem,
-            class: 'vxe-table--scroll-y-virtual'
-          }, [
-            h('div', {
-              ref: refScrollYTopCornerElem,
-              class: 'vxe-table--scroll-y-top-corner'
-            }),
-            h('div', {
-              ref: refScrollYHandleElem,
-              class: 'vxe-table--scroll-y-handle',
-              onScroll: scrollYEvent
-            }, [
-              h('div', {
-                ref: refScrollYSpaceElem,
-                class: 'vxe-table--scroll-y-space'
-              })
+        }, scrollbarXToTop
+          ? [
+              renderScrollX(),
+              renderBody()
+            ]
+          : [
+              renderBody(),
+              renderScrollX()
             ]),
-            h('div', {
-              ref: refScrollYBottomCornerElem,
-              class: 'vxe-table--scroll-y-bottom-corner'
-            })
-          ])
-        ]),
-        h('div', {
-          key: 'vx',
-          ref: refScrollXVirtualElem,
-          class: 'vxe-table--scroll-x-virtual'
-        }, [
-          h('div', {
-            ref: refScrollXHandleElem,
-            class: 'vxe-table--scroll-x-handle',
-            onScroll: scrollXEvent
-          }, [
-            h('div', {
-              ref: refScrollXSpaceElem,
-              class: 'vxe-table--scroll-x-space'
-            })
-          ]),
-          h('div', {
-            ref: refScrollXRightCornerElem,
-            class: 'vxe-table--scroll-x-right-corner'
-          })
-        ]),
         /**
          * 空数据
          */
@@ -8970,12 +9043,7 @@ export default defineComponent({
         h('div', {
           key: 'cl',
           ref: refCellResizeBar,
-          class: 'vxe-table--resizable-bar',
-          style: overflowX
-            ? {
-                'padding-bottom': `${scrollbarHeight}px`
-              }
-            : null
+          class: 'vxe-table--resizable-bar'
         }, resizableOpts.showDragTip
           ? [
               h('div', {
@@ -9164,18 +9232,39 @@ export default defineComponent({
       })
     })
 
+    const reScrollFlag = ref(0)
+    watch(computeSize, () => {
+      reScrollFlag.value++
+    })
     watch(() => props.showHeader, () => {
-      nextTick(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
-      })
+      reScrollFlag.value++
     })
-
     watch(() => props.showFooter, () => {
+      reScrollFlag.value++
+    })
+    watch(reScrollFlag, () => {
       nextTick(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
       })
     })
 
+    const reLayoutFlag = ref(0)
+    watch(() => props.height, () => {
+      reLayoutFlag.value++
+    })
+    watch(() => props.maxHeight, () => {
+      reLayoutFlag.value++
+    })
+    watch(computeScrollbarXToTop, () => {
+      reLayoutFlag.value++
+    })
+    watch(computeScrollbarYToLeft, () => {
+      reLayoutFlag.value++
+    })
+    watch(reLayoutFlag, () => {
+      nextTick(() => tableMethods.recalculate(true))
+    })
+
     const footFlag = ref(0)
     watch(() => props.footerData ? props.footerData.length : -1, () => {
       footFlag.value++
@@ -9187,20 +9276,6 @@ export default defineComponent({
       tableMethods.updateFooter()
     })
 
-    watch(() => props.height, () => {
-      nextTick(() => tableMethods.recalculate(true))
-    })
-
-    watch(() => props.maxHeight, () => {
-      nextTick(() => tableMethods.recalculate(true))
-    })
-
-    watch(computeSize, () => {
-      nextTick(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
-      })
-    })
-
     watch(() => props.syncResize, (value) => {
       if (value) {
         handleUupdateResize()