vxe-table 4.13.22 → 4.13.24

package/es/table/src/cell.js

@@ -10,15 +10,19 @@ function renderTitlePrefixIcon(params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
     if (titlePrefix) {
-        return h('i', {
-            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : '', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+        return h('span', {
+            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : ''],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
             },
             onMouseleave(evnt) {
                 $table.handleTargetLeaveEvent(evnt);
             }
-        });
+        }, [
+            h('i', {
+                class: titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -26,15 +30,19 @@ function renderTitleSuffixIcon(params) {
     const { $table, column } = params;
     const titleSuffix = column.titleSuffix;
     if (titleSuffix) {
-        return h('i', {
-            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : '', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+        return h('span', {
+            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : ''],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
             },
             onMouseleave(evnt) {
                 $table.handleTargetLeaveEvent(evnt);
             }
-        });
+        }, [
+            h('i', {
+                class: titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -1009,14 +1017,20 @@ export const Cell = {
         if (isEnableConf(editConfig)) {
             editIconVNs = [
                 isRequired && editOpts.showAsterisk
-                    ? h('i', {
+                    ? h('span', {
                         class: 'vxe-cell--required-icon'
-                    })
+                    }, [
+                        h('i')
+                    ])
                     : renderEmptyElement($table),
                 isEnableConf(editRender) && editOpts.showIcon
-                    ? h('i', {
-                        class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-                    })
+                    ? h('span', {
+                        class: 'vxe-cell--edit-icon'
+                    }, [
+                        h('i', {
+                            class: editOpts.icon || getIcon().TABLE_EDIT
+                        })
+                    ])
                     : renderEmptyElement($table)
             ];
         }

package/es/table/src/util.js

@@ -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';
 const getAllConvertColumns = (columns, parentColumn) => {
     const result = [];
@@ -165,7 +165,7 @@ function getPaddingLeftRightSize(elem) {
     }
     return 0;
 }
-function getElementMarginWidth(elem) {
+function getElementMarginAndWidth(elem) {
     if (elem) {
         const computedStyle = getComputedStyle(elem);
         const marginLeft = XEUtils.toNumber(computedStyle.marginLeft);
@@ -174,9 +174,6 @@ function getElementMarginWidth(elem) {
     }
     return 0;
 }
-function queryCellElement(cell, selector) {
-    return cell.querySelector('.vxe-cell' + selector);
-}
 export function toFilters(filters) {
     if (filters && XEUtils.isArray(filters)) {
         return filters.map(({ label, value, data, resetValue, checked }) => {
@@ -255,19 +252,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;
     }
     // 如果设置最小宽
@@ -442,7 +439,7 @@ export function rowToVisible($xeTable, row) {
     const internalData = $xeTable.internalData;
     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;
@@ -456,8 +453,7 @@ export function rowToVisible($xeTable, row) {
         const bodyScrollTop = bodyScrollElem.scrollTop;
         const trElem = bodyScrollElem.querySelector(`[rowid="${rowid}"]`);
         if (trElem) {
-            const trOffsetParent = trElem.offsetParent;
-            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) {
@@ -499,7 +495,7 @@ export function colToVisible($xeTable, column, row) {
     const reactData = $xeTable.reactData;
     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;
@@ -519,8 +515,7 @@ export function colToVisible($xeTable, column, row) {
             tdElem = bodyScrollElem.querySelector(`.${column.id}`);
         }
         if (tdElem) {
-            const tdOffsetParent = tdElem.offsetParent;
-            const tdOffsetLeft = tdElem.offsetLeft + (tdOffsetParent ? tdOffsetParent.offsetLeft : 0);
+            const tdOffsetLeft = tdElem.offsetLeft + (scrollXLoad ? scrollXLeft : 0);
             const cellWidth = tdElem.clientWidth;
             // 检测是否在可视区中
             if (tdOffsetLeft < (bodyScrollLeft + leftFixedWidth)) {

package/es/table/style.css

@@ -2291,29 +2291,38 @@
   position: relative;
   font-weight: var(--vxe-ui-table-header-font-weight);
 }
-.vxe-header--column.col--ellipsis > .vxe-cell {
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper {
   display: flex;
   align-items: center;
 }
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--drag-handle,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--sort,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--filter,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-prefix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-suffix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--checkbox,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-suffix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--required-icon {
+  flex-shrink: 0;
+}
 .vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.vxe-header--column.col--ellipsis > .vxe-cell > i:not(.vxe-cell--title), .vxe-header--column.col--ellipsis > .vxe-cell > span:not(.vxe-cell--title) {
-  flex-shrink: 0;
-}
 .vxe-header--column .vxe-cell--required-icon {
   display: inline-block;
   color: var(--vxe-ui-table-validate-error-color);
   width: 0.8em;
   height: 1em;
   line-height: 1em;
+  position: relative;
+}
+.vxe-header--column .vxe-cell--required-icon > i {
   font-family: Verdana, Arial, Tahoma;
   font-weight: normal;
-  position: relative;
 }
-.vxe-header--column .vxe-cell--required-icon:before {
+.vxe-header--column .vxe-cell--required-icon > i:before {
   content: "*";
   position: absolute;
   left: 0;