vxe-table 4.13.22 → 4.13.24

package/packages/table/src/util.ts

@@ -1,7 +1,7 @@
 import { watch, reactive, nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
-import { isPx, isScale } from '../../ui/src/dom'
+import { isPx, isScale, queryElement } from '../../ui/src/dom'
 import { eqEmptyValue } from '../../ui/src/utils'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
@@ -191,7 +191,7 @@ function getPaddingLeftRightSize (elem: HTMLElement | null) {
   return 0
 }
 
-function getElementMarginWidth (elem: HTMLElement | null) {
+function getElementMarginAndWidth (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)
@@ -201,10 +201,6 @@ function getElementMarginWidth (elem: HTMLElement | null) {
   return 0
 }
 
-function queryCellElement (cell: HTMLTableCellElement, selector: string) {
-  return cell.querySelector('.vxe-cell' + selector) as HTMLElement | null
-}
-
 export function toFilters (filters: any) {
   if (filters && XEUtils.isArray(filters)) {
     return filters.map(({ label, value, data, resetValue, checked }) => {
@@ -304,19 +300,19 @@ export function getColReMinWidth (params: {
   const showTitle = headOverflow === 'title'
   const showTooltip = headOverflow === true || headOverflow === 'tooltip'
   const hasEllipsis = showTitle || showTooltip || showEllipsis
-  const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.6)
-  const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryCellElement(cell, ''))
+  const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.8)
+  const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryElement(cell, '.vxe-cell'))
   let mWidth = minTitleWidth + paddingLeftRight
   // 默认最小宽处理
   if (hasEllipsis) {
-    const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'))
-    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'))
-    const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'))
-    const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'))
-    const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'))
-    const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'))
-    const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'))
-    const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'))
+    const dragIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--drag-handle'))
+    const checkboxIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--checkbox'))
+    const requiredIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--required-icon'))
+    const editIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--edit-icon'))
+    const prefixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-prefix-icon'))
+    const suffixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-suffix-icon'))
+    const sortIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--sort'))
+    const filterIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--filter'))
     mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth
   }
   // 如果设置最小宽
@@ -505,7 +501,7 @@ export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
 
   const { computeLeftFixedWidth, computeRightFixedWidth, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps()
   const { showOverflow } = tableProps
-  const { scrollYLoad } = reactData
+  const { scrollYLoad, scrollYTop } = reactData
   const { elemStore, afterFullData, fullAllDataRowIdData, isResizeCellHeight } = internalData
   const rowOpts = computeRowOpts.value
   const cellOpts = computeCellOpts.value
@@ -519,8 +515,7 @@ export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     const bodyScrollTop = bodyScrollElem.scrollTop
     const trElem: HTMLTableRowElement | null = bodyScrollElem.querySelector(`[rowid="${rowid}"]`)
     if (trElem) {
-      const trOffsetParent = trElem.offsetParent as HTMLElement
-      const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0)
+      const trOffsetTop = trElem.offsetTop + (scrollYLoad ? scrollYTop : 0)
       const trHeight = trElem.clientHeight
       // 检测行是否在可视区中
       if (trOffsetTop < bodyScrollTop || trOffsetTop > bodyScrollTop + bodyHeight) {
@@ -562,7 +557,7 @@ export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const internalData = $xeTable.internalData
 
   const { computeLeftFixedWidth, computeRightFixedWidth } = $xeTable.getComputeMaps()
-  const { scrollXLoad } = reactData
+  const { scrollXLoad, scrollXLeft } = reactData
   const { elemStore, visibleColumn } = internalData
   const leftFixedWidth = computeLeftFixedWidth.value
   const rightFixedWidth = computeRightFixedWidth.value
@@ -582,8 +577,7 @@ export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
       tdElem = bodyScrollElem.querySelector(`.${column.id}`)
     }
     if (tdElem) {
-      const tdOffsetParent = tdElem.offsetParent as HTMLElement
-      const tdOffsetLeft = tdElem.offsetLeft + (tdOffsetParent ? tdOffsetParent.offsetLeft : 0)
+      const tdOffsetLeft = tdElem.offsetLeft + (scrollXLoad ? scrollXLeft : 0)
       const cellWidth = tdElem.clientWidth
       // 检测是否在可视区中
       if (tdOffsetLeft < (bodyScrollLeft + leftFixedWidth)) {

package/packages/ui/src/dom.ts

@@ -82,6 +82,13 @@ export function toCssUnit (val?: number | string, unit = 'px') {
   return `${val || ''}`
 }
 
+export function queryElement (elem: HTMLTableCellElement, selector: string) {
+  if (elem) {
+    return elem.querySelector<HTMLElement>(selector)
+  }
+  return null
+}
+
 export function getDomNode () {
   const documentElement = document.documentElement
   const bodyElem = document.body

package/styles/components/table.scss

@@ -776,19 +776,25 @@ $btnThemeList: (
   // user-select: none;
   &.col--ellipsis {
     & > .vxe-cell {
-      display: flex;
-      align-items: center;
+      .vxe-cell--wrapper {
+        display: flex;
+        align-items: center;
+        .vxe-cell--drag-handle,
+        .vxe-cell--sort,
+        .vxe-cell--filter,
+        .vxe-cell-title-prefix-icon,
+        .vxe-cell-title-suffix-icon,
+        .vxe-cell--checkbox,
+        .vxe-cell-title-suffix-icon,
+        .vxe-cell--required-icon {
+          flex-shrink: 0;
+        }
+      }
       .vxe-cell--title {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      & > i,
-      & > span {
-        &:not(.vxe-cell--title) {
-          flex-shrink: 0;
-        }
-      }
     }
   }
   .vxe-cell--required-icon {
@@ -797,14 +803,16 @@ $btnThemeList: (
     width: 0.8em;
     height: 1em;
     line-height: 1em;
-    font-family: Verdana,Arial,Tahoma;
-    font-weight: normal;
     position: relative;
-    &:before {
-      content: "*";
-      position: absolute;
-      left: 0;
-      top: 0.2em;
+    & > i {
+      font-family: Verdana,Arial,Tahoma;
+      font-weight: normal;
+      &:before {
+        content: "*";
+        position: absolute;
+        left: 0;
+        top: 0.2em;
+      }
     }
   }
   // .vxe-cell--required-icon,