fix(components): [Component] [table] Table 在一定条件下宽度会无限延长 element-plus…

…#13052
ydaydayup · Apr 3, 2024 · 47847fb · 47847fb
1 parent 22ac4c5
commit 47847fb
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/packages/components/table/src/table/style-helper.ts b/packages/components/table/src/table/style-helper.ts
@@ -108,6 +108,23 @@ function useStyle<T>(
     }
   })
 
+  const elPaddingMarginHorizontal = (el: HTMLElement) => {
+    return (
+      (el.style.paddingLeft === ''
+        ? 0
+        : Number.parseFloat(el.style.paddingLeft)) +
+      (el.style.marginLeft === ''
+        ? 0
+        : Number.parseFloat(el.style.marginLeft)) +
+      (el.style.marginRight === ''
+        ? 0
+        : Number.parseFloat(el.style.marginRight)) +
+      (el.style.paddingRight === ''
+        ? 0
+        : Number.parseFloat(el.style.paddingRight))
+    )
+  }
+
   const doLayout = () => {
     if (shouldUpdateHeight.value) {
       layout.updateElsHeight()
@@ -130,12 +147,13 @@ function useStyle<T>(
     }
 
     resizeState.value = {
-      width: (tableWidth.value = el.offsetWidth),
+      width: el.offsetWidth,
       height: el.offsetHeight,
       headerHeight:
         props.showHeader && tableHeader ? tableHeader.offsetHeight : null,
     }
 
+    tableWidth.value = el.offsetWidth - elPaddingMarginHorizontal(el)
     // init filters
     store.states.columns.value.forEach((column: TableColumnCtx<T>) => {
       if (column.filteredValue && column.filteredValue.length) {
@@ -223,7 +241,8 @@ function useStyle<T>(
       headerHeight: oldHeaderHeight,
     } = resizeState.value
 
-    const width = (tableWidth.value = el.offsetWidth)
+    tableWidth.value = el.offsetWidth - elPaddingMarginHorizontal(el)
+    const width = tableWidth.value
     if (oldWidth !== width) {
       shouldUpdateLayout = true
     }