Table add props: fixed-shadow

src/components/table/table.vue

@@ -48,7 +48,7 @@
                     </tbody>
                 </table>
             </div>
-            <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
+            <div :class="fixedTableClasses" :style="fixedTableStyle" v-if="isLeftFixed">
                 <div :class="fixedHeaderClasses" v-if="showHeader">
                     <table-head
                         fixed="left"
@@ -84,7 +84,7 @@
                     :style="{ 'margin-top': showHorizontalScrollBar ? scrollBarWidth + 'px' : 0 }"
                 />
             </div>
-            <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
+            <div :class="fixedRightTableClasses" :style="fixedRightTableStyle" v-if="isRightFixed">
                 <div :class="fixedHeaderClasses" v-if="showHeader">
                     <table-head
                         fixed="right"
@@ -295,6 +295,13 @@
             showContextMenu: {
                 type: Boolean,
                 default: false
+            },
+            // 4.7.0
+            fixedShadow: {
+                validator (value) {
+                    return oneOf(value, ['auto', 'show', 'hide']);
+                },
+                default: 'show'
             }
         },
         data () {
@@ -327,7 +334,9 @@
                 contextMenuStyles: {
                     top: 0,
                     left: 0
-                }
+                },
+                scrollOnTheLeft: false,
+                scrollOnTheRight: false
             };
         },
         computed: {
@@ -375,6 +384,22 @@
                     }
                 ];
             },
+            fixedTableClasses () {
+                return [
+                    `${prefixCls}-fixed`,
+                    {
+                        [`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheLeft)
+                    }
+                ];
+            },
+            fixedRightTableClasses () {
+                return [
+                    `${prefixCls}-fixed-right`,
+                    {
+                        [`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheRight)
+                    }
+                ];
+            },
             fixedHeaderClasses () {
                 return [
                     `${prefixCls}-fixed-header`,
@@ -651,6 +676,15 @@
                 this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0) + 1;
                 this.columnsWidth = columnsWidth;
                 this.fixedHeader();
+
+                // 4.7.0 auto fixed shadow
+                if (this.fixedShadow === 'auto') {
+                    this.$nextTick(() => {
+                        const $body = this.$refs.body;
+                        this.scrollOnTheLeft = $body.scrollLeft === 0;
+                        this.scrollOnTheRight = $body.scrollWidth === $body.scrollLeft + $body.clientWidth;
+                    });
+                }
             },
             handleMouseIn (_index, rowKey) {
                 if (this.disabledHover) return;
@@ -1036,6 +1070,10 @@
                 this.cloneColumns.forEach((col) => col._filterVisible = false);
             },
             handleBodyScroll (event) {
+                // 4.7.0
+                this.scrollOnTheLeft = event.target.scrollLeft === 0;
+                this.scrollOnTheRight = event.target.scrollWidth === event.target.scrollLeft + event.target.clientWidth;
+
                 if (this.showHeader) this.$refs.header.scrollLeft = event.target.scrollLeft;
                 if (this.isLeftFixed) this.$refs.fixedBody.scrollTop = event.target.scrollTop;
                 if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;

src/styles/components/table.less

@@ -389,7 +389,6 @@
         position: absolute;
         top: 0;
         left: 0;
-        box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
 
         &::before {
             content: '';
@@ -406,6 +405,11 @@
         top: 0;
         left: auto;
         right: 0;
+    }
+    &-fixed&-fixed-shadow{
+        box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
+    }
+    &-fixed-right&-fixed-shadow{
         box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
     }
     &-fixed-right-header{