@element-plus/nightly 0.0.20220103 → 0.0.20220107

package/lib/components/table/src/table.vue_vue_type_template_id_4a1660ad_lang.js

@@ -4,47 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 
-const _hoisted_1 = {
+const _hoisted_1 = { class: "el-table__inner-wrapper" };
+const _hoisted_2 = {
   ref: "hiddenColumns",
   class: "hidden-columns"
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
   key: 0,
   ref: "headerWrapper",
   class: "el-table__header-wrapper"
 };
-const _hoisted_3 = { class: "el-table__empty-text" };
-const _hoisted_4 = {
+const _hoisted_4 = { class: "el-table__empty-text" };
+const _hoisted_5 = {
   key: 1,
   ref: "appendWrapper",
   class: "el-table__append-wrapper"
 };
-const _hoisted_5 = {
-  key: 1,
-  ref: "footerWrapper",
-  class: "el-table__footer-wrapper"
-};
 const _hoisted_6 = {
-  key: 0,
-  ref: "fixedHeaderWrapper",
-  class: "el-table__fixed-header-wrapper"
-};
-const _hoisted_7 = {
   key: 1,
-  ref: "fixedFooterWrapper",
-  class: "el-table__fixed-footer-wrapper"
+  class: "el-table__border-left-patch"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 0,
-  ref: "rightFixedHeaderWrapper",
-  class: "el-table__fixed-header-wrapper"
-};
-const _hoisted_9 = {
-  key: 1,
-  ref: "rightFixedFooterWrapper",
-  class: "el-table__fixed-footer-wrapper"
+  ref: "footerWrapper",
+  class: "el-table__footer-wrapper"
 };
-const _hoisted_10 = {
+const _hoisted_8 = {
   ref: "resizeProxy",
   class: "el-table__column-resize-proxy"
 };
@@ -54,6 +39,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   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,
@@ -75,168 +61,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
   }, [
     vue.createElementVNode("div", _hoisted_1, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ], 512),
-    _ctx.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-      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, [
-          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, [
-        vue.renderSlot(_ctx.$slots, "append")
-      ], 512)) : vue.createCommentVNode("v-if", true)
-    ], 4),
-    _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-      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, [
-        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, [
-        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, [
+      vue.createElementVNode("div", _hoisted_2, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 512),
+      _ctx.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
         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,
@@ -245,42 +91,45 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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, [
+            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, [
+          vue.renderSlot(_ctx.$slots, "append")
+        ], 512)) : vue.createCommentVNode("v-if", true)
       ], 4),
-      _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
-        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)) : 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, [
+      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, null, 512), [
+    vue.withDirectives(vue.createElementVNode("div", _hoisted_8, null, 512), [
       [vue.vShow, _ctx.resizeProxyVisible]
     ])
   ], 38);

