fix(Table): 修复多列Fixed时宽度计算问题

WeBankFinTech · Jul 7, 2023 · 6bd2901 · 6bd2901
1 parent 55819e6
commit 6bd2901
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts
@@ -194,24 +194,24 @@ export default ({
             'text-align': !row && column.colSpan > 1 ? 'center' : align,
         };
         const fixedStyle: CSSProperties = {};
-        if (column.fixedLeft) {
+        if (column.fixedLeft && layout.isScrollX.value) {
             const leftColumns = columns.slice(0, columnIndex);
             const width = leftColumns.reduce((accumulator, currentValue) => {
                 const width = layout.widthList.value[currentValue.id]?.width;
                 const minWidth =
                     layout.widthList.value[currentValue.id]?.minWidth;
-                return width || minWidth + accumulator;
+                return (width || minWidth) + accumulator;
             }, 0);
             fixedStyle.left = `${width}px`;
-        } else if (column.fixedRight) {
+        } else if (column.fixedRight && layout.isScrollX.value) {
             const rightColumns = columns.slice(columnIndex + 1);
             const width = rightColumns.reduceRight(
                 (accumulator, currentValue) => {
                     const width =
                         layout.widthList.value[currentValue.id]?.width;
                     const minWidth =
                         layout.widthList.value[currentValue.id]?.minWidth;
-                    return width || minWidth + accumulator;
+                    return (width || minWidth) + accumulator;
                 },
                 0,
             );

diff --git a/docs/.vitepress/components/table/fixed.vue b/docs/.vitepress/components/table/fixed.vue
@@ -1,13 +1,13 @@
 <template>
     <f-table :data="data">
-        <f-table-column prop="date" label="日期" :width="150" ellipsis fixed>
-        </f-table-column>
         <f-table-column
-            prop="name"
-            label="姓名"
-            :width="150"
-            fixed
+            type="selection"
+            :width="50"
+            fixed="left"
         ></f-table-column>
+        <f-table-column prop="date" label="日期" :width="150" ellipsis fixed>
+        </f-table-column>
+        <f-table-column prop="name" label="姓名" :width="150"></f-table-column>
         <f-table-column
             prop="province"
             label="省份"
@@ -18,7 +18,6 @@
             prop="address"
             label="地址"
             :width="300"
-            fixed="right"
         ></f-table-column>
         <f-table-column prop="zip" label="邮编" :width="120"> </f-table-column>
         <f-table-column

diff --git a/docs/.vitepress/components/table/scroll.vue b/docs/.vitepress/components/table/scroll.vue
@@ -1,5 +1,10 @@
 <template>
     <f-table :data="data" bordered :height="250">
+        <f-table-column
+            type="selection"
+            :width="30"
+            fixed="left"
+        ></f-table-column>
         <f-table-column
             prop="date"
             label="日期"