Table: Move `append` slot out of `table-body`

packages/table/src/table-body.js

@@ -136,8 +136,6 @@ export default {
                   </tr>)
                 : ''
               ]
-            ).concat(
-              this._self.$parent.$slots.append
             ).concat(
               <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
             )

packages/table/src/table-layout.js

@@ -16,6 +16,7 @@ class TableLayout {
     this.rightFixedWidth = null;
     this.tableHeight = null;
     this.headerHeight = 44; // Table Header Height
+    this.appendHeight = 0; // Append Slot Height
     this.footerHeight = 44; // Table Footer Height
     this.viewportHeight = null; // Table Height - Scroll Bar Height
     this.bodyHeight = null; // Table Height - Table Header Height
@@ -74,8 +75,9 @@ class TableLayout {
   updateHeight() {
     const height = this.tableHeight = this.table.$el.clientHeight;
     const noData = !this.table.data || this.table.data.length === 0;
-    const { headerWrapper, footerWrapper } = this.table.$refs;
+    const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;
     const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
     if (this.showHeader && !headerWrapper) return;
     if (!this.showHeader) {
       this.headerHeight = 0;

packages/table/src/table.vue

@@ -40,6 +40,9 @@
       <div :style="{ width: bodyWidth }" class="el-table__empty-block" v-if="!data || data.length === 0">
         <span class="el-table__empty-text"><slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot></span>
       </div>
+      <div class="el-table__append-wrapper" ref="appendWrapper" v-if="$slots.append">
+        <slot name="append"></slot>
+      </div>
     </div>
     <div class="el-table__footer-wrapper" ref="footerWrapper" v-if="showSummary" v-show="data && data.length > 0">
       <table-footer
@@ -84,6 +87,7 @@
           :row-style="rowStyle"
           :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
         </table-body>
+        <div class="el-table__append-gutter" :style="{ height: layout.appendHeight + 'px' }" v-if="$slots.append"></div>
       </div>
       <div class="el-table__fixed-footer-wrapper" ref="fixedFooterWrapper" v-if="showSummary" v-show="data && data.length > 0">
         <table-footer
@@ -273,8 +277,11 @@
           if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
           if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
           const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
+
           const scrollLeft = this.scrollLeft;
-          if (scrollLeft >= maxScrollLeftPosition) {
+          if (!self.layout.scrollX) {
+            self.scrollPosition = 'none';
+          } else if (scrollLeft >= maxScrollLeftPosition) {
             self.scrollPosition = 'right';
           } else if (scrollLeft === 0) {
             self.scrollPosition = 'left';
@@ -494,7 +501,7 @@
         resizeProxyVisible: false,
         // 是否拥有多级表头
         isGroup: false,
-        scrollPosition: 'left'
+        scrollPosition: layout.scrollX ? 'left' : 'none'
       };
     }
   };

packages/theme-chalk/src/table.scss

@@ -366,6 +366,13 @@
     overflow: auto;
     position: relative;
 
+    @include when(scroll-none) {
+      ~ .el-table__fixed,
+      ~ .el-table__fixed-right {
+        box-shadow: none;
+      }
+    }
+
     @include when(scroll-left) {
       ~ .el-table__fixed {
         box-shadow: none;