package/lib/components/table/src/table.vue_vue_type_template_id_4a1660ad_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.vue_vue_type_template_id_4a1660ad_lang.js","sources":["../../../../../../packages/components/table/src/table.vue?vue&type=template&id=4a1660ad&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'el-table--fit': fit,\n        'el-table--striped': stripe,\n        'el-table--border': border || isGroup,\n        'el-table--hidden': isHidden,\n        'el-table--group': isGroup,\n        'el-table--fluid-height': maxHeight,\n        'el-table--scrollable-x': layout.scrollX.value,\n        'el-table--scrollable-y': layout.scrollY.value,\n        'el-table--enable-row-hover': !store.states.isComplex.value,\n        'el-table--enable-row-transition':\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n      },\n      tableSize ? `el-table--${tableSize}` : '',\n      className,\n      'el-table',\n    ]\"\n    :style=\"style\"\n    @mouseleave=\"handleMouseLeave()\"\n  >\n    <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n      <slot></slot>\n    </div>\n    <div\n      v-if=\"showHeader\"\n      ref=\"headerWrapper\"\n      v-mousewheel=\"handleHeaderFooterMousewheel\"\n      class=\"el-table__header-wrapper\"\n    >\n      <table-header\n        ref=\"tableHeader\"\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :store=\"store\"\n        :style=\"{\n          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',\n        }\"\n        @set-drag-visible=\"setDragVisible\"\n      />\n    </div>\n    <div ref=\"bodyWrapper\" :style=\"[bodyHeight]\" class=\"el-table__body-wrapper\">\n      <table-body\n        :context=\"context\"\n        :highlight=\"highlightCurrentRow\"\n        :row-class-name=\"rowClassName\"\n        :tooltip-effect=\"tooltipEffect\"\n        :row-style=\"rowStyle\"\n        :store=\"store\"\n        :stripe=\"stripe\"\n        :style=\"{\n          width: bodyWidth,\n        }\"\n      />\n      <div\n        v-if=\"isEmpty\"\n        ref=\"emptyBlock\"\n        :style=\"emptyBlockStyle\"\n        class=\"el-table__empty-block\"\n      >\n        <span class=\"el-table__empty-text\">\n          <slot name=\"empty\">{{ emptyText || t('el.table.emptyText') }}</slot>\n        </span>\n      </div>\n      <div\n        v-if=\"$slots.append\"\n        ref=\"appendWrapper\"\n        class=\"el-table__append-wrapper\"\n      >\n        <slot name=\"append\"></slot>\n      </div>\n    </div>\n    <div\n      v-if=\"showSummary\"\n      v-show=\"!isEmpty\"\n      ref=\"footerWrapper\"\n      v-mousewheel=\"handleHeaderFooterMousewheel\"\n      class=\"el-table__footer-wrapper\"\n    >\n      <table-footer\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :store=\"store\"\n        :style=\"{\n          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',\n        }\"\n        :sum-text=\"sumText || t('el.table.sumText')\"\n        :summary-method=\"summaryMethod\"\n      />\n    </div>\n    <div\n      v-if=\"store.states.fixedColumns.value.length > 0\"\n      ref=\"fixedWrapper\"\n      v-mousewheel=\"handleFixedMousewheel\"\n      :style=\"[\n        {\n          width: layout.fixedWidth.value ? layout.fixedWidth.value + 'px' : '',\n        },\n        fixedHeight,\n      ]\"\n      class=\"el-table__fixed\"\n    >\n      <div\n        v-if=\"showHeader\"\n        ref=\"fixedHeaderWrapper\"\n        class=\"el-table__fixed-header-wrapper\"\n      >\n        <table-header\n          ref=\"fixedTableHeader\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"left\"\n          @set-drag-visible=\"setDragVisible\"\n        />\n      </div>\n      <div\n        ref=\"fixedBodyWrapper\"\n        :style=\"[\n          {\n            top: layout.headerHeight.value + 'px',\n          },\n          fixedBodyHeight,\n        ]\"\n        class=\"el-table__fixed-body-wrapper\"\n      >\n        <table-body\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :tooltip-effect=\"tooltipEffect\"\n          :row-style=\"rowStyle\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"left\"\n        />\n        <div\n          v-if=\"$slots.append\"\n          :style=\"{ height: layout.appendHeight.value + 'px' }\"\n          class=\"el-table__append-gutter\"\n        ></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"!isEmpty\"\n        ref=\"fixedFooterWrapper\"\n        class=\"el-table__fixed-footer-wrapper\"\n      >\n        <table-footer\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          fixed=\"left\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"store.states.rightFixedColumns.value.length > 0\"\n      ref=\"rightFixedWrapper\"\n      v-mousewheel=\"handleFixedMousewheel\"\n      :style=\"[\n        {\n          width: layout.rightFixedWidth.value\n            ? layout.rightFixedWidth.value + 'px'\n            : '',\n          right: layout.scrollY.value\n            ? (border ? layout.gutterWidth : layout.gutterWidth || 0) + 'px'\n            : '',\n        },\n        fixedHeight,\n      ]\"\n      class=\"el-table__fixed-right\"\n    >\n      <div\n        v-if=\"showHeader\"\n        ref=\"rightFixedHeaderWrapper\"\n        class=\"el-table__fixed-header-wrapper\"\n      >\n        <table-header\n          ref=\"rightFixedTableHeader\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"right\"\n          @set-drag-visible=\"setDragVisible\"\n        />\n      </div>\n      <div\n        ref=\"rightFixedBodyWrapper\"\n        :style=\"[{ top: layout.headerHeight.value + 'px' }, fixedBodyHeight]\"\n        class=\"el-table__fixed-body-wrapper\"\n      >\n        <table-body\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :tooltip-effect=\"tooltipEffect\"\n          :row-style=\"rowStyle\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          fixed=\"right\"\n        />\n        <div\n          v-if=\"$slots.append\"\n          :style=\"{ height: layout.appendHeight.value + 'px' }\"\n          class=\"el-table__append-gutter\"\n        ></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"!isEmpty\"\n        ref=\"rightFixedFooterWrapper\"\n        class=\"el-table__fixed-footer-wrapper\"\n      >\n        <table-footer\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          fixed=\"right\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"store.states.rightFixedColumns.value.length > 0\"\n      ref=\"rightFixedPatch\"\n      :style=\"{\n        width: layout.scrollY.value ? layout.gutterWidth + 'px' : '0',\n        height: layout.headerHeight.value + 'px',\n      }\"\n      class=\"el-table__fixed-right-patch\"\n    ></div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      class=\"el-table__column-resize-proxy\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, computed } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport { createStore } from './store/helper'\nimport TableLayout from './table-layout'\nimport TableHeader from './table-header'\nimport TableBody from './table-body'\nimport TableFooter from './table-footer'\nimport useUtils from './table/utils-helper'\nimport useStyle from './table/style-helper'\nimport defaultProps from './table/defaults'\n\nimport type { Table } from './table/defaults'\n\nlet tableIdSeed = 1\nexport default defineComponent({\n  name: 'ElTable',\n  directives: {\n    Mousewheel,\n  },\n  components: {\n    TableHeader,\n    TableBody,\n    TableFooter,\n  },\n  props: defaultProps,\n  emits: [\n    'select',\n    'select-all',\n    'selection-change',\n    'cell-mouse-enter',\n    'cell-mouse-leave',\n    'cell-contextmenu',\n    'cell-click',\n    'cell-dblclick',\n    'row-click',\n    'row-contextmenu',\n    'row-dblclick',\n    'header-click',\n    'header-contextmenu',\n    'sort-change',\n    'filter-change',\n    'current-change',\n    'header-dragend',\n    'expand-change',\n  ],\n  setup(props) {\n    type Row = typeof props.data[number]\n    const { t } = useLocale()\n    const table = getCurrentInstance() as Table<Row>\n    const store = createStore<Row>(table, props)\n    table.store = store\n    const layout = new TableLayout<Row>({\n      store: table.store,\n      table,\n      fit: props.fit,\n      showHeader: props.showHeader,\n    })\n    table.layout = layout\n\n    const isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n    /**\n     * open functions\n     */\n    const {\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      sort,\n    } = useUtils<Row>(store)\n    const {\n      isHidden,\n      renderExpanded,\n      setDragVisible,\n      isGroup,\n      handleMouseLeave,\n      handleHeaderFooterMousewheel,\n      tableSize,\n      bodyHeight,\n      emptyBlockStyle,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      resizeProxyVisible,\n      bodyWidth,\n      resizeState,\n      doLayout,\n    } = useStyle<Row>(props, layout, store, table)\n\n    const debouncedUpdateLayout = debounce(doLayout, 50)\n\n    const tableId = `el-table_${tableIdSeed++}`\n    table.tableId = tableId\n    table.state = {\n      isGroup,\n      resizeState,\n      doLayout,\n      debouncedUpdateLayout,\n    }\n    return {\n      layout,\n      store,\n      handleHeaderFooterMousewheel,\n      handleMouseLeave,\n      tableId,\n      tableSize,\n      isHidden,\n      isEmpty,\n      renderExpanded,\n      resizeProxyVisible,\n      resizeState,\n      isGroup,\n      bodyWidth,\n      bodyHeight,\n      emptyBlockStyle,\n      debouncedUpdateLayout,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      doLayout,\n      sort,\n      t,\n      setDragVisible,\n      context: table,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle","_withDirectives"],"mappings":";;;;;;;;EAwBS,KAAI;EAAgB;;;;EAKvB,KAAI;EAEJ;;;;;EAsCE,KAAI;EACJ;;;;EAQF,KAAI;EAEJ;;;;EA2BE,KAAI;EACJ;;;;EA4CA,KAAI;EACJ;;;;EAiCA,KAAI;EACJ;;;;EAuCA,KAAI;EACJ;;;EAyBF,KAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAvOD;;;;;oBAMiB;;UAKhB;;+BAEiB;;;;;;;;;;;;;;8BASa;;;;QAE3B,OAAOA;iBACE;;;qCAGU;QACnB,KAAK;QACL;QACA,KAAK;;;;;;;;sCAOE;iBACH;;YAEL;;wDACwB,2BAAc;;;;;;oDAGxC;;;;;KASM;;;;;YASH;;;;sBAIQ,kBAAa;;;;;;;;eAKb;;;UACX,KAAI;;;;;;;;;;;;;;;;;;yBAsBM;;;;;UAIV;eACK,EAACA;YACH,KAAK;;;;;;iBAMDA;;;;;;;qBAOK;oCACO;mBACT;;;;;+BAMa;;;;;;;;WAMf;;;;;;;;;oCAYa;;;;sCAXH;;;;;;;+CAiByB;;;;;;;;;;;;;;;UAc3C,KAAK,EAACA;;WAGE;;;;;sCAOS;;;;yBAIPC;;;;;;YAKR;2CACgB;;;;;iCAKC;iCACA;;;;cAId;;;;;;;;sDAOiB;;;;;;;;;"}
+{"version":3,"file":"table.vue_vue_type_template_id_4a1660ad_lang.js","sources":["../../../../../../packages/components/table/src/table.vue?vue&type=template&id=4a1660ad&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"[\n      {\n        'el-table--fit': fit,\n        'el-table--striped': stripe,\n        'el-table--border': border || isGroup,\n        'el-table--hidden': isHidden,\n        'el-table--group': isGroup,\n        'el-table--fluid-height': maxHeight,\n        'el-table--scrollable-x': layout.scrollX.value,\n        'el-table--scrollable-y': layout.scrollY.value,\n        'el-table--enable-row-hover': !store.states.isComplex.value,\n        'el-table--enable-row-transition':\n          (store.states.data.value || []).length !== 0 &&\n          (store.states.data.value || []).length < 100,\n      },\n      tableSize ? `el-table--${tableSize}` : '',\n      className,\n      'el-table',\n    ]\"\n    :style=\"style\"\n    @mouseleave=\"handleMouseLeave()\"\n  >\n    <div class=\"el-table__inner-wrapper\">\n      <div ref=\"hiddenColumns\" class=\"hidden-columns\">\n        <slot></slot>\n      </div>\n      <div\n        v-if=\"showHeader\"\n        ref=\"headerWrapper\"\n        v-mousewheel=\"handleHeaderFooterMousewheel\"\n        class=\"el-table__header-wrapper\"\n      >\n        <table-header\n          ref=\"tableHeader\"\n          :border=\"border\"\n          :default-sort=\"defaultSort\"\n          :store=\"store\"\n          :style=\"tableBodyStyles\"\n          @set-drag-visible=\"setDragVisible\"\n        />\n      </div>\n      <div ref=\"bodyWrapper\" :style=\"bodyHeight\" class=\"el-table__body-wrapper\">\n        <table-body\n          :context=\"context\"\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :tooltip-effect=\"tooltipEffect\"\n          :row-style=\"rowStyle\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :style=\"{\n            width: bodyWidth,\n          }\"\n        />\n        <div\n          v-if=\"isEmpty\"\n          ref=\"emptyBlock\"\n          :style=\"emptyBlockStyle\"\n          class=\"el-table__empty-block\"\n        >\n          <span class=\"el-table__empty-text\">\n            <slot name=\"empty\">{{ computedEmptyText }}</slot>\n          </span>\n        </div>\n        <div\n          v-if=\"$slots.append\"\n          ref=\"appendWrapper\"\n          class=\"el-table__append-wrapper\"\n        >\n          <slot name=\"append\"></slot>\n        </div>\n      </div>\n      <div v-if=\"border || isGroup\" class=\"el-table__border-left-patch\"></div>\n      <div\n        v-if=\"layout.scrollX.value && layout.height.value\"\n        class=\"el-table__border-bottom-patch\"\n        :style=\"borderBottomPatchStyles\"\n      ></div>\n    </div>\n    <div\n      v-if=\"showSummary\"\n      v-show=\"!isEmpty\"\n      ref=\"footerWrapper\"\n      v-mousewheel=\"handleHeaderFooterMousewheel\"\n      class=\"el-table__footer-wrapper\"\n    >\n      <table-footer\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :store=\"store\"\n        :style=\"tableBodyStyles\"\n        :sum-text=\"computedSumText\"\n        :summary-method=\"summaryMethod\"\n      />\n    </div>\n    <div\n      v-show=\"resizeProxyVisible\"\n      ref=\"resizeProxy\"\n      class=\"el-table__column-resize-proxy\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, computed } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport { createStore } from './store/helper'\nimport TableLayout from './table-layout'\nimport TableHeader from './table-header'\nimport TableBody from './table-body'\nimport TableFooter from './table-footer'\nimport useUtils from './table/utils-helper'\nimport useStyle from './table/style-helper'\nimport defaultProps from './table/defaults'\n\nimport type { Table } from './table/defaults'\n\nlet tableIdSeed = 1\nexport default defineComponent({\n  name: 'ElTable',\n  directives: {\n    Mousewheel,\n  },\n  components: {\n    TableHeader,\n    TableBody,\n    TableFooter,\n  },\n  props: defaultProps,\n  emits: [\n    'select',\n    'select-all',\n    'selection-change',\n    'cell-mouse-enter',\n    'cell-mouse-leave',\n    'cell-contextmenu',\n    'cell-click',\n    'cell-dblclick',\n    'row-click',\n    'row-contextmenu',\n    'row-dblclick',\n    'header-click',\n    'header-contextmenu',\n    'sort-change',\n    'filter-change',\n    'current-change',\n    'header-dragend',\n    'expand-change',\n  ],\n  setup(props) {\n    type Row = typeof props.data[number]\n    const { t } = useLocale()\n    const table = getCurrentInstance() as Table<Row>\n    const store = createStore<Row>(table, props)\n    table.store = store\n    const layout = new TableLayout<Row>({\n      store: table.store,\n      table,\n      fit: props.fit,\n      showHeader: props.showHeader,\n    })\n    table.layout = layout\n\n    const isEmpty = computed(() => (store.states.data.value || []).length === 0)\n\n    /**\n     * open functions\n     */\n    const {\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      sort,\n    } = useUtils<Row>(store)\n    const {\n      isHidden,\n      renderExpanded,\n      setDragVisible,\n      isGroup,\n      handleMouseLeave,\n      handleHeaderFooterMousewheel,\n      tableSize,\n      bodyHeight,\n      emptyBlockStyle,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      resizeProxyVisible,\n      bodyWidth,\n      resizeState,\n      doLayout,\n      tableBodyStyles,\n      borderBottomPatchStyles,\n    } = useStyle<Row>(props, layout, store, table)\n\n    const debouncedUpdateLayout = debounce(doLayout, 50)\n\n    const tableId = `el-table_${tableIdSeed++}`\n    table.tableId = tableId\n    table.state = {\n      isGroup,\n      resizeState,\n      doLayout,\n      debouncedUpdateLayout,\n    }\n    const computedSumText = computed(\n      () => props.sumText || t('el.table.sumText')\n    )\n\n    const computedEmptyText = computed(() => {\n      return props.emptyText || t('el.table.emptyText')\n    })\n\n    return {\n      layout,\n      store,\n      handleHeaderFooterMousewheel,\n      handleMouseLeave,\n      tableId,\n      tableSize,\n      isHidden,\n      isEmpty,\n      renderExpanded,\n      resizeProxyVisible,\n      resizeState,\n      isGroup,\n      bodyWidth,\n      bodyHeight,\n      tableBodyStyles,\n      emptyBlockStyle,\n      borderBottomPatchStyles,\n      debouncedUpdateLayout,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      setCurrentRow,\n      toggleRowSelection,\n      clearSelection,\n      clearFilter,\n      toggleAllSelection,\n      toggleRowExpansion,\n      clearSort,\n      doLayout,\n      sort,\n      t,\n      setDragVisible,\n      context: table,\n      computedSumText,\n      computedEmptyText,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;;;;EA0BW,KAAI;EAAgB;;;;EAKvB,KAAI;EAEJ;;;;;EAoCE,KAAI;EACJ;;;;EAK0B;;;;EAU9B,KAAI;EAEJ;;;EAaA,KAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAvEkB;;;iBAMX;;8BAEY;kCACF;;;;;;;;;;8CAKwB;;;;UAEpC,OAAOA;mBACE;;;uCAGU;UACnB,KAAK;UACL;UACA,KAAK;;;;;;;;wCAOE;mBACH;;cAEL;;;;;;;SAKM,YAAOC;;;;;;;uDAOjB;;0BAEsB;;;;mCAEZ,4BAAuB;;;;KAI3B;;;;;;"}

package/lib/components/table/src/util.d.ts

@@ -1,4 +1,4 @@
-import type { PopperInstance, IPopperOptions } from 'element-plus/es/components/popper';
+import type { IPopperOptions } from 'element-plus/es/components/popper';
 import type { TableColumnCtx } from './table-column/defaults';
 export declare const getCell: (event: Event) => HTMLElement;
 export declare const orderBy: <T>(array: T[], sortKey: string, reverse: string | number, sortMethod: any, sortBy: string | (string | ((a: T, b: T, array?: T[] | undefined) => number))[]) => T[];
@@ -17,11 +17,25 @@ export declare const getKeysMap: <T>(array: T[], rowKey: string) => Record<strin
     index: number;
 }>;
 export declare function mergeOptions<T, K>(defaults: T, config: K): T & K;
-export declare function parseWidth(width: number | string): number;
-export declare function parseMinWidth(minWidth: any): number;
+export declare function parseWidth(width: number | string): number | string;
+export declare function parseMinWidth(minWidth: number | string): number | string;
 export declare function parseHeight(height: number | string): string | number | null;
 export declare function compose(...funcs: any[]): any;
 export declare function toggleRowStatus<T>(statusArr: T[], row: T, newVal: boolean): boolean;
 export declare function walkTreeNode(root: any, cb: any, childrenKey?: string, lazyKey?: string): void;
 export declare let removePopper: any;
-export declare function createTablePopper(trigger: HTMLElement, popperContent: string, popperOptions: Partial<IPopperOptions>, tooltipEffect: string): PopperInstance;
+export declare function createTablePopper(trigger: HTMLElement, popperContent: string, popperOptions: Partial<IPopperOptions>, tooltipEffect: string): any;
+export declare const isFixedColumn: <T>(index: number, fixed: string | boolean, store: any, realColumns?: TableColumnCtx<T>[] | undefined) => {
+    direction: any;
+    start: number;
+    after: number;
+} | {
+    direction?: undefined;
+    start?: undefined;
+    after?: undefined;
+};
+export declare const getFixedColumnsClass: <T>(index: number, fixed: string | boolean, store: any, realColumns?: TableColumnCtx<T>[] | undefined) => string[];
+export declare const getFixedColumnOffset: <T>(index: number, fixed: string | boolean, store: any, realColumns?: TableColumnCtx<T>[] | undefined) => any;
+export declare function getCellStyle<T>(column: TableColumnCtx<T>, cellIndex: number, hasGutter: boolean, gutterWidth: number, store: any): any;
+export declare const ensureRightFixedStyle: (style: any, hasGutter: boolean) => void;
+export declare const ensurePosition: (style: any, key: string) => void;

package/lib/components/table/src/util.js

@@ -6,6 +6,7 @@ var shared = require('@vue/shared');
 var core = require('@popperjs/core');
 var popupManager = require('../../../utils/popup-manager.js');
 var util = require('../../../utils/util.js');
+var scrollbarWidth = require('../../../utils/scrollbar-width.js');
 var dom = require('../../../utils/dom.js');
 
 const getCell = function(event) {
@@ -145,18 +146,22 @@ function mergeOptions(defaults, config) {
   return options;
 }
 function parseWidth(width) {
+  if (width === "")
+    return width;
   if (width !== void 0) {
     width = parseInt(width, 10);
-    if (isNaN(width)) {
-      width = null;
+    if (Number.isNaN(width)) {
+      width = "";
     }
   }
-  return +width;
+  return width;
 }
 function parseMinWidth(minWidth) {
-  if (typeof minWidth !== "undefined") {
+  if (minWidth === "")
+    return minWidth;
+  if (minWidth !== void 0) {
     minWidth = parseWidth(minWidth);
-    if (isNaN(minWidth)) {
+    if (Number.isNaN(minWidth)) {
       minWidth = 80;
     }
   }
@@ -291,15 +296,109 @@ function createTablePopper(trigger, popperContent, popperOptions, tooltipEffect)
   dom.on(trigger, "mouseleave", exports.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;
+};
+function getCellStyle(column, cellIndex, hasGutter, gutterWidth, store) {
+  const fixedStyle = getFixedColumnOffset(cellIndex, column.fixed, store);
+  ensureRightFixedStyle(fixedStyle, hasGutter);
+  ensurePosition(fixedStyle, "left");
+  ensurePosition(fixedStyle, "right");
+  return fixedStyle;
+}
+const ensureRightFixedStyle = (style, hasGutter) => {
+  if (hasGutter && style && !Number.isNaN(style.right)) {
+    style.right += scrollbarWidth["default"]();
+  }
+};
+const ensurePosition = (style, key) => {
+  if (!style)
+    return;
+  if (!Number.isNaN(style[key])) {
+    style[key] = `${style[key]}px`;
+  }
+};
 
 exports.compose = compose;
 exports.createTablePopper = createTablePopper;
+exports.ensurePosition = ensurePosition;
+exports.ensureRightFixedStyle = ensureRightFixedStyle;
 exports.getCell = getCell;
+exports.getCellStyle = getCellStyle;
 exports.getColumnByCell = getColumnByCell;
 exports.getColumnById = getColumnById;
 exports.getColumnByKey = getColumnByKey;
+exports.getFixedColumnOffset = getFixedColumnOffset;
+exports.getFixedColumnsClass = getFixedColumnsClass;
 exports.getKeysMap = getKeysMap;
 exports.getRowIdentity = getRowIdentity;
+exports.isFixedColumn = isFixedColumn;
 exports.mergeOptions = mergeOptions;
 exports.orderBy = orderBy;
 exports.parseHeight = parseHeight;