@element-plus/nightly 0.0.20220104 → 0.0.20220105

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220104 */
+/*! Element Plus v0.0.20220105 */
 
 import { getCurrentInstance, computed, warn, readonly, getCurrentScope, onScopeDispose, shallowRef, watchSyncEffect, ref, unref, watch, inject, provide, isRef, onMounted, onUnmounted, h as h$1, Teleport, onBeforeUnmount, onBeforeMount, nextTick, defineComponent, reactive, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, renderSlot, mergeProps, resolveComponent, createBlock, Transition, withCtx, withDirectives, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, Fragment, createVNode, vShow, onUpdated, withModifiers, toRef, cloneVNode, Text, Comment, resolveDirective, renderList, withKeys, createSlots, normalizeProps, guardReactiveProps, toRefs, vModelCheckbox, vModelRadio, onBeforeUpdate, vModelText, toHandlers, watchEffect, isVNode, camelize as camelize$1, effectScope, markRaw, toRaw, triggerRef, TransitionGroup, createApp, render as render$26 } from 'vue';
 
@@ -4527,7 +4527,7 @@ if (isClient) {
   });
 }
 
-const version$1 = "0.0.20220104";
+const version$1 = "0.0.20220105";
 
 const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 const makeInstaller = (components = []) => {
@@ -6732,11 +6732,11 @@ const _hoisted_7$c = {
   class: "el-input__count"
 };
 const _hoisted_8$b = { class: "el-input__count-inner" };
-const _hoisted_9$8 = {
+const _hoisted_9$7 = {
   key: 3,
   class: "el-input-group__append"
 };
-const _hoisted_10$8 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
+const _hoisted_10$7 = ["tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder"];
 const _hoisted_11$4 = {
   key: 0,
   class: "el-input__count"
@@ -6859,7 +6859,7 @@ function render$22(_ctx, _cache, $props, $setup, $data, $options) {
         })) : createCommentVNode("v-if", true)
       ])) : createCommentVNode("v-if", true),
       createCommentVNode(" append slot "),
-      _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_9$8, [
+      _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_9$7, [
         renderSlot(_ctx.$slots, "append")
       ])) : createCommentVNode("v-if", true)
     ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -6883,7 +6883,7 @@ function render$22(_ctx, _cache, $props, $setup, $data, $options) {
         onBlur: _cache[14] || (_cache[14] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
         onChange: _cache[15] || (_cache[15] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
         onKeydown: _cache[16] || (_cache[16] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
-      }), null, 16, _hoisted_10$8),
+      }), null, 16, _hoisted_10$7),
       _ctx.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_11$4, toDisplayString(_ctx.textLength) + " / " + toDisplayString(_ctx.attrs.maxlength), 1)) : createCommentVNode("v-if", true)
     ], 64))
   ], 38)), [
@@ -20176,8 +20176,8 @@ const _hoisted_5$j = { class: "cell" };
 const _hoisted_6$e = { class: "cell" };
 const _hoisted_7$a = { class: "cell" };
 const _hoisted_8$9 = { class: "cell" };
-const _hoisted_9$7 = { class: "cell" };
-const _hoisted_10$7 = { class: "cell" };
+const _hoisted_9$6 = { class: "cell" };
+const _hoisted_10$6 = { class: "cell" };
 const _hoisted_11$3 = /* @__PURE__ */ createElementVNode("td", null, null, -1);
 const _hoisted_12$3 = /* @__PURE__ */ createElementVNode("td", null, null, -1);
 function render$1b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -20234,12 +20234,12 @@ function render$1b(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("td", {
           class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 8)])
         }, [
-          createElementVNode("a", _hoisted_9$7, toDisplayString(_ctx.startYear + 8), 1)
+          createElementVNode("a", _hoisted_9$6, toDisplayString(_ctx.startYear + 8), 1)
         ], 2),
         createElementVNode("td", {
           class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 9)])
         }, [
-          createElementVNode("a", _hoisted_10$7, toDisplayString(_ctx.startYear + 9), 1)
+          createElementVNode("a", _hoisted_10$6, toDisplayString(_ctx.startYear + 9), 1)
         ], 2),
         _hoisted_11$3,
         _hoisted_12$3
@@ -20660,8 +20660,8 @@ const _hoisted_5$i = {
 const _hoisted_6$d = { class: "el-date-picker__editor-wrap" };
 const _hoisted_7$9 = { class: "el-date-picker__editor-wrap" };
 const _hoisted_8$8 = ["aria-label"];
-const _hoisted_9$6 = ["aria-label"];
-const _hoisted_10$6 = ["aria-label"];
+const _hoisted_9$5 = ["aria-label"];
+const _hoisted_10$5 = ["aria-label"];
 const _hoisted_11$2 = ["aria-label"];
 const _hoisted_12$2 = { class: "el-picker-panel__content" };
 const _hoisted_13$2 = { class: "el-picker-panel__footer" };
@@ -20759,7 +20759,7 @@ function render$1a(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })
-          ], 8, _hoisted_9$6), [
+          ], 8, _hoisted_9$5), [
             [vShow, _ctx.currentView === "date"]
           ]),
           createElementVNode("span", {
@@ -20786,7 +20786,7 @@ function render$1a(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1
             })
-          ], 8, _hoisted_10$6),
+          ], 8, _hoisted_10$5),
           withDirectives(createElementVNode("button", {
             type: "button",
             "aria-label": _ctx.t(`el.datepicker.nextMonth`),
@@ -21295,8 +21295,8 @@ const _hoisted_5$h = {
 const _hoisted_6$c = { class: "el-date-range-picker__editors-wrap" };
 const _hoisted_7$8 = { class: "el-date-range-picker__time-picker-wrap" };
 const _hoisted_8$7 = { class: "el-date-range-picker__time-picker-wrap" };
-const _hoisted_9$5 = { class: "el-date-range-picker__editors-wrap is-right" };
-const _hoisted_10$5 = { class: "el-date-range-picker__time-picker-wrap" };
+const _hoisted_9$4 = { class: "el-date-range-picker__editors-wrap is-right" };
+const _hoisted_10$4 = { class: "el-date-range-picker__time-picker-wrap" };
 const _hoisted_11$1 = { class: "el-date-range-picker__time-picker-wrap" };
 const _hoisted_12$1 = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
 const _hoisted_13$1 = { class: "el-date-range-picker__header" };
@@ -21386,8 +21386,8 @@ function render$19(_ctx, _cache, $props, $setup, $data, $options) {
               _: 1
             })
           ]),
-          createElementVNode("span", _hoisted_9$5, [
-            createElementVNode("span", _hoisted_10$5, [
+          createElementVNode("span", _hoisted_9$4, [
+            createElementVNode("span", _hoisted_10$4, [
               createVNode(_component_el_input, {
                 size: "small",
                 class: "el-date-range-picker__editor",
@@ -21770,8 +21770,8 @@ const _hoisted_5$g = { class: "el-picker-panel__content el-date-range-picker__co
 const _hoisted_6$b = { class: "el-date-range-picker__header" };
 const _hoisted_7$7 = ["disabled"];
 const _hoisted_8$6 = { class: "el-picker-panel__content el-date-range-picker__content is-right" };
-const _hoisted_9$4 = { class: "el-date-range-picker__header" };
-const _hoisted_10$4 = ["disabled"];
+const _hoisted_9$3 = { class: "el-date-range-picker__header" };
+const _hoisted_10$3 = ["disabled"];
 function render$18(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_d_arrow_left = resolveComponent("d-arrow-left");
   const _component_el_icon = resolveComponent("el-icon");
@@ -21840,7 +21840,7 @@ function render$18(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onPick", "onSelect"])
         ]),
         createElementVNode("div", _hoisted_8$6, [
-          createElementVNode("div", _hoisted_9$4, [
+          createElementVNode("div", _hoisted_9$3, [
             _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
@@ -21854,7 +21854,7 @@ function render$18(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 _: 1
               })
-            ], 10, _hoisted_10$4)) : createCommentVNode("v-if", true),
+            ], 10, _hoisted_10$3)) : createCommentVNode("v-if", true),
             createElementVNode("button", {
               type: "button",
               class: "el-picker-panel__icon-btn d-arrow-right",
@@ -24132,11 +24132,11 @@ const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("stop", {
   "stop-color": "#E9EBEF",
   offset: "100%"
 }, null, -1);
-const _hoisted_9$3 = [
+const _hoisted_9$2 = [
   _hoisted_7$6,
   _hoisted_8$5
 ];
-const _hoisted_10$3 = ["id"];
+const _hoisted_10$2 = ["id"];
 const _hoisted_11 = {
   id: "Illustrations",
   stroke: "none",
@@ -24216,14 +24216,14 @@ function render$U(_ctx, _cache, $props, $setup, $data, $options) {
         y1: "9.5%",
         x2: "100%",
         y2: "90.5%"
-      }, _hoisted_9$3, 8, _hoisted_6$a),
+      }, _hoisted_9$2, 8, _hoisted_6$a),
       createElementVNode("rect", {
         id: `path-3-${_ctx.id}`,
         x: "0",
         y: "0",
         width: "17",
         height: "36"
-      }, null, 8, _hoisted_10$3)
+      }, null, 8, _hoisted_10$2)
     ]),
     createElementVNode("g", _hoisted_11, [
       createElementVNode("g", _hoisted_12, [
@@ -33139,7 +33139,7 @@ const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
   column: getEstimatedTotalWidth,
   row: getEstimatedTotalHeight
 };
-const getOffset = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
+const getOffset$1 = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
   const [size, estimatedSizeAssociates] = [
     type === "row" ? props.height : props.width,
     ACCESS_ESTIMATED_SIZE_KEY_MAP[type]
@@ -33189,8 +33189,8 @@ const FixedSizeGrid = createGrid$1({
     const item = getItemFromCache(props, idx, cache, "row");
     return [item.size, item.offset];
   },
-  getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
-  getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
+  getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset$1(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
+  getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset$1(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
   getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
   getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
     const item = getItemFromCache(props, startIndex, cache, "column");
@@ -34357,8 +34357,8 @@ const _hoisted_5$7 = ["textContent"];
 const _hoisted_6$6 = { class: "el-select-v2__selected-item el-select-v2__input-wrapper" };
 const _hoisted_7$4 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"];
 const _hoisted_8$4 = ["textContent"];
-const _hoisted_9$2 = { class: "el-select-v2__suffix" };
-const _hoisted_10$2 = { class: "el-select-v2__empty" };
+const _hoisted_9$1 = { class: "el-select-v2__suffix" };
+const _hoisted_10$1 = { class: "el-select-v2__empty" };
 function render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_tag = resolveComponent("el-tag");
   const _component_el_icon = resolveComponent("el-icon");
@@ -34565,7 +34565,7 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
                 "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue)
               })
             }, toDisplayString(_ctx.currentPlaceholder), 3)) : createCommentVNode("v-if", true),
-            createElementVNode("span", _hoisted_9$2, [
+            createElementVNode("span", _hoisted_9$1, [
               _ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_el_icon, {
                 key: 0,
                 class: normalizeClass(["el-select-v2__caret", "el-input__icon", _ctx.iconReverse])
@@ -34613,7 +34613,7 @@ function render$r(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           empty: withCtx(() => [
             renderSlot(_ctx.$slots, "empty", {}, () => [
-              createElementVNode("p", _hoisted_10$2, toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1)
+              createElementVNode("p", _hoisted_10$1, toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1)
             ])
           ]),
           _: 3
@@ -36675,6 +36675,87 @@ function createTablePopper(trigger, popperContent, popperOptions, tooltipEffect)
   on(trigger, "mouseleave", removePopper);
   return popperInstance;
 }
+const isFixedColumn = (index, fixed, store, realColumns) => {
+  let start = 0;
+  let after = index;
+  if (realColumns) {
+    for (let i = 0; i < index; i++) {
+      start += realColumns[i].colSpan;
+    }
+    after = start + realColumns[index].colSpan - 1;
+  } else {
+    start = index;
+  }
+  let fixedLayout;
+  const columns = store.states.columns;
+  switch (fixed) {
+    case "left":
+      if (after < store.states.fixedLeafColumnsLength.value) {
+        fixedLayout = "left";
+      }
+      break;
+    case "right":
+      if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+        fixedLayout = "right";
+      }
+      break;
+    default:
+      if (after < store.states.fixedLeafColumnsLength.value) {
+        fixedLayout = "left";
+      } else if (start >= columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+        fixedLayout = "right";
+      }
+  }
+  return fixedLayout ? {
+    direction: fixedLayout,
+    start,
+    after
+  } : {};
+};
+const getFixedColumnsClass = (index, fixed, store, realColumns) => {
+  const classes = [];
+  const { direction, start } = isFixedColumn(index, fixed, store, realColumns);
+  if (direction) {
+    const isLeft = direction === "left";
+    classes.push(`el-table-fixed-column--${direction}`);
+    if (isLeft && start === store.states.fixedLeafColumnsLength.value - 1) {
+      classes.push("is-last-column");
+    } else if (!isLeft && start === store.states.columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
+      classes.push("is-first-column");
+    }
+  }
+  return classes;
+};
+function getOffset(offset, column) {
+  return offset + (Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
+}
+const getFixedColumnOffset = (index, fixed, store, realColumns) => {
+  const { direction, start = 0 } = isFixedColumn(index, fixed, store, realColumns);
+  if (!direction) {
+    return;
+  }
+  const styles = {};
+  const isLeft = direction === "left";
+  const columns = store.states.columns.value;
+  if (isLeft) {
+    styles.left = columns.slice(0, index).reduce(getOffset, 0);
+  } else {
+    styles.right = columns.slice(start + 1).reverse().reduce(getOffset, 0);
+  }
+  return styles;
+};
+const ensureRightFixedStyle = (style, hasGutter) => {
+  if (hasGutter && style && !Number.isNaN(style.right)) {
+    style.right += scrollbarWidth();
+  }
+};
+const ensurePosition = (style, key) => {
+  if (!style)
+    return;
+  if (!Number.isNaN(style[key])) {
+    style[key] = `${style[key]}px`;
+  }
+};
 
 function useExpand(watcherData) {
   const instance = getCurrentInstance();
@@ -37660,6 +37741,7 @@ class TableLayout {
     this.footerHeight = ref(44);
     this.viewportHeight = ref(null);
     this.bodyHeight = ref(null);
+    this.bodyScrollHeight = ref(0);
     this.fixedBodyHeight = ref(null);
     this.gutterWidth = scrollbarWidth();
     for (const name in options) {
@@ -37729,9 +37811,10 @@ class TableLayout {
     return flattenColumns;
   }
   updateElsHeight() {
+    var _a;
     if (!this.table.$ready)
       return nextTick(() => this.updateElsHeight());
-    const { headerWrapper, appendWrapper, footerWrapper } = this.table.refs;
+    const { headerWrapper, appendWrapper, footerWrapper, bodyWrapper } = this.table.refs;
     this.appendHeight.value = appendWrapper ? appendWrapper.offsetHeight : 0;
     if (this.showHeader && !headerWrapper)
       return;
@@ -37744,7 +37827,11 @@ class TableLayout {
     const tableHeight = this.tableHeight.value = this.table.vnode.el.clientHeight;
     const footerHeight = this.footerHeight.value = footerWrapper ? footerWrapper.offsetHeight : 0;
     if (this.height.value !== null) {
+      if (this.bodyHeight.value === null) {
+        requestAnimationFrame(() => this.updateElsHeight());
+      }
       this.bodyHeight.value = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
+      this.bodyScrollHeight.value = (_a = bodyWrapper.querySelector(".el-table__body")) == null ? void 0 : _a.scrollHeight;
     }
     this.fixedBodyHeight.value = this.scrollX.value ? this.bodyHeight.value - this.gutterWidth : this.bodyHeight.value;
     this.viewportHeight.value = this.scrollX.value ? tableHeight - this.gutterWidth : tableHeight;
@@ -38361,21 +38448,6 @@ function useEvent(props, emit) {
 function useStyle$2(props) {
   const instance = getCurrentInstance();
   const parent = instance.parent;
-  const storeData = parent.store.states;
-  const isCellHidden = (index, columns) => {
-    let start = 0;
-    for (let i = 0; i < index; i++) {
-      start += columns[i].colSpan;
-    }
-    const after = start + columns[index].colSpan - 1;
-    if (props.fixed === "left") {
-      return after >= storeData.fixedLeafColumnsLength.value;
-    } else if (props.fixed === "right") {
-      return start < storeData.columns.value.length - storeData.rightFixedLeafColumnsLength.value;
-    } else {
-      return after < storeData.fixedLeafColumnsLength.value || start >= storeData.columns.value.length - storeData.rightFixedLeafColumnsLength.value;
-    }
-  };
   const getHeaderRowStyle = (rowIndex) => {
     const headerRowStyle = parent.props.headerRowStyle;
     if (typeof headerRowStyle === "function") {
@@ -38393,29 +38465,33 @@ function useStyle$2(props) {
     }
     return classes.join(" ");
   };
-  const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
-    const headerCellStyle = parent.props.headerCellStyle;
-    if (typeof headerCellStyle === "function") {
-      return headerCellStyle.call(null, {
+  const getHeaderCellStyle = (rowIndex, columnIndex, row, column, hasGutter) => {
+    var _a;
+    let headerCellStyles = (_a = parent.props.headerCellStyle) != null ? _a : {};
+    if (typeof headerCellStyles === "function") {
+      headerCellStyles = headerCellStyles.call(null, {
         rowIndex,
         columnIndex,
         row,
         column
       });
     }
-    return headerCellStyle;
+    const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
+    ensureRightFixedStyle(fixedStyle, hasGutter);
+    ensurePosition(fixedStyle, "left");
+    ensurePosition(fixedStyle, "right");
+    return Object.assign({}, headerCellStyles, fixedStyle);
   };
   const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
+    const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(columnIndex, column.fixed, props.store, row);
     const classes = [
       column.id,
       column.order,
       column.headerAlign,
       column.className,
-      column.labelClassName
+      column.labelClassName,
+      ...fixedClasses
     ];
-    if (rowIndex === 0 && isCellHidden(columnIndex, row)) {
-      classes.push("is-hidden");
-    }
     if (!column.children) {
       classes.push("is-leaf");
     }
@@ -38490,6 +38566,7 @@ const convertToRows = (originColumns) => {
       column.rowSpan = maxLevel - column.level + 1;
     } else {
       column.rowSpan = 1;
+      column.children.forEach((col) => col.isSubColumn = true);
     }
     rows[column.level - 1].push(column);
   });
@@ -38550,7 +38627,10 @@ var TableHeader = defineComponent({
     const filterPanels = ref({});
     const { tableLayout, onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
     const hasGutter = computed(() => {
-      return !props.fixed && tableLayout.gutterWidth;
+      return !props.fixed && tableLayout.gutterWidth > 0 && tableLayout.bodyScrollHeight.value > tableLayout.bodyHeight.value;
+    });
+    const gutterWidth = computed(() => {
+      return tableLayout.gutterWidth;
     });
     onMounted(() => {
       nextTick(() => {
@@ -38584,6 +38664,7 @@ var TableHeader = defineComponent({
       columns: storeData.columns,
       filterPanels,
       hasGutter,
+      gutterWidth,
       onColumnsChange,
       onScrollableChange,
       columnRows,
@@ -38603,67 +38684,101 @@ var TableHeader = defineComponent({
     };
   },
   render() {
+    const {
+      columns,
+      isGroup,
+      hasGutter,
+      columnRows,
+      gutterWidth,
+      getHeaderCellStyle,
+      getHeaderCellClass,
+      getHeaderRowClass,
+      getHeaderRowStyle,
+      handleHeaderClick,
+      handleHeaderContextMenu,
+      handleMouseDown,
+      handleMouseMove,
+      handleSortClick,
+      handleMouseOut,
+      store,
+      $parent
+    } = this;
+    let rowSpan = 1;
     return h$1("table", {
       border: "0",
       cellpadding: "0",
       cellspacing: "0",
       class: "el-table__header"
     }, [
-      hColgroup(this.columns, this.hasGutter),
+      hColgroup(columns, hasGutter),
       h$1("thead", {
-        class: { "is-group": this.isGroup, "has-gutter": this.hasGutter }
-      }, this.columnRows.map((subColumns, rowIndex) => h$1("tr", {
-        class: this.getHeaderRowClass(rowIndex),
+        class: { "is-group": isGroup, "has-gutter": hasGutter }
+      }, columnRows.map((subColumns, rowIndex) => h$1("tr", {
+        class: getHeaderRowClass(rowIndex),
         key: rowIndex,
-        style: this.getHeaderRowStyle(rowIndex)
-      }, subColumns.map((column, cellIndex) => h$1("th", {
-        class: this.getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
-        colspan: column.colSpan,
-        key: `${column.id}-thead`,
-        rowSpan: column.rowSpan,
-        style: this.getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
-        onClick: ($event) => this.handleHeaderClick($event, column),
-        onContextmenu: ($event) => this.handleHeaderContextMenu($event, column),
-        onMousedown: ($event) => this.handleMouseDown($event, column),
-        onMousemove: ($event) => this.handleMouseMove($event, column),
-        onMouseout: this.handleMouseOut
-      }, [
-        h$1("div", {
-          class: [
-            "cell",
-            column.filteredValue && column.filteredValue.length > 0 ? "highlight" : "",
-            column.labelClassName
-          ]
+        style: getHeaderRowStyle(rowIndex)
+      }, subColumns.map((column, cellIndex) => {
+        if (column.rowSpan > rowSpan) {
+          rowSpan = column.rowSpan;
+        }
+        return h$1("th", {
+          class: getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
+          colspan: column.colSpan,
+          key: `${column.id}-thead`,
+          rowSpan: column.rowSpan,
+          style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column, hasGutter),
+          onClick: ($event) => handleHeaderClick($event, column),
+          onContextmenu: ($event) => handleHeaderContextMenu($event, column),
+          onMousedown: ($event) => handleMouseDown($event, column),
+          onMousemove: ($event) => handleMouseMove($event, column),
+          onMouseout: handleMouseOut
         }, [
-          column.renderHeader ? column.renderHeader({
-            column,
-            $index: cellIndex,
-            store: this.store,
-            _self: this.$parent
-          }) : column.label,
-          column.sortable && h$1("span", {
-            onClick: ($event) => this.handleSortClick($event, column),
-            class: "caret-wrapper"
+          h$1("div", {
+            class: [
+              "cell",
+              column.filteredValue && column.filteredValue.length > 0 ? "highlight" : "",
+              column.labelClassName
+            ]
           }, [
-            h$1("i", {
-              onClick: ($event) => this.handleSortClick($event, column, "ascending"),
-              class: "sort-caret ascending"
-            }),
-            h$1("i", {
-              onClick: ($event) => this.handleSortClick($event, column, "descending"),
-              class: "sort-caret descending"
+            column.renderHeader ? column.renderHeader({
+              column,
+              $index: cellIndex,
+              store,
+              _self: $parent
+            }) : column.label,
+            column.sortable && h$1("span", {
+              onClick: ($event) => handleSortClick($event, column),
+              class: "caret-wrapper"
+            }, [
+              h$1("i", {
+                onClick: ($event) => handleSortClick($event, column, "ascending"),
+                class: "sort-caret ascending"
+              }),
+              h$1("i", {
+                onClick: ($event) => handleSortClick($event, column, "descending"),
+                class: "sort-caret descending"
+              })
+            ]),
+            column.filterable && h$1(script$k, {
+              store: $parent.store,
+              placement: column.filterPlacement || "bottom-start",
+              column,
+              upDataColumn: (key, value) => {
+                column[key] = value;
+              }
             })
-          ]),
-          column.filterable && h$1(script$k, {
-            store: this.$parent.store,
-            placement: column.filterPlacement || "bottom-start",
-            column,
-            upDataColumn: (key, value) => {
-              column[key] = value;
-            }
-          })
-        ])
-      ])))))
+          ])
+        ]);
+      }).concat(hasGutter && rowIndex === 0 ? [
+        h$1("th", {
+          class: "el-table__fixed-right-patch el-table__cell",
+          key: `el-table--scrollbar`,
+          rowSpan,
+          style: {
+            width: `${gutterWidth}px`
+          }
+        }, [])
+      ] : []))))
     ]);
   }
 });
@@ -38752,15 +38867,6 @@ function useEvents(props) {
 function useStyles(props) {
   const instance = getCurrentInstance();
   const parent = instance.parent;
-  const isColumnHidden = (index) => {
-    if (props.fixed === "left") {
-      return index >= props.store.states.fixedLeafColumnsLength.value;
-    } else if (props.fixed === "right") {
-      return index < props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
-    } else {
-      return index < props.store.states.fixedLeafColumnsLength.value || index >= props.store.states.columns.value.length - props.store.states.rightFixedLeafColumnsLength.value;
-    }
-  };
   const getRowStyle = (row, rowIndex) => {
     const rowStyle = parent.props.rowStyle;
     if (typeof rowStyle === "function") {
@@ -38795,21 +38901,23 @@ function useStyles(props) {
   };
   const getCellStyle = (rowIndex, columnIndex, row, column) => {
     const cellStyle = parent.props.cellStyle;
+    let cellStyles = cellStyle != null ? cellStyle : {};
     if (typeof cellStyle === "function") {
-      return cellStyle.call(null, {
+      cellStyles = cellStyle.call(null, {
         rowIndex,
         columnIndex,
         row,
         column
       });
     }
-    return cellStyle;
+    const fixedStyle = getFixedColumnOffset(columnIndex, props.fixed, props.store);
+    ensurePosition(fixedStyle, "left");
+    ensurePosition(fixedStyle, "right");
+    return Object.assign({}, cellStyles, fixedStyle);
   };
   const getCellClass = (rowIndex, columnIndex, row, column) => {
-    const classes = [column.id, column.align, column.className];
-    if (isColumnHidden(columnIndex)) {
-      classes.push("is-hidden");
-    }
+    const fixedClasses = column.isSubColumn ? [] : getFixedColumnsClass(columnIndex, props.fixed, props.store);
+    const classes = [column.id, column.align, column.className, ...fixedClasses];
     const cellClassName = parent.props.cellClassName;
     if (typeof cellClassName === "string") {
       classes.push(cellClassName);
@@ -38858,8 +38966,7 @@ function useStyles(props) {
     getCellStyle,
     getCellClass,
     getSpan,
-    getColspanRealWidth,
-    isColumnHidden
+    getColspanRealWidth
   };
 }
 
@@ -39124,17 +39231,19 @@ var TableBody = defineComponent({
     };
   },
   render() {
-    const data = this.store.states.data.value || [];
+    const { wrappedRowRender, store } = this;
+    const data = store.states.data.value || [];
+    const columns = store.states.columns.value;
     return h$1("table", {
       class: "el-table__body",
       cellspacing: "0",
       cellpadding: "0",
       border: "0"
     }, [
-      hColgroup(this.store.states.columns.value),
+      hColgroup(columns),
       h$1("tbody", {}, [
         data.reduce((acc, row) => {
-          return acc.concat(this.wrappedRowRender(row, acc.length));
+          return acc.concat(wrappedRowRender(row, acc.length));
         }, [])
       ])
     ]);
@@ -39173,49 +39282,45 @@ function useMapState() {
 function useStyle$1(props) {
   const instance = getCurrentInstance();
   const table = instance.parent;
-  const store = table.store;
-  const {
-    leftFixedLeafCount,
-    rightFixedLeafCount,
-    columnsCount,
-    leftFixedCount,
-    rightFixedCount,
-    columns
-  } = useMapState();
+  const { columns } = useMapState();
   const hasGutter = computed(() => {
-    return !props.fixed && !table.layout.gutterWidth;
+    return !props.fixed && table.layout.gutterWidth > 0 && table.layout.height.value && table.layout.bodyScrollHeight.value > table.layout.bodyHeight.value;
   });
-  const isCellHidden = (index, columns2, column) => {
-    if (props.fixed || props.fixed === "left") {
-      return index >= leftFixedLeafCount.value;
-    } else if (props.fixed === "right") {
-      let before = 0;
-      for (let i = 0; i < index; i++) {
-        before += columns2[i].colSpan;
-      }
-      return before < columnsCount.value - rightFixedLeafCount.value;
-    } else if (!props.fixed && column.fixed) {
-      return true;
-    } else {
-      return index < leftFixedCount.value || index >= columnsCount.value - rightFixedCount.value;
-    }
-  };
-  const getRowClasses = (column, cellIndex) => {
-    const classes = [column.id, column.align, column.labelClassName];
+  const gutterWidth = computed(() => {
+    return table.layout.gutterWidth;
+  });
+  const getCellClasses = (columns2, cellIndex, hasGutter2) => {
+    const column = columns2[cellIndex];
+    const classes = [
+      "el-table__cell",
+      column.id,
+      column.align,
+      column.labelClassName,
+      ...getFixedColumnsClass(cellIndex, column.fixed, props.store)
+    ];
     if (column.className) {
       classes.push(column.className);
     }
-    if (isCellHidden(cellIndex, store.states.columns.value, column)) {
-      classes.push("is-hidden");
-    }
     if (!column.children) {
       classes.push("is-leaf");
     }
+    if (hasGutter2 && cellIndex === columns2.length - 1) {
+      classes.push("last");
+    }
     return classes;
   };
+  const getCellStyles = (column, cellIndex, hasGutter2) => {
+    const fixedStyle = getFixedColumnOffset(cellIndex, column.fixed, props.store);
+    ensureRightFixedStyle(fixedStyle, hasGutter2);
+    ensurePosition(fixedStyle, "left");
+    ensurePosition(fixedStyle, "right");
+    return fixedStyle;
+  };
   return {
     hasGutter,
-    getRowClasses,
+    gutterWidth,
+    getCellClasses,
+    getCellStyles,
     columns
   };
 }
@@ -39245,27 +39350,39 @@ var TableFooter = defineComponent({
     }
   },
   setup(props) {
-    const { hasGutter, getRowClasses, columns } = useStyle$1(props);
+    const { hasGutter, getCellClasses, getCellStyles, columns, gutterWidth } = useStyle$1(props);
     return {
-      getRowClasses,
+      getCellClasses,
+      getCellStyles,
       hasGutter,
+      gutterWidth,
       columns
     };
   },
   render() {
+    const {
+      hasGutter,
+      gutterWidth,
+      columns,
+      getCellStyles,
+      getCellClasses,
+      summaryMethod,
+      sumText
+    } = this;
+    const data = this.store.states.data.value;
     let sums = [];
-    if (this.summaryMethod) {
-      sums = this.summaryMethod({
-        columns: this.columns,
-        data: this.store.states.data.value
+    if (summaryMethod) {
+      sums = summaryMethod({
+        columns,
+        data
       });
     } else {
-      this.columns.forEach((column, index) => {
+      columns.forEach((column, index) => {
         if (index === 0) {
-          sums[index] = this.sumText;
+          sums[index] = sumText;
           return;
         }
-        const values = this.store.states.data.value.map((item) => Number(item[column.property]));
+        const values = data.map((item) => Number(item[column.property]));
         const precisions = [];
         let notNumber = true;
         values.forEach((value) => {
@@ -39296,25 +39413,28 @@ var TableFooter = defineComponent({
       cellpadding: "0",
       border: "0"
     }, [
-      hColgroup(this.columns, this.hasGutter),
+      hColgroup(columns, hasGutter),
       h$1("tbody", {
-        class: [{ "has-gutter": this.hasGutter }]
+        class: [{ "has-gutter": hasGutter }]
       }, [
         h$1("tr", {}, [
-          ...this.columns.map((column, cellIndex) => h$1("td", {
+          ...columns.map((column, cellIndex) => h$1("td", {
             key: cellIndex,
             colspan: column.colSpan,
             rowspan: column.rowSpan,
-            class: [
-              ...this.getRowClasses(column, cellIndex),
-              "el-table__cell"
-            ]
+            class: getCellClasses(columns, cellIndex, hasGutter),
+            style: getCellStyles(column, cellIndex, hasGutter)
           }, [
             h$1("div", {
               class: ["cell", column.labelClassName]
             }, [sums[cellIndex]])
           ])),
-          this.hasGutter && hGutter()
+          hasGutter && h$1("td", {
+            class: "el-table__fixed-right-patch el-table__cell",
+            style: {
+              width: `${gutterWidth}px`
+            }
+          })
         ])
       ])
     ]);
@@ -39409,6 +39529,17 @@ function useStyle(props, layout, store, table) {
   const shouldUpdateHeight = computed(() => {
     return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
   });
+  const tableBodyStyles = computed(() => {
+    return {
+      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
+    };
+  });
+  const borderBottomPatchStyles = computed(() => {
+    return {
+      bottom: `${layout.gutterWidth}px`,
+      right: `${layout.gutterWidth}px`
+    };
+  });
   const doLayout = () => {
     if (shouldUpdateHeight.value) {
       layout.updateElsHeight();
@@ -39445,27 +39576,18 @@ function useStyle(props, layout, store, table) {
     el.className = classList.join(" ");
   };
   const setScrollClass = (className) => {
-    const { bodyWrapper } = table.refs;
-    setScrollClassByEl(bodyWrapper, className);
+    const { tableWrapper } = table.refs;
+    setScrollClassByEl(tableWrapper, className);
   };
-  const syncPostion = throttle$1(function() {
+  const syncPostion = function() {
     if (!table.refs.bodyWrapper)
       return;
-    const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = table.refs.bodyWrapper;
-    const {
-      headerWrapper,
-      footerWrapper,
-      fixedBodyWrapper,
-      rightFixedBodyWrapper
-    } = table.refs;
+    const { scrollLeft, offsetWidth, scrollWidth } = table.refs.bodyWrapper;
+    const { headerWrapper, footerWrapper } = table.refs;
     if (headerWrapper)
       headerWrapper.scrollLeft = scrollLeft;
     if (footerWrapper)
       footerWrapper.scrollLeft = scrollLeft;
-    if (fixedBodyWrapper)
-      fixedBodyWrapper.scrollTop = scrollTop;
-    if (rightFixedBodyWrapper)
-      rightFixedBodyWrapper.scrollTop = scrollTop;
     const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
     if (scrollLeft >= maxScrollLeftPosition) {
       setScrollClass("is-scrolling-right");
@@ -39474,7 +39596,7 @@ function useStyle(props, layout, store, table) {
     } else {
       setScrollClass("is-scrolling-middle");
     }
-  }, 10);
+  };
   const bindEvents = () => {
     table.refs.bodyWrapper.addEventListener("scroll", syncPostion, {
       passive: true
@@ -39626,7 +39748,9 @@ function useStyle(props, layout, store, table) {
     resizeProxyVisible,
     bodyWidth,
     resizeState,
-    doLayout
+    doLayout,
+    tableBodyStyles,
+    borderBottomPatchStyles
   };
 }
 
@@ -39771,7 +39895,9 @@ var script$j = defineComponent({
       resizeProxyVisible,
       bodyWidth,
       resizeState,
-      doLayout
+      doLayout,
+      tableBodyStyles,
+      borderBottomPatchStyles
     } = useStyle(props, layout, store, table);
     const debouncedUpdateLayout = debounce$3(doLayout, 50);
     const tableId = `el-table_${tableIdSeed++}`;
@@ -39782,6 +39908,10 @@ var script$j = defineComponent({
       doLayout,
       debouncedUpdateLayout
     };
+    const computedSumText = computed(() => props.sumText || t("el.table.sumText"));
+    const computedEmptyText = computed(() => {
+      return props.emptyText || t("el.table.emptyText");
+    });
     return {
       layout,
       store,
@@ -39797,7 +39927,9 @@ var script$j = defineComponent({
       isGroup,
       bodyWidth,
       bodyHeight,
+      tableBodyStyles,
       emptyBlockStyle,
+      borderBottomPatchStyles,
       debouncedUpdateLayout,
       handleFixedMousewheel,
       fixedHeight,
@@ -39813,52 +39945,39 @@ var script$j = defineComponent({
       sort,
       t,
       setDragVisible,
-      context: table
+      context: table,
+      computedSumText,
+      computedEmptyText
     };
   }
 });
 
-const _hoisted_1$d = {
+const _hoisted_1$d = { class: "el-table__inner-wrapper" };
+const _hoisted_2$a = {
   ref: "hiddenColumns",
   class: "hidden-columns"
 };
-const _hoisted_2$a = {
+const _hoisted_3$8 = {
   key: 0,
   ref: "headerWrapper",
   class: "el-table__header-wrapper"
 };
-const _hoisted_3$8 = { class: "el-table__empty-text" };
-const _hoisted_4$5 = {
+const _hoisted_4$5 = { class: "el-table__empty-text" };
+const _hoisted_5$4 = {
   key: 1,
   ref: "appendWrapper",
   class: "el-table__append-wrapper"
 };
-const _hoisted_5$4 = {
-  key: 1,
-  ref: "footerWrapper",
-  class: "el-table__footer-wrapper"
-};
 const _hoisted_6$3 = {
-  key: 0,
-  ref: "fixedHeaderWrapper",
-  class: "el-table__fixed-header-wrapper"
-};
-const _hoisted_7$2 = {
   key: 1,
-  ref: "fixedFooterWrapper",
-  class: "el-table__fixed-footer-wrapper"
+  class: "el-table__border-left-patch"
 };
-const _hoisted_8$2 = {
+const _hoisted_7$2 = {
   key: 0,
-  ref: "rightFixedHeaderWrapper",
-  class: "el-table__fixed-header-wrapper"
-};
-const _hoisted_9$1 = {
-  key: 1,
-  ref: "rightFixedFooterWrapper",
-  class: "el-table__fixed-footer-wrapper"
+  ref: "footerWrapper",
+  class: "el-table__footer-wrapper"
 };
-const _hoisted_10$1 = {
+const _hoisted_8$2 = {
   ref: "resizeProxy",
   class: "el-table__column-resize-proxy"
 };
@@ -39868,6 +39987,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_table_footer = resolveComponent("table-footer");
   const _directive_mousewheel = resolveDirective("mousewheel");
   return openBlock(), createElementBlock("div", {
+    ref: "tableWrapper",
     class: normalizeClass([
       {
         "el-table--fit": _ctx.fit,
@@ -39889,168 +40009,28 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
   }, [
     createElementVNode("div", _hoisted_1$d, [
-      renderSlot(_ctx.$slots, "default")
-    ], 512),
-    _ctx.showHeader ? withDirectives((openBlock(), createElementBlock("div", _hoisted_2$a, [
-      createVNode(_component_table_header, {
-        ref: "tableHeader",
-        border: _ctx.border,
-        "default-sort": _ctx.defaultSort,
-        store: _ctx.store,
-        style: normalizeStyle({
-          width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + "px" : ""
-        }),
-        onSetDragVisible: _ctx.setDragVisible
-      }, null, 8, ["border", "default-sort", "store", "style", "onSetDragVisible"])
-    ])), [
-      [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
-    ]) : createCommentVNode("v-if", true),
-    createElementVNode("div", {
-      ref: "bodyWrapper",
-      style: normalizeStyle([_ctx.bodyHeight]),
-      class: "el-table__body-wrapper"
-    }, [
-      createVNode(_component_table_body, {
-        context: _ctx.context,
-        highlight: _ctx.highlightCurrentRow,
-        "row-class-name": _ctx.rowClassName,
-        "tooltip-effect": _ctx.tooltipEffect,
-        "row-style": _ctx.rowStyle,
-        store: _ctx.store,
-        stripe: _ctx.stripe,
-        style: normalizeStyle({
-          width: _ctx.bodyWidth
-        })
-      }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-      _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        ref: "emptyBlock",
-        style: normalizeStyle(_ctx.emptyBlockStyle),
-        class: "el-table__empty-block"
-      }, [
-        createElementVNode("span", _hoisted_3$8, [
-          renderSlot(_ctx.$slots, "empty", {}, () => [
-            createTextVNode(toDisplayString(_ctx.emptyText || _ctx.t("el.table.emptyText")), 1)
-          ])
-        ])
-      ], 4)) : createCommentVNode("v-if", true),
-      _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
-        renderSlot(_ctx.$slots, "append")
-      ], 512)) : createCommentVNode("v-if", true)
-    ], 4),
-    _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", _hoisted_5$4, [
-      createVNode(_component_table_footer, {
-        border: _ctx.border,
-        "default-sort": _ctx.defaultSort,
-        store: _ctx.store,
-        style: normalizeStyle({
-          width: _ctx.layout.bodyWidth.value ? _ctx.layout.bodyWidth.value + "px" : ""
-        }),
-        "sum-text": _ctx.sumText || _ctx.t("el.table.sumText"),
-        "summary-method": _ctx.summaryMethod
-      }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
-    ])), [
-      [vShow, !_ctx.isEmpty],
-      [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
-    ]) : createCommentVNode("v-if", true),
-    _ctx.store.states.fixedColumns.value.length > 0 ? withDirectives((openBlock(), createElementBlock("div", {
-      key: 2,
-      ref: "fixedWrapper",
-      style: normalizeStyle([
-        {
-          width: _ctx.layout.fixedWidth.value ? _ctx.layout.fixedWidth.value + "px" : ""
-        },
-        _ctx.fixedHeight
-      ]),
-      class: "el-table__fixed"
-    }, [
-      _ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
-        createVNode(_component_table_header, {
-          ref: "fixedTableHeader",
-          border: _ctx.border,
-          store: _ctx.store,
-          style: normalizeStyle({
-            width: _ctx.bodyWidth
-          }),
-          fixed: "left",
-          onSetDragVisible: _ctx.setDragVisible
-        }, null, 8, ["border", "store", "style", "onSetDragVisible"])
-      ], 512)) : createCommentVNode("v-if", true),
-      createElementVNode("div", {
-        ref: "fixedBodyWrapper",
-        style: normalizeStyle([
-          {
-            top: _ctx.layout.headerHeight.value + "px"
-          },
-          _ctx.fixedBodyHeight
-        ]),
-        class: "el-table__fixed-body-wrapper"
-      }, [
-        createVNode(_component_table_body, {
-          highlight: _ctx.highlightCurrentRow,
-          "row-class-name": _ctx.rowClassName,
-          "tooltip-effect": _ctx.tooltipEffect,
-          "row-style": _ctx.rowStyle,
-          store: _ctx.store,
-          stripe: _ctx.stripe,
-          style: normalizeStyle({
-            width: _ctx.bodyWidth
-          }),
-          fixed: "left"
-        }, null, 8, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-        _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          style: normalizeStyle({ height: _ctx.layout.appendHeight.value + "px" }),
-          class: "el-table__append-gutter"
-        }, null, 4)) : createCommentVNode("v-if", true)
-      ], 4),
-      _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", _hoisted_7$2, [
-        createVNode(_component_table_footer, {
-          border: _ctx.border,
-          store: _ctx.store,
-          style: normalizeStyle({
-            width: _ctx.bodyWidth
-          }),
-          "sum-text": _ctx.sumText || _ctx.t("el.table.sumText"),
-          "summary-method": _ctx.summaryMethod,
-          fixed: "left"
-        }, null, 8, ["border", "store", "style", "sum-text", "summary-method"])
-      ], 512)), [
-        [vShow, !_ctx.isEmpty]
-      ]) : createCommentVNode("v-if", true)
-    ], 4)), [
-      [_directive_mousewheel, _ctx.handleFixedMousewheel]
-    ]) : createCommentVNode("v-if", true),
-    _ctx.store.states.rightFixedColumns.value.length > 0 ? withDirectives((openBlock(), createElementBlock("div", {
-      key: 3,
-      ref: "rightFixedWrapper",
-      style: normalizeStyle([
-        {
-          width: _ctx.layout.rightFixedWidth.value ? _ctx.layout.rightFixedWidth.value + "px" : "",
-          right: _ctx.layout.scrollY.value ? (_ctx.border ? _ctx.layout.gutterWidth : _ctx.layout.gutterWidth || 0) + "px" : ""
-        },
-        _ctx.fixedHeight
-      ]),
-      class: "el-table__fixed-right"
-    }, [
-      _ctx.showHeader ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+      createElementVNode("div", _hoisted_2$a, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512),
+      _ctx.showHeader ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3$8, [
         createVNode(_component_table_header, {
-          ref: "rightFixedTableHeader",
+          ref: "tableHeader",
           border: _ctx.border,
+          "default-sort": _ctx.defaultSort,
           store: _ctx.store,
-          style: normalizeStyle({
-            width: _ctx.bodyWidth
-          }),
-          fixed: "right",
+          style: normalizeStyle(_ctx.tableBodyStyles),
           onSetDragVisible: _ctx.setDragVisible
-        }, null, 8, ["border", "store", "style", "onSetDragVisible"])
-      ], 512)) : createCommentVNode("v-if", true),
+        }, null, 8, ["border", "default-sort", "store", "style", "onSetDragVisible"])
+      ])), [
+        [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
+      ]) : createCommentVNode("v-if", true),
       createElementVNode("div", {
-        ref: "rightFixedBodyWrapper",
-        style: normalizeStyle([{ top: _ctx.layout.headerHeight.value + "px" }, _ctx.fixedBodyHeight]),
-        class: "el-table__fixed-body-wrapper"
+        ref: "bodyWrapper",
+        style: normalizeStyle(_ctx.bodyHeight),
+        class: "el-table__body-wrapper"
       }, [
         createVNode(_component_table_body, {
+          context: _ctx.context,
           highlight: _ctx.highlightCurrentRow,
           "row-class-name": _ctx.rowClassName,
           "tooltip-effect": _ctx.tooltipEffect,
@@ -40059,42 +40039,45 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
           stripe: _ctx.stripe,
           style: normalizeStyle({
             width: _ctx.bodyWidth
-          }),
-          fixed: "right"
-        }, null, 8, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-        _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
+          })
+        }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
+        _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
           key: 0,
-          style: normalizeStyle({ height: _ctx.layout.appendHeight.value + "px" }),
-          class: "el-table__append-gutter"
-        }, null, 4)) : createCommentVNode("v-if", true)
+          ref: "emptyBlock",
+          style: normalizeStyle(_ctx.emptyBlockStyle),
+          class: "el-table__empty-block"
+        }, [
+          createElementVNode("span", _hoisted_4$5, [
+            renderSlot(_ctx.$slots, "empty", {}, () => [
+              createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)
+            ])
+          ])
+        ], 4)) : createCommentVNode("v-if", true),
+        _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          renderSlot(_ctx.$slots, "append")
+        ], 512)) : createCommentVNode("v-if", true)
       ], 4),
-      _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", _hoisted_9$1, [
-        createVNode(_component_table_footer, {
-          border: _ctx.border,
-          store: _ctx.store,
-          style: normalizeStyle({
-            width: _ctx.bodyWidth
-          }),
-          "sum-text": _ctx.sumText || _ctx.t("el.table.sumText"),
-          "summary-method": _ctx.summaryMethod,
-          fixed: "right"
-        }, null, 8, ["border", "store", "style", "sum-text", "summary-method"])
-      ], 512)), [
-        [vShow, !_ctx.isEmpty]
-      ]) : createCommentVNode("v-if", true)
-    ], 4)), [
-      [_directive_mousewheel, _ctx.handleFixedMousewheel]
+      _ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", _hoisted_6$3)) : createCommentVNode("v-if", true),
+      _ctx.layout.scrollX.value && _ctx.layout.height.value ? (openBlock(), createElementBlock("div", {
+        key: 2,
+        class: "el-table__border-bottom-patch",
+        style: normalizeStyle(_ctx.borderBottomPatchStyles)
+      }, null, 4)) : createCommentVNode("v-if", true)
+    ]),
+    _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", _hoisted_7$2, [
+      createVNode(_component_table_footer, {
+        border: _ctx.border,
+        "default-sort": _ctx.defaultSort,
+        store: _ctx.store,
+        style: normalizeStyle(_ctx.tableBodyStyles),
+        "sum-text": _ctx.computedSumText,
+        "summary-method": _ctx.summaryMethod
+      }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
+    ])), [
+      [vShow, !_ctx.isEmpty],
+      [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
     ]) : createCommentVNode("v-if", true),
-    _ctx.store.states.rightFixedColumns.value.length > 0 ? (openBlock(), createElementBlock("div", {
-      key: 4,
-      ref: "rightFixedPatch",
-      style: normalizeStyle({
-        width: _ctx.layout.scrollY.value ? _ctx.layout.gutterWidth + "px" : "0",
-        height: _ctx.layout.headerHeight.value + "px"
-      }),
-      class: "el-table__fixed-right-patch"
-    }, null, 4)) : createCommentVNode("v-if", true),
-    withDirectives(createElementVNode("div", _hoisted_10$1, null, 512), [
+    withDirectives(createElementVNode("div", _hoisted_8$2, null, 512), [
       [vShow, _ctx.resizeProxyVisible]
     ])
   ], 38);
@@ -40573,6 +40556,7 @@ var ElTableColumn$1 = defineComponent({
         filteredValue: [],
         filterPlacement: "",
         isColumnGroup: false,
+        isSubColumn: false,
         filterOpened: false,
         sortable,
         index: props.index,