@element-plus/nightly 0.0.20220117 → 0.0.20220121

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

@@ -122,6 +122,7 @@ declare const _default: import("vue").DefineComponent<{
         height?: undefined;
         'max-height'?: undefined;
     }>;
+    height: import("vue").ComputedRef<number | undefined>;
     tableBodyStyles: import("vue").ComputedRef<{
         width: string;
     }>;
@@ -129,10 +130,6 @@ declare const _default: import("vue").DefineComponent<{
         width: string;
         height: string;
     } | null>;
-    borderBottomPatchStyles: import("vue").ComputedRef<{
-        bottom: string;
-        right: string;
-    }>;
     debouncedUpdateLayout: import("lodash").DebouncedFunc<() => void>;
     handleFixedMousewheel: (event: any, data: any) => void;
     fixedHeight: import("vue").ComputedRef<{
@@ -169,103 +166,65 @@ declare const _default: import("vue").DefineComponent<{
     context: Table<any>;
     computedSumText: import("vue").ComputedRef<string>;
     computedEmptyText: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "select-all" | "expand-change" | "current-change" | "selection-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick" | "header-click" | "header-contextmenu" | "sort-change" | "filter-change" | "header-dragend")[], "select" | "select-all" | "expand-change" | "current-change" | "selection-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick" | "header-click" | "header-contextmenu" | "sort-change" | "filter-change" | "header-dragend", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    data?: unknown;
-    size?: unknown;
-    width?: unknown;
-    height?: unknown;
-    maxHeight?: unknown;
-    fit?: unknown;
-    stripe?: unknown;
-    border?: unknown;
-    rowKey?: unknown;
-    showHeader?: unknown;
-    showSummary?: unknown;
-    sumText?: unknown;
-    summaryMethod?: unknown;
-    rowClassName?: unknown;
-    rowStyle?: unknown;
-    cellClassName?: unknown;
-    cellStyle?: unknown;
-    headerRowClassName?: unknown;
-    headerRowStyle?: unknown;
-    headerCellClassName?: unknown;
-    headerCellStyle?: unknown;
-    highlightCurrentRow?: unknown;
-    currentRowKey?: unknown;
-    emptyText?: unknown;
-    expandRowKeys?: unknown;
-    defaultExpandAll?: unknown;
-    defaultSort?: unknown;
-    tooltipEffect?: unknown;
-    spanMethod?: unknown;
-    selectOnIndeterminate?: unknown;
-    indent?: unknown;
-    treeProps?: unknown;
-    lazy?: unknown;
-    load?: unknown;
-    style?: unknown;
-    className?: unknown;
-} & {
-    lazy: boolean;
-    data: any[];
-    style: import("vue").CSSProperties;
-    border: boolean;
-    className: string;
-    fit: boolean;
-    stripe: boolean;
-    treeProps: {
-        hasChildren?: string | undefined;
-        children?: string | undefined;
-    } | undefined;
-    showHeader: boolean;
-    showSummary: boolean;
-    highlightCurrentRow: boolean;
-    defaultExpandAll: boolean;
-    selectOnIndeterminate: boolean;
-    indent: number;
-} & {
-    size?: string | undefined;
-    load?: ((row: any, treeNode: import("./table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined;
-    height?: string | number | undefined;
-    width?: string | number | undefined;
-    maxHeight?: string | number | undefined;
-    emptyText?: string | undefined;
-    sumText?: string | undefined;
-    cellClassName?: (string | ((data: {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "select-all" | "expand-change" | "current-change" | "selection-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick" | "header-click" | "header-contextmenu" | "sort-change" | "filter-change" | "header-dragend")[], "select" | "select-all" | "expand-change" | "current-change" | "selection-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick" | "header-click" | "header-contextmenu" | "sort-change" | "filter-change" | "header-dragend", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: import("vue").PropType<any[]>;
+        default: () => never[];
+    };
+    size: StringConstructor;
+    width: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stripe: BooleanConstructor;
+    border: BooleanConstructor;
+    rowKey: import("vue").PropType<string | ((row: any) => string) | undefined>;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: import("vue").PropType<import("./table/defaults").SummaryMethod<any> | undefined>;
+    rowClassName: import("vue").PropType<import("./table/defaults").ColumnCls<any> | undefined>;
+    rowStyle: import("vue").PropType<import("./table/defaults").ColumnStyle<any> | undefined>;
+    cellClassName: import("vue").PropType<(string | ((data: {
         row: any;
         rowIndex: number;
         column: import("./table-column/defaults").TableColumnCtx<any>;
         columnIndex: number;
-    }) => string)) | undefined;
-    defaultSort?: import("./table/defaults").Sort | undefined;
-    rowClassName?: import("./table/defaults").ColumnCls<any> | undefined;
-    rowStyle?: import("./table/defaults").ColumnStyle<any> | undefined;
-    tooltipEffect?: string | undefined;
-    summaryMethod?: import("./table/defaults").SummaryMethod<any> | undefined;
-    rowKey?: string | ((row: any) => string) | undefined;
-    cellStyle?: (import("vue").CSSProperties | ((data: {
+    }) => string)) | undefined>;
+    cellStyle: import("vue").PropType<(import("vue").CSSProperties | ((data: {
         row: any;
         rowIndex: number;
         column: import("./table-column/defaults").TableColumnCtx<any>;
         columnIndex: number;
-    }) => import("vue").CSSProperties)) | undefined;
-    headerRowClassName?: import("./table/defaults").ColumnCls<any> | undefined;
-    headerRowStyle?: import("./table/defaults").ColumnStyle<any> | undefined;
-    headerCellClassName?: (string | ((data: {
+    }) => import("vue").CSSProperties)) | undefined>;
+    headerRowClassName: import("vue").PropType<import("./table/defaults").ColumnCls<any> | undefined>;
+    headerRowStyle: import("vue").PropType<import("./table/defaults").ColumnStyle<any> | undefined>;
+    headerCellClassName: import("vue").PropType<(string | ((data: {
         row: any;
         rowIndex: number;
         column: import("./table-column/defaults").TableColumnCtx<any>;
         columnIndex: number;
-    }) => string)) | undefined;
-    headerCellStyle?: (import("vue").CSSProperties | ((data: {
+    }) => string)) | undefined>;
+    headerCellStyle: import("vue").PropType<(import("vue").CSSProperties | ((data: {
         row: any;
         rowIndex: number;
         column: import("./table-column/defaults").TableColumnCtx<any>;
         columnIndex: number;
-    }) => import("vue").CSSProperties)) | undefined;
-    expandRowKeys?: any[] | undefined;
-    spanMethod?: ((data: {
+    }) => import("vue").CSSProperties)) | undefined>;
+    highlightCurrentRow: BooleanConstructor;
+    currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
+    expandRowKeys: import("vue").PropType<any[] | undefined>;
+    defaultExpandAll: BooleanConstructor;
+    defaultSort: import("vue").PropType<import("./table/defaults").Sort | undefined>;
+    tooltipEffect: StringConstructor;
+    spanMethod: import("vue").PropType<((data: {
         row: any;
         rowIndex: number;
         column: import("./table-column/defaults").TableColumnCtx<any>;
@@ -273,9 +232,36 @@ declare const _default: import("vue").DefineComponent<{
     }) => number[] | {
         rowspan: number;
         colspan: number;
-    }) | undefined;
-    currentRowKey?: string | number | undefined;
-}> & {
+    }) | undefined>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: import("vue").PropType<{
+            hasChildren?: string | undefined;
+            children?: string | undefined;
+        } | undefined>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+        };
+    };
+    lazy: BooleanConstructor;
+    load: import("vue").PropType<((row: any, treeNode: import("./table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+    style: {
+        type: import("vue").PropType<import("vue").CSSProperties>;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     "onExpand-change"?: ((...args: any[]) => any) | undefined;
     "onCurrent-change"?: ((...args: any[]) => any) | undefined;
@@ -298,8 +284,8 @@ declare const _default: import("vue").DefineComponent<{
     lazy: boolean;
     data: any[];
     style: import("vue").CSSProperties;
-    border: boolean;
     className: string;
+    border: boolean;
     fit: boolean;
     stripe: boolean;
     treeProps: {

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

@@ -6,6 +6,7 @@ var vue = require('vue');
 var debounce = require('lodash/debounce');
 require('../../../directives/index.js');
 require('../../../hooks/index.js');
+var index$4 = require('../../scrollbar/index.js');
 var helper = require('./store/helper.js');
 var tableLayout = require('./table-layout.js');
 var index$1 = require('./table-header/index.js');
@@ -14,8 +15,9 @@ var index$3 = require('./table-footer/index.js');
 var utilsHelper = require('./table/utils-helper.js');
 var styleHelper = require('./table/style-helper.js');
 var defaults = require('./table/defaults.js');
+var tokens = require('./tokens.js');
 var index = require('../../../directives/mousewheel/index.js');
-var index$4 = require('../../../hooks/use-locale/index.js');
+var index$5 = require('../../../hooks/use-locale/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,7 +32,8 @@ var script = vue.defineComponent({
   components: {
     TableHeader: index$1["default"],
     TableBody: index$2["default"],
-    TableFooter: index$3["default"]
+    TableFooter: index$3["default"],
+    ElScrollbar: index$4.ElScrollbar
   },
   props: defaults["default"],
   emits: [
@@ -54,8 +57,9 @@ var script = vue.defineComponent({
     "expand-change"
   ],
   setup(props) {
-    const { t } = index$4.useLocale();
+    const { t } = index$5.useLocale();
     const table = vue.getCurrentInstance();
+    vue.provide(tokens.TABLE_INJECTION_KEY, table);
     const store = helper.createStore(table, props);
     table.store = store;
     const layout = new tableLayout["default"]({
@@ -85,6 +89,7 @@ var script = vue.defineComponent({
       handleHeaderFooterMousewheel,
       tableSize,
       bodyHeight,
+      height,
       emptyBlockStyle,
       handleFixedMousewheel,
       fixedHeight,
@@ -93,8 +98,7 @@ var script = vue.defineComponent({
       bodyWidth,
       resizeState,
       doLayout,
-      tableBodyStyles,
-      borderBottomPatchStyles
+      tableBodyStyles
     } = styleHelper["default"](props, layout, store, table);
     const debouncedUpdateLayout = debounce__default["default"](doLayout, 50);
     const tableId = `el-table_${tableIdSeed++}`;
@@ -124,9 +128,9 @@ var script = vue.defineComponent({
       isGroup,
       bodyWidth,
       bodyHeight,
+      height,
       tableBodyStyles,
       emptyBlockStyle,
-      borderBottomPatchStyles,
       debouncedUpdateLayout,
       handleFixedMousewheel,
       fixedHeight,

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

@@ -1 +1 @@
-{"version":3,"file":"table.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/table/src/table.vue"],"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":["Mousewheel","TableHeader","TableBody","defaultProps","useLocale","getCurrentInstance","TableLayout","useStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsHA,IAAI,WAAW,GAAG,EAAE;;AAEpB,EAAE,MAAM,SAAS;;AAEjB,gBAAIA,gBAAU;AACd,GAAG;EACD,UAAU,EAAE;iBACVC;eACAC,kBAAS;;GAEV;OACI,EAAEC;OACF,EAAE;IACL,QAAQ;;IAER;IACA;IACA;IACA;IACA,YAAY;IACZ,eAAe;IACf,WAAW;IACX,iBAAiB;IACjB;IACA,cAAc;IACd;IACA,aAAa;IACb;IACA;IACA,gBAAgB;IAChB;;OAEG,CAAC,KAAK,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,GAAGC;IACd,MAAM,KAAK,GAAGC;;IAEd,KAAK,CAAC,KAAK;IACX,MAAM,MAAM,GAAG,IAAIC,sBAAW,CAAC;MAC7B,YAAY,CAAC,KAAK;MAClB,KAAK;MACL,KAAK,KAAK,IAAI;MACd,UAAU,EAAE;KACb,CAAC,CAAC;SACE,CAAC,MAAM,GAAG;UACT;;MAEJ,aAAa;;MAEb,cAAc;;MAEd,kBAAkB;;MAElB;UACI;KACL;IACD,MAAM;MACJ,QAAQ;MACR,cAAc;MACd,cAAc;MACd,OAAO;MACP,gBAAgB;MAChB;MACA,SAAS;MACT;MACA,eAAe;MACf;MACA;MACA;MACA;MACA;MACA,WAAW;MACX,QAAQ;MACR;MACA;QACEC,sBAAQ,CAAC;UACP;UACA,OAAO;SACR,CAAC,OAAO,GAAG;SACX,CAAC,KAAK,GAAG;MACZ,OAAO;MACP,WAAW;MACX,QAAQ;MACR;MACA;IACF,MAAM,eAAe,gBAAY,WAAW,CAAC;;MAE3C,OAAO,KAAK,CAAC,SAAS,IAAI,EAAE,oBAAoB,CAAC;;IAEnD,OAAO;MACL,MAAM;MACN,KAAK;MACL;MACA;MACA,OAAO;MACP,SAAS;;MAET,OAAO;MACP,cAAc;;;MAGd,OAAO;MACP,SAAS;;;MAGT;MACA;MACA;MACA,qBAAqB;MACrB,WAAW;MACX;MACA;MACA;MACA;MACA,WAAW;MACX,kBAAkB;MAClB;MACA;MACA,QAAQ;MACR,IAAI;MACJ,CAAC;MACD,cAAc;MACd,OAAO,EAAE,KAAK;MACd,eAAe;MACf,iBAAiB;MACjB;;;;;;"}
+{"version":3,"file":"table.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/table/src/table.vue"],"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        'has-footer': showSummary,\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        <el-scrollbar ref=\"scrollWrapper\" :height=\"height\">\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        </el-scrollbar>\n      </div>\n      <div v-if=\"border || isGroup\" class=\"el-table__border-left-patch\"></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, provide } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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'\nimport { TABLE_INJECTION_KEY } from './tokens'\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    ElScrollbar,\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    provide(TABLE_INJECTION_KEY, table)\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      height,\n      emptyBlockStyle,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      resizeProxyVisible,\n      bodyWidth,\n      resizeState,\n      doLayout,\n      tableBodyStyles,\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      height,\n      tableBodyStyles,\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      computedSumText,\n      computedEmptyText,\n    }\n  },\n})\n</script>\n"],"names":["Mousewheel","TableHeader","TableBody","ElScrollbar","defaultProps","useLocale","getCurrentInstance","TableLayout","useStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,IAAI,WAAW,GAAG,CAAC,CAAC;;AAEpB,EAAE,MAAM,SAAS;;AAEjB,gBAAIA,gBAAU;AACd,GAAG;EACD,UAAU,EAAE;iBACVC;eACAC,kBAAS;;iBAETC;;OAEG,EAAEC;OACF,EAAE;IACL,QAAQ;;IAER;IACA;IACA;IACA;IACA,YAAY;IACZ,eAAe;IACf,WAAW;IACX,iBAAiB;IACjB;IACA,cAAc;IACd;IACA,aAAa;IACb;IACA;IACA,gBAAgB;IAChB;;OAEG,CAAC,KAAK,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,GAAGC;IACd,MAAM,KAAK,GAAGC;;IAEd,MAAM,KAAK;IACX,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,MAAM,MAAM,GAAG,IAAIC;MACjB,KAAK,EAAE,KAAK,CAAC,KAAK;MAClB,KAAK;MACL,KAAK,KAAK,IAAI;MACd,UAAU,EAAE;KACb,CAAC,CAAC;SACE,CAAC,MAAM,GAAG;UACT;;MAEJ,aAAa;;MAEb,cAAc;;MAEd,kBAAkB;;MAElB;UACI;KACL;IACD,MAAM;MACJ,QAAQ;MACR,cAAc;MACd,cAAc;MACd,OAAO;MACP,gBAAgB;MAChB;MACA,SAAS;MACT;MACA,MAAM;MACN;MACA;MACA,WAAW;MACX;MACA;MACA,SAAS;MACT,WAAW;MACX,QAAQ;MACR;QACEC;UACE;UACA,OAAO,GAAG,CAAC;SACZ,CAAC,OAAO;SACR,CAAC,KAAK,GAAG;MACZ,OAAO;MACP;MACA,QAAQ;MACR;MACA;IACF,MAAM,eAAe,gBAAY,WAAW,CAAC;;MAE3C,OAAO,KAAK,CAAC,SAAS,IAAI,EAAE,oBAAoB,CAAC;;IAEnD,OAAO;MACL,MAAM;MACN,KAAK;MACL;MACA;MACA,OAAO;MACP,SAAS;;MAET,OAAO;MACP,cAAc;;;MAGd,OAAO;MACP,SAAS;;;MAGT;MACA;MACA;MACA,qBAAqB;MACrB,WAAW;MACX;MACA;MACA;MACA;MACA,WAAW;MACX,kBAAkB;MAClB;MACA;MACA,QAAQ;MACR,IAAI;MACJ,CAAC;MACD,cAAc;MACd,OAAO,EAAE,KAAK;MACd,eAAe;MACf,iBAAiB;MACjB;;;;;;"}

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

@@ -36,6 +36,7 @@ const _hoisted_8 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_table_header = vue.resolveComponent("table-header");
   const _component_table_body = vue.resolveComponent("table-body");
+  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
   const _component_table_footer = vue.resolveComponent("table-footer");
   const _directive_mousewheel = vue.resolveDirective("mousewheel");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -51,7 +52,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "el-table--scrollable-x": _ctx.layout.scrollX.value,
         "el-table--scrollable-y": _ctx.layout.scrollY.value,
         "el-table--enable-row-hover": !_ctx.store.states.isComplex.value,
-        "el-table--enable-row-transition": (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100
+        "el-table--enable-row-transition": (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
+        "has-footer": _ctx.showSummary
       },
       _ctx.tableSize ? `el-table--${_ctx.tableSize}` : "",
       _ctx.className,
@@ -81,40 +83,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         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_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)
+        vue.createVNode(_component_el_scrollbar, {
+          ref: "scrollWrapper",
+          height: _ctx.height
+        }, {
+          default: vue.withCtx(() => [
+            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_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)
+          ]),
+          _: 3
+        }, 8, ["height"])
       ], 4),
-      _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.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6)) : vue.createCommentVNode("v-if", true)
     ]),
     _ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
       vue.createVNode(_component_table_footer, {

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    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;;;;;;"}
+{"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        'has-footer': showSummary,\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        <el-scrollbar ref=\"scrollWrapper\" :height=\"height\">\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        </el-scrollbar>\n      </div>\n      <div v-if=\"border || isGroup\" class=\"el-table__border-left-patch\"></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, provide } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { Mousewheel } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElScrollbar from '@element-plus/components/scrollbar'\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'\nimport { TABLE_INJECTION_KEY } from './tokens'\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    ElScrollbar,\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    provide(TABLE_INJECTION_KEY, table)\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      height,\n      emptyBlockStyle,\n      handleFixedMousewheel,\n      fixedHeight,\n      fixedBodyHeight,\n      resizeProxyVisible,\n      bodyWidth,\n      resizeState,\n      doLayout,\n      tableBodyStyles,\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      height,\n      tableBodyStyles,\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      computedSumText,\n      computedEmptyText,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;;;;;;EA2BW,KAAI;EAAgB;;;;EAKvB,KAAI;EAEJ;;;;;EAqCI,KAAI;EACJ;;;;EAMwB;;;;EAK9B,KAAI;EAEJ;;;EAaA,KAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBApEkB;;;iBAMX;;8BAEY;kCACF;;;;;;;;;WAKT;;;;;;;;;;cAGD,OAAOA;uBACE;;;2CAGU;cACnB,KAAK;cACL;cACA,KAAK;;;;;;;;4CAOE;uBACH;;kBAEL;;;;;;;;;;;;;;;;;;;;;0CAeR;;;;;;;"}

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

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+import type { DefaultRow, Table } from './table/defaults';
+export declare const TABLE_INJECTION_KEY: InjectionKey<Table<DefaultRow>>;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TABLE_INJECTION_KEY = Symbol("ElTable");
+
+exports.TABLE_INJECTION_KEY = TABLE_INJECTION_KEY;
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../packages/components/table/src/tokens.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { DefaultRow, Table } from './table/defaults'\n\nexport const TABLE_INJECTION_KEY: InjectionKey<Table<DefaultRow>> =\n  Symbol('ElTable')\n"],"names":[],"mappings":";;;;AAAY,MAAC,mBAAmB,GAAG,MAAM,CAAC,SAAS;;;;"}

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

@@ -36,6 +36,4 @@ export declare const isFixedColumn: <T>(index: number, fixed: string | boolean,
 };
 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,7 +6,6 @@ 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) {
@@ -348,7 +347,7 @@ const getFixedColumnsClass = (index, fixed, store, realColumns) => {
   return classes;
 };
 function getOffset(offset, column) {
-  return offset + (Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
+  return offset + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
 }
 const getFixedColumnOffset = (index, fixed, store, realColumns) => {
   const { direction, start = 0 } = isFixedColumn(index, fixed, store, realColumns);
@@ -365,18 +364,6 @@ const getFixedColumnOffset = (index, fixed, store, realColumns) => {
   }
   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;
@@ -388,9 +375,7 @@ const ensurePosition = (style, key) => {
 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;