@element-plus/nightly 0.0.20220104 → 0.0.20220105

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20220104 */
+/*! Element Plus v0.0.20220105 */
 
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -4531,7 +4531,7 @@
 	  });
 	}
 
-	const version$1 = "0.0.20220104";
+	const version$1 = "0.0.20220105";
 
 	const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 	const makeInstaller = (components = []) => {
@@ -6736,11 +6736,11 @@
 	  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"
@@ -6863,7 +6863,7 @@
 	        })) : vue.createCommentVNode("v-if", true)
 	      ])) : vue.createCommentVNode("v-if", true),
 	      vue.createCommentVNode(" append slot "),
-	      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$8, [
+	      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$7, [
 	        vue.renderSlot(_ctx.$slots, "append")
 	      ])) : vue.createCommentVNode("v-if", true)
 	    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
@@ -6887,7 +6887,7 @@
 	        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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$4, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.attrs.maxlength), 1)) : vue.createCommentVNode("v-if", true)
 	    ], 64))
 	  ], 38)), [
@@ -20180,8 +20180,8 @@
 	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__ */ vue.createElementVNode("td", null, null, -1);
 	const _hoisted_12$3 = /* @__PURE__ */ vue.createElementVNode("td", null, null, -1);
 	function render$1b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -20238,12 +20238,12 @@
 	        vue.createElementVNode("td", {
 	          class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 8)])
 	        }, [
-	          vue.createElementVNode("a", _hoisted_9$7, vue.toDisplayString(_ctx.startYear + 8), 1)
+	          vue.createElementVNode("a", _hoisted_9$6, vue.toDisplayString(_ctx.startYear + 8), 1)
 	        ], 2),
 	        vue.createElementVNode("td", {
 	          class: vue.normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + 9)])
 	        }, [
-	          vue.createElementVNode("a", _hoisted_10$7, vue.toDisplayString(_ctx.startYear + 9), 1)
+	          vue.createElementVNode("a", _hoisted_10$6, vue.toDisplayString(_ctx.startYear + 9), 1)
 	        ], 2),
 	        _hoisted_11$3,
 	        _hoisted_12$3
@@ -20664,8 +20664,8 @@
 	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" };
@@ -20763,7 +20763,7 @@
 	              ]),
 	              _: 1
 	            })
-	          ], 8, _hoisted_9$6), [
+	          ], 8, _hoisted_9$5), [
 	            [vue.vShow, _ctx.currentView === "date"]
 	          ]),
 	          vue.createElementVNode("span", {
@@ -20790,7 +20790,7 @@
 	              ]),
 	              _: 1
 	            })
-	          ], 8, _hoisted_10$6),
+	          ], 8, _hoisted_10$5),
 	          vue.withDirectives(vue.createElementVNode("button", {
 	            type: "button",
 	            "aria-label": _ctx.t(`el.datepicker.nextMonth`),
@@ -21299,8 +21299,8 @@
 	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" };
@@ -21390,8 +21390,8 @@
 	              _: 1
 	            })
 	          ]),
-	          vue.createElementVNode("span", _hoisted_9$5, [
-	            vue.createElementVNode("span", _hoisted_10$5, [
+	          vue.createElementVNode("span", _hoisted_9$4, [
+	            vue.createElementVNode("span", _hoisted_10$4, [
 	              vue.createVNode(_component_el_input, {
 	                size: "small",
 	                class: "el-date-range-picker__editor",
@@ -21774,8 +21774,8 @@
 	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 = vue.resolveComponent("d-arrow-left");
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -21844,7 +21844,7 @@
 	          }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onPick", "onSelect"])
 	        ]),
 	        vue.createElementVNode("div", _hoisted_8$6, [
-	          vue.createElementVNode("div", _hoisted_9$4, [
+	          vue.createElementVNode("div", _hoisted_9$3, [
 	            _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
 	              key: 0,
 	              type: "button",
@@ -21858,7 +21858,7 @@
 	                ]),
 	                _: 1
 	              })
-	            ], 10, _hoisted_10$4)) : vue.createCommentVNode("v-if", true),
+	            ], 10, _hoisted_10$3)) : vue.createCommentVNode("v-if", true),
 	            vue.createElementVNode("button", {
 	              type: "button",
 	              class: "el-picker-panel__icon-btn d-arrow-right",
@@ -24136,11 +24136,11 @@
 	  "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",
@@ -24220,14 +24220,14 @@
 	        y1: "9.5%",
 	        x2: "100%",
 	        y2: "90.5%"
-	      }, _hoisted_9$3, 8, _hoisted_6$a),
+	      }, _hoisted_9$2, 8, _hoisted_6$a),
 	      vue.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)
 	    ]),
 	    vue.createElementVNode("g", _hoisted_11, [
 	      vue.createElementVNode("g", _hoisted_12, [
@@ -33143,7 +33143,7 @@
 	  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]
@@ -33193,8 +33193,8 @@
 	    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");
@@ -34361,8 +34361,8 @@
 	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 = vue.resolveComponent("el-tag");
 	  const _component_el_icon = vue.resolveComponent("el-icon");
@@ -34569,7 +34569,7 @@
 	                "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue)
 	              })
 	            }, vue.toDisplayString(_ctx.currentPlaceholder), 3)) : vue.createCommentVNode("v-if", true),
