Merge pull request Tencent#82 from realyuyanan/develop

fix(table): 固定表头与内容没有对齐的问题 Tencent#15
mokywu · Dec 24, 2021 · b565cfe · b565cfe
2 parents bdb4dd2 + a91e32f
commit b565cfe
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/table/base-table/index.tsx b/src/table/base-table/index.tsx
@@ -127,6 +127,9 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
       ];
       return classes;
     },
+    usePadding(): boolean {
+      return this.scrollableToRight || this.scrollableToLeft;
+    },
   },
   methods: {
     // 检查是否还可以向左或者向右滚动
@@ -214,6 +217,7 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
         scrollBarWidth,
         hasFixedColumns,
         tableHeight,
+        usePadding,
       } = this;
       // handle scroll
       const handleScroll = throttle((e: Event) => {
@@ -224,12 +228,9 @@ export default mixins(getConfigReceiverMixins<Vue, TableConfig>('table')).extend
       }, 10);
       //  fixed table header
       const paddingRight = `${scrollBarWidth}px`;
+      const headerContainerStyle = columns.length > 1 && usePadding ? { paddingRight } : {};
       fixedTable.push(
-        <div
-          class={`${prefix}-table__header`}
-          style={{ paddingRight: columns.length > 1 ? paddingRight : '' }}
-          ref="scrollHeader"
-        >
+        <div class={`${prefix}-table__header`} style={headerContainerStyle} ref="scrollHeader">
           <table style={{ tableLayout, paddingRight }}>
             <TableColGroup columns={columns} />
             {this.renderHeader()}

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -10977,7 +10977,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre
 <div class="t-table t-table__header--fixed">
   <div class="t-loading__parent">
     <div class="t-table__content">
-      <div class="t-table__header" style="padding-right:0px;">
+      <div class="t-table__header">
         <table style="table-layout:fixed;padding-right:0px;">
           <colgroup>
             <col style="width:100px;">
@@ -11205,7 +11205,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header-col.vue c
 <div class="t-table t-table--bordered t-table__cell--fixed t-table--has-fixed t-table__header--fixed">
   <div class="t-loading__parent">
     <div class="t-table__content">
-      <div class="t-table__header" style="padding-right:0px;">
+      <div class="t-table__header">
         <table style="table-layout:fixed;padding-right:0px;">
           <colgroup>
             <col style="width:100px;">
@@ -11458,7 +11458,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly
   <div class="t-table t-size-s t-table__header--fixed">
     <div class="t-loading__parent">
       <div class="t-table__content">
-        <div class="t-table__header" style="padding-right:0px;">
+        <div class="t-table__header">
           <table style="table-layout:fixed;padding-right:0px;">
             <colgroup>
               <col style="width:100px;min-width:100px;">
@@ -11509,7 +11509,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly
   <div class="t-table t-size-s t-table__header--fixed">
     <div class="t-loading__parent">
       <div class="t-table__content">
-        <div class="t-table__header" style="padding-right:0px;">
+        <div class="t-table__header">
           <table style="table-layout:fixed;padding-right:0px;">
             <colgroup>
               <col style="width:100px;min-width:100px;">
@@ -11562,7 +11562,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly
   <div class="t-table t-size-s t-table__header--fixed">
     <div class="t-loading__parent">
       <div class="t-table__content">
-        <div class="t-table__header" style="padding-right:0px;">
+        <div class="t-table__header">
           <table style="table-layout:fixed;padding-right:0px;">
             <colgroup>
               <col style="width:100px;min-width:100px;">

diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -2571,7 +2571,6 @@ exports[`Table fixedHeader demo works fine 1`] = `
     >
       <div
         class="t-table__header"
-        style="padding-right: 0px;"
       >
         <table
           style="table-layout: fixed; padding-right: 0px;"

diff --git a/test/unit/table/__snapshots__/index.test.js.snap b/test/unit/table/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`Table :props :props.bordered, :props:hover, :props.stripe, :props.size,
 <div class="t-table t-table__header--fixed">
   <div class="t-loading__parent">
     <div class="t-table__content">
-      <div class="t-table__header" style="padding-right: 0px;">
+      <div class="t-table__header">
         <table style="table-layout: fixed; padding-right: 0px;">
           <colgroup>
             <col>