-	            vue.createElementVNode("span", _hoisted_9$2, [
+	            vue.createElementVNode("span", _hoisted_9$1, [
 	              _ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, {
 	                key: 0,
 	                class: vue.normalizeClass(["el-select-v2__caret", "el-input__icon", _ctx.iconReverse])
@@ -34617,7 +34617,7 @@
 	          ]),
 	          empty: vue.withCtx(() => [
 	            vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-	              vue.createElementVNode("p", _hoisted_10$2, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1)
+	              vue.createElementVNode("p", _hoisted_10$1, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 1)
 	            ])
 	          ]),
 	          _: 3
@@ -36679,6 +36679,87 @@
 	  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 = vue.getCurrentInstance();
@@ -37664,6 +37745,7 @@
 	    this.footerHeight = vue.ref(44);
 	    this.viewportHeight = vue.ref(null);
 	    this.bodyHeight = vue.ref(null);
+	    this.bodyScrollHeight = vue.ref(0);
 	    this.fixedBodyHeight = vue.ref(null);
 	    this.gutterWidth = scrollbarWidth();
 	    for (const name in options) {
@@ -37733,9 +37815,10 @@
 	    return flattenColumns;
 	  }
 	  updateElsHeight() {
+	    var _a;
 	    if (!this.table.$ready)
 	      return vue.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;
@@ -37748,7 +37831,11 @@
 	    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;
@@ -38365,21 +38452,6 @@
 	function useStyle$2(props) {
 	  const instance = vue.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") {
@@ -38397,29 +38469,33 @@
 	    }
 	    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");
 	    }
@@ -38494,6 +38570,7 @@
 	      column.rowSpan = maxLevel - column.level + 1;
 	    } else {
 	      column.rowSpan = 1;
+	      column.children.forEach((col) => col.isSubColumn = true);
 	    }
 	    rows[column.level - 1].push(column);
 	  });
@@ -38554,7 +38631,10 @@
 	    const filterPanels = vue.ref({});
 	    const { tableLayout, onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
 	    const hasGutter = vue.computed(() => {
-	      return !props.fixed && tableLayout.gutterWidth;
+	      return !props.fixed && tableLayout.gutterWidth > 0 && tableLayout.bodyScrollHeight.value > tableLayout.bodyHeight.value;
+	    });
+	    const gutterWidth = vue.computed(() => {
+	      return tableLayout.gutterWidth;
 	    });
 	    vue.onMounted(() => {
 	      vue.nextTick(() => {
@@ -38588,6 +38668,7 @@
 	      columns: storeData.columns,
 	      filterPanels,
 	      hasGutter,
+	      gutterWidth,
 	      onColumnsChange,
 	      onScrollableChange,
 	      columnRows,
@@ -38607,67 +38688,101 @@
 	    };
 	  },
 	  render() {
+	    const {
+	      columns,
+	      isGroup,
+	      hasGutter,
+	      columnRows,
+	      gutterWidth,
+	      getHeaderCellStyle,
+	      getHeaderCellClass,
+	      getHeaderRowClass,
+	      getHeaderRowStyle,
+	      handleHeaderClick,
+	      handleHeaderContextMenu,
+	      handleMouseDown,
+	      handleMouseMove,
+	      handleSortClick,
+	      handleMouseOut,
+	      store,
+	      $parent
+	    } = this;
+	    let rowSpan = 1;
 	    return vue.h("table", {
 	      border: "0",
 	      cellpadding: "0",
 	      cellspacing: "0",
 	      class: "el-table__header"
 	    }, [
-	      hColgroup(this.columns, this.hasGutter),
+	      hColgroup(columns, hasGutter),
 	      vue.h("thead", {
-	        class: { "is-group": this.isGroup, "has-gutter": this.hasGutter }
-	      }, this.columnRows.map((subColumns, rowIndex) => vue.h("tr", {
-	        class: this.getHeaderRowClass(rowIndex),
+	        class: { "is-group": isGroup, "has-gutter": hasGutter }
+	      }, columnRows.map((subColumns, rowIndex) => vue.h("tr", {
+	        class: getHeaderRowClass(rowIndex),
 	        key: rowIndex,
-	        style: this.getHeaderRowStyle(rowIndex)
-	      }, subColumns.map((column, cellIndex) => vue.h("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
-	      }, [
-	        vue.h("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 vue.h("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 && vue.h("span", {
-	            onClick: ($event) => this.handleSortClick($event, column),
-	            class: "caret-wrapper"
+	          vue.h("div", {
+	            class: [
+	              "cell",
+	              column.filteredValue && column.filteredValue.length > 0 ? "highlight" : "",
+	              column.labelClassName
+	            ]
 	          }, [
-	            vue.h("i", {
-	              onClick: ($event) => this.handleSortClick($event, column, "ascending"),
-	              class: "sort-caret ascending"
-	            }),
-	            vue.h("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 && vue.h("span", {
+	              onClick: ($event) => handleSortClick($event, column),
+	              class: "caret-wrapper"
+	            }, [
+	              vue.h("i", {
+	                onClick: ($event) => handleSortClick($event, column, "ascending"),
+	                class: "sort-caret ascending"
+	              }),
+	              vue.h("i", {
+	                onClick: ($event) => handleSortClick($event, column, "descending"),
+	                class: "sort-caret descending"
+	              })
+	            ]),
+	            column.filterable && vue.h(script$k, {
+	              store: $parent.store,
+	              placement: column.filterPlacement || "bottom-start",
+	              column,
+	              upDataColumn: (key, value) => {
+	                column[key] = value;
+	              }
 	            })
-	          ]),
-	          column.filterable && vue.h(script$k, {
-	            store: this.$parent.store,
-	            placement: column.filterPlacement || "bottom-start",
-	            column,
-	            upDataColumn: (key, value) => {
-	              column[key] = value;
-	            }
-	          })
-	        ])
-	      ])))))
+	          ])
+	        ]);
+	      }).concat(hasGutter && rowIndex === 0 ? [
+	        vue.h("th", {
+	          class: "el-table__fixed-right-patch el-table__cell",
+	          key: `el-table--scrollbar`,
+	          rowSpan,
+	          style: {
+	            width: `${gutterWidth}px`
+	          }
+	        }, [])
+	      ] : []))))
 	    ]);
 	  }
 	});
@@ -38756,15 +38871,6 @@
 	function useStyles(props) {
 	  const instance = vue.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") {
@@ -38799,21 +38905,23 @@
 	  };
 	  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);
@@ -38862,8 +38970,7 @@
 	    getCellStyle,
 	    getCellClass,
 	    getSpan,
-	    getColspanRealWidth,
-	    isColumnHidden
+	    getColspanRealWidth
 	  };
 	}
 
@@ -39128,17 +39235,19 @@
 	    };
 	  },
 	  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 vue.h("table", {
 	      class: "el-table__body",
 	      cellspacing: "0",
 	      cellpadding: "0",
 	      border: "0"
 	    }, [
-	      hColgroup(this.store.states.columns.value),
+	      hColgroup(columns),
 	      vue.h("tbody", {}, [
 	        data.reduce((acc, row) => {
-	          return acc.concat(this.wrappedRowRender(row, acc.length));
+	          return acc.concat(wrappedRowRender(row, acc.length));
 	        }, [])
 	      ])
 	    ]);
@@ -39177,49 +39286,45 @@
 	function useStyle$1(props) {
 	  const instance = vue.getCurrentInstance();
 	  const table = instance.parent;
-	  const store = table.store;
-	  const {
-	    leftFixedLeafCount,
-	    rightFixedLeafCount,
-	    columnsCount,
-	    leftFixedCount,
-	    rightFixedCount,
-	    columns
-	  } = useMapState();
+	  const { columns } = useMapState();
 	  const hasGutter = vue.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 = vue.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
 	  };
 	}
@@ -39249,27 +39354,39 @@
 	    }
 	  },
 	  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) => {
@@ -39300,25 +39417,28 @@
 	      cellpadding: "0",
 	      border: "0"
 	    }, [
-	      hColgroup(this.columns, this.hasGutter),
+	      hColgroup(columns, hasGutter),
 	      vue.h("tbody", {
-	        class: [{ "has-gutter": this.hasGutter }]
+	        class: [{ "has-gutter": hasGutter }]
 	      }, [
 	        vue.h("tr", {}, [
-	          ...this.columns.map((column, cellIndex) => vue.h("td", {
+	          ...columns.map((column, cellIndex) => vue.h("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)
 	          }, [
 	            vue.h("div", {
 	              class: ["cell", column.labelClassName]
 	            }, [sums[cellIndex]])
 	          ])),
-	          this.hasGutter && hGutter()
+	          hasGutter && vue.h("td", {
+	            class: "el-table__fixed-right-patch el-table__cell",
+	            style: {
+	              width: `${gutterWidth}px`
+	            }
+	          })
 	        ])
 	      ])
 	    ]);
@@ -39413,6 +39533,17 @@
 	  const shouldUpdateHeight = vue.computed(() => {
 	    return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
 	  });
+	  const tableBodyStyles = vue.computed(() => {
+	    return {
+	      width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
+	    };
+	  });
+	  const borderBottomPatchStyles = vue.computed(() => {
+	    return {
+	      bottom: `${layout.gutterWidth}px`,
+	      right: `${layout.gutterWidth}px`
+	    };
+	  });
 	  const doLayout = () => {
 	    if (shouldUpdateHeight.value) {
 	      layout.updateElsHeight();
@@ -39449,27 +39580,18 @@
 	    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");
@@ -39478,7 +39600,7 @@
 	    } else {
 	      setScrollClass("is-scrolling-middle");
 	    }
-	  }, 10);
+	  };
 	  const bindEvents = () => {
 	    table.refs.bodyWrapper.addEventListener("scroll", syncPostion, {
 	      passive: true
@@ -39630,7 +39752,9 @@
 	    resizeProxyVisible,
 	    bodyWidth,
 	    resizeState,
-	    doLayout
+	    doLayout,
+	    tableBodyStyles,
+	    borderBottomPatchStyles
 	  };
 	}
 
@@ -39775,7 +39899,9 @@
 	      resizeProxyVisible,
 	      bodyWidth,
 	      resizeState,
-	      doLayout
+	      doLayout,
+	      tableBodyStyles,
+	      borderBottomPatchStyles
 	    } = useStyle(props, layout, store, table);
 	    const debouncedUpdateLayout = debounce$3(doLayout, 50);
 	    const tableId = `el-table_${tableIdSeed++}`;
@@ -39786,6 +39912,10 @@
 	      doLayout,
 	      debouncedUpdateLayout
 	    };
+	    const computedSumText = vue.computed(() => props.sumText || t("el.table.sumText"));
+	    const computedEmptyText = vue.computed(() => {
+	      return props.emptyText || t("el.table.emptyText");
+	    });
 	    return {
 	      layout,
 	      store,
@@ -39801,7 +39931,9 @@
 	      isGroup,
 	      bodyWidth,
 	      bodyHeight,
+	      tableBodyStyles,
 	      emptyBlockStyle,
+	      borderBottomPatchStyles,
 	      debouncedUpdateLayout,
 	      handleFixedMousewheel,
 	      fixedHeight,
@@ -39817,52 +39949,39 @@
 	      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"
 	};
@@ -39872,6 +39991,7 @@
 	  const _component_table_footer = vue.resolveComponent("table-footer");
 	  const _directive_mousewheel = vue.resolveDirective("mousewheel");
 	  return vue.openBlock(), vue.createElementBlock("div", {
+	    ref: "tableWrapper",
 	    class: vue.normalizeClass([
 	      {
 	        "el-table--fit": _ctx.fit,
@@ -39893,168 +40013,28 @@
 	    onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
 	  }, [
 	    vue.createElementVNode("div", _hoisted_1$d, [
-	      vue.renderSlot(_ctx.$slots, "default")
-	    ], 512),
-	    _ctx.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
-	      vue.createVNode(_component_table_header, {
-	        ref: "tableHeader",
-	        border: _ctx.border,
-	        "default-sort": _ctx.defaultSort,
-	        store: _ctx.store,
-	        style: vue.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]
-	    ]) : vue.createCommentVNode("v-if", true),
-	    vue.createElementVNode("div", {
-	      ref: "bodyWrapper",
-	      style: vue.normalizeStyle([_ctx.bodyHeight]),
-	      class: "el-table__body-wrapper"
-	    }, [
-	      vue.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: vue.normalizeStyle({
-	          width: _ctx.bodyWidth
-	        })
-	      }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-	      _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
-	        key: 0,
-	        ref: "emptyBlock",
-	        style: vue.normalizeStyle(_ctx.emptyBlockStyle),
-	        class: "el-table__empty-block"
-	      }, [
-	        vue.createElementVNode("span", _hoisted_3$8, [
-	          vue.renderSlot(_ctx.$slots, "empty", {}, () => [
-	            vue.createTextVNode(vue.toDisplayString(_ctx.emptyText || _ctx.t("el.table.emptyText")), 1)
-	          ])
-	        ])
-	      ], 4)) : vue.createCommentVNode("v-if", true),
-	      _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
-	        vue.renderSlot(_ctx.$slots, "append")
-	      ], 512)) : vue.createCommentVNode("v-if", true)
-	    ], 4),
-	    _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
-	      vue.createVNode(_component_table_footer, {
-	        border: _ctx.border,
-	        "default-sort": _ctx.defaultSort,
-	        store: _ctx.store,
-	        style: vue.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"])
-	    ])), [
-	      [vue.vShow, !_ctx.isEmpty],
-	      [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
-	    ]) : vue.createCommentVNode("v-if", true),
-	    _ctx.store.states.fixedColumns.value.length > 0 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-	      key: 2,
-	      ref: "fixedWrapper",
-	      style: vue.normalizeStyle([
-	        {
-	          width: _ctx.layout.fixedWidth.value ? _ctx.layout.fixedWidth.value + "px" : ""
-	        },
-	        _ctx.fixedHeight
-	      ]),
-	      class: "el-table__fixed"
-	    }, [
-	      _ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
-	        vue.createVNode(_component_table_header, {
-	          ref: "fixedTableHeader",
-	          border: _ctx.border,
-	          store: _ctx.store,
-	          style: vue.normalizeStyle({
-	            width: _ctx.bodyWidth
-	          }),
-	          fixed: "left",
-	          onSetDragVisible: _ctx.setDragVisible
-	        }, null, 8, ["border", "store", "style", "onSetDragVisible"])
-	      ], 512)) : vue.createCommentVNode("v-if", true),
-	      vue.createElementVNode("div", {
-	        ref: "fixedBodyWrapper",
-	        style: vue.normalizeStyle([
-	          {
-	            top: _ctx.layout.headerHeight.value + "px"
-	          },
-	          _ctx.fixedBodyHeight
-	        ]),
-	        class: "el-table__fixed-body-wrapper"
-	      }, [
-	        vue.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: vue.normalizeStyle({
-	            width: _ctx.bodyWidth
-	          }),
-	          fixed: "left"
-	        }, null, 8, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-	        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
-	          key: 0,
-	          style: vue.normalizeStyle({ height: _ctx.layout.appendHeight.value + "px" }),
-	          class: "el-table__append-gutter"
-	        }, null, 4)) : vue.createCommentVNode("v-if", true)
-	      ], 4),
-	      _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
-	        vue.createVNode(_component_table_footer, {
-	          border: _ctx.border,
-	          store: _ctx.store,
-	          style: vue.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)), [
-	        [vue.vShow, !_ctx.isEmpty]
-	      ]) : vue.createCommentVNode("v-if", true)
-	    ], 4)), [
-	      [_directive_mousewheel, _ctx.handleFixedMousewheel]
-	    ]) : vue.createCommentVNode("v-if", true),
-	    _ctx.store.states.rightFixedColumns.value.length > 0 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-	      key: 3,
-	      ref: "rightFixedWrapper",
-	      style: vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$2, [
+	      vue.createElementVNode("div", _hoisted_2$a, [
+	        vue.renderSlot(_ctx.$slots, "default")
+	      ], 512),
+	      _ctx.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
 	        vue.createVNode(_component_table_header, {
-	          ref: "rightFixedTableHeader",
+	          ref: "tableHeader",
 	          border: _ctx.border,
+	          "default-sort": _ctx.defaultSort,
 	          store: _ctx.store,
-	          style: vue.normalizeStyle({
-	            width: _ctx.bodyWidth
-	          }),
-	          fixed: "right",
+	          style: vue.normalizeStyle(_ctx.tableBodyStyles),
 	          onSetDragVisible: _ctx.setDragVisible
-	        }, null, 8, ["border", "store", "style", "onSetDragVisible"])
-	      ], 512)) : vue.createCommentVNode("v-if", true),
+	        }, null, 8, ["border", "default-sort", "store", "style", "onSetDragVisible"])
+	      ])), [
+	        [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
+	      ]) : vue.createCommentVNode("v-if", true),
 	      vue.createElementVNode("div", {
-	        ref: "rightFixedBodyWrapper",
-	        style: vue.normalizeStyle([{ top: _ctx.layout.headerHeight.value + "px" }, _ctx.fixedBodyHeight]),
-	        class: "el-table__fixed-body-wrapper"
+	        ref: "bodyWrapper",
+	        style: vue.normalizeStyle(_ctx.bodyHeight),
+	        class: "el-table__body-wrapper"
 	      }, [
 	        vue.createVNode(_component_table_body, {
+	          context: _ctx.context,
 	          highlight: _ctx.highlightCurrentRow,
 	          "row-class-name": _ctx.rowClassName,
 	          "tooltip-effect": _ctx.tooltipEffect,
@@ -40063,42 +40043,45 @@
 	          stripe: _ctx.stripe,
 	          style: vue.normalizeStyle({
 	            width: _ctx.bodyWidth
-	          }),
-	          fixed: "right"
-	        }, null, 8, ["highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
-	        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
+	          })
+	        }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe", "style"]),
+	        _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
 	          key: 0,
-	          style: vue.normalizeStyle({ height: _ctx.layout.appendHeight.value + "px" }),
-	          class: "el-table__append-gutter"
-	        }, null, 4)) : vue.createCommentVNode("v-if", true)
+	          ref: "emptyBlock",
+	          style: vue.normalizeStyle(_ctx.emptyBlockStyle),
+	          class: "el-table__empty-block"
+	        }, [
+	          vue.createElementVNode("span", _hoisted_4$5, [
+	            vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+	              vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
+	            ])
+	          ])
+	        ], 4)) : vue.createCommentVNode("v-if", true),
+	        _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+	          vue.renderSlot(_ctx.$slots, "append")
+	        ], 512)) : vue.createCommentVNode("v-if", true)
 	      ], 4),
-	      _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_9$1, [
-	        vue.createVNode(_component_table_footer, {
-	          border: _ctx.border,
-	          store: _ctx.store,
-	          style: vue.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)), [
-	        [vue.vShow, !_ctx.isEmpty]
-	      ]) : vue.createCommentVNode("v-if", true)
-	    ], 4)), [
-	      [_directive_mousewheel, _ctx.handleFixedMousewheel]
+	      _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3)) : vue.createCommentVNode("v-if", true),
+	      _ctx.layout.scrollX.value && _ctx.layout.height.value ? (vue.openBlock(), vue.createElementBlock("div", {
+	        key: 2,
+	        class: "el-table__border-bottom-patch",
+	        style: vue.normalizeStyle(_ctx.borderBottomPatchStyles)
+	      }, null, 4)) : vue.createCommentVNode("v-if", true)
+	    ]),
+	    _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+	      vue.createVNode(_component_table_footer, {
+	        border: _ctx.border,
+	        "default-sort": _ctx.defaultSort,
+	        store: _ctx.store,
+	        style: vue.normalizeStyle(_ctx.tableBodyStyles),
+	        "sum-text": _ctx.computedSumText,
+	        "summary-method": _ctx.summaryMethod
+	      }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
+	    ])), [
+	      [vue.vShow, !_ctx.isEmpty],
+	      [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
 	    ]) : vue.createCommentVNode("v-if", true),
-	    _ctx.store.states.rightFixedColumns.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-	      key: 4,
-	      ref: "rightFixedPatch",
-	      style: vue.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)) : vue.createCommentVNode("v-if", true),
-	    vue.withDirectives(vue.createElementVNode("div", _hoisted_10$1, null, 512), [
+	    vue.withDirectives(vue.createElementVNode("div", _hoisted_8$2, null, 512), [
 	      [vue.vShow, _ctx.resizeProxyVisible]
 	    ])
 	  ], 38);
@@ -40577,6 +40560,7 @@
 	        filteredValue: [],
 	        filterPlacement: "",
 	        isColumnGroup: false,
+	        isSubColumn: false,
 	        filterOpened: false,
 	        sortable,
 	        index: props.index,