ele-admin-plus 1.1.9 → 1.2.0-beta.2

package/es/ele-data-table/index.d.ts

@@ -37,7 +37,7 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').TableEmptyProps>;
         default: () => null;
     };
-    rowClickChecked: import('vue').PropType<import('./types').RowClickChecked>; /** 表格列配置 */
+    rowClickChecked: import('vue').PropType<import('./types').RowClickChecked>;
     reserveCurrent: BooleanConstructor;
     selectedRowKeys: import('vue').PropType<DataKey[]>;
     cacheData: import('vue').PropType<DataItem[]>;
@@ -47,29 +47,22 @@ declare const _default: import('vue').DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    maxHeight: (StringConstructor | NumberConstructor)[];
     fit: {
         type: BooleanConstructor;
         default: boolean;
     };
+    width: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    lazy: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
     data: {
         type: import('vue').PropType<any[]>;
         default: () => never[];
     };
-    height: (StringConstructor | NumberConstructor)[];
-    scrollbarAlwaysOn: BooleanConstructor;
-    showOverflowTooltip: import('vue').PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
-    emptyText: StringConstructor;
-    indent: {
-        type: NumberConstructor;
-        default: number;
-    };
     showHeader: {
         type: BooleanConstructor;
         default: boolean;
@@ -87,11 +80,12 @@ declare const _default: import('vue').DefineComponent<{
     headerCellStyle: import('vue').PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
     currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
     expandRowKeys: import('vue').PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: import('vue').PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: import('vue').PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: import('vue').PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: import('vue').PropType<((data: {
         row: any;
         rowIndex: number;
@@ -105,6 +99,10 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
     treeProps: {
         type: import('vue').PropType<{
             hasChildren?: string | undefined;
@@ -120,7 +118,9 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<"auto" | "fixed">;
         default: string;
     };
+    scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
+    showOverflowTooltip: import('vue').PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
 }, {
     clearSort: () => void;
     clearSelection: () => void;
@@ -158,7 +158,7 @@ declare const _default: import('vue').DefineComponent<{
     headerContextmenu: (_column: Column, _e: MouseEvent) => boolean;
     sortChange: (_sorter: Sorter) => boolean;
     filterChange: (_filter: Filter) => boolean;
-    currentChange: (_current?: DataItem | null | undefined, _old?: DataItem | null | undefined) => boolean;
+    currentChange: (_current?: DataItem | null | undefined, _old?: DataItem | null | undefined) => boolean; /** 获取单选选中行 */
     headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
     'update:currentRowKey': (_currentRowKey?: DataKey | undefined) => boolean;
@@ -199,7 +199,7 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<import('./types').TableEmptyProps>;
         default: () => null;
     };
-    rowClickChecked: import('vue').PropType<import('./types').RowClickChecked>; /** 表格列配置 */
+    rowClickChecked: import('vue').PropType<import('./types').RowClickChecked>;
     reserveCurrent: BooleanConstructor;
     selectedRowKeys: import('vue').PropType<DataKey[]>;
     cacheData: import('vue').PropType<DataItem[]>;
@@ -209,29 +209,22 @@ declare const _default: import('vue').DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    maxHeight: (StringConstructor | NumberConstructor)[];
     fit: {
         type: BooleanConstructor;
         default: boolean;
     };
+    width: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    lazy: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
     data: {
         type: import('vue').PropType<any[]>;
         default: () => never[];
     };
-    height: (StringConstructor | NumberConstructor)[];
-    scrollbarAlwaysOn: BooleanConstructor;
-    showOverflowTooltip: import('vue').PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
-    emptyText: StringConstructor;
-    indent: {
-        type: NumberConstructor;
-        default: number;
-    };
     showHeader: {
         type: BooleanConstructor;
         default: boolean;
@@ -249,11 +242,12 @@ declare const _default: import('vue').DefineComponent<{
     headerCellStyle: import('vue').PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
     currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
     expandRowKeys: import('vue').PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: import('vue').PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: import('vue').PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: import('vue').PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: import('vue').PropType<((data: {
         row: any;
         rowIndex: number;
@@ -267,6 +261,10 @@ declare const _default: import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
     treeProps: {
         type: import('vue').PropType<{
             hasChildren?: string | undefined;
@@ -282,7 +280,9 @@ declare const _default: import('vue').DefineComponent<{
         type: import('vue').PropType<"auto" | "fixed">;
         default: string;
     };
+    scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
+    showOverflowTooltip: import('vue').PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
 }>> & {
     onSelect?: ((_selection: DataItem[], _row: DataItem) => any) | undefined;
     onExpandChange?: ((_row: DataItem, _expanded: boolean) => any) | undefined;
@@ -306,11 +306,9 @@ declare const _default: import('vue').DefineComponent<{
     "onUpdate:selectedRowKeys"?: ((_selectedRowKeys?: DataKey[] | undefined) => any) | undefined;
 }, {
     fit: boolean;
-    className: string;
     lazy: boolean;
+    className: string;
     data: any[];
-    scrollbarAlwaysOn: boolean;
-    indent: number;
     stripe: boolean;
     border: boolean;
     showHeader: boolean;
@@ -318,11 +316,13 @@ declare const _default: import('vue').DefineComponent<{
     highlightCurrentRow: boolean;
     defaultExpandAll: boolean;
     selectOnIndeterminate: boolean;
+    indent: number;
     treeProps: {
         hasChildren?: string | undefined;
         children?: string | undefined;
     } | undefined;
     tableLayout: "auto" | "fixed";
+    scrollbarAlwaysOn: boolean;
     flexible: boolean;
     sticky: boolean;
     headerEllipsis: boolean;

package/es/ele-data-table/index.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, nextTick, onMounted, h } from "vue";
 import { ElTable } from "element-plus";
-import { pick, omit, eachTree } from "../utils/core";
-import { useEmits, useMethods, isReserveChecked, getGlobalTooltipProps, getStateCols, getBodyRowClass, getHeadRowClass, isDisableRow, getValue, getTableFilter, getRowKeys, getCols, getEmptySlot, valueIsChanged, getRowByKey, arrayIsChanged, getKeysAndList, toggleRowSelectionPro } from "./util";
+import { pick, omit, getValue, eachTree } from "../utils/core";
+import { useEmits, useMethods, useStickyHeader, useScrollAlive, isReserveChecked, getGlobalTooltipProps, getStateCols, getBodyRowClass, getHeadRowClass, isDisableRow, getTableFilter, getRowKeys, getCols, getEmptySlot, valueIsChanged, getRowByKey, arrayIsChanged, getKeysAndList, toggleRowSelectionPro } from "./util";
 import { dataTableProps, dataTableEmits, tablePropKeys } from "./props";
 const index = defineComponent({
   name: "EleDataTable",
@@ -10,6 +10,8 @@ const index = defineComponent({
   setup(props, { emit, slots, expose }) {
     const events = useEmits(emit);
     const methods = useMethods(() => tableRef.value);
+    const { isLayoutFixedHead, isLayoutMaximized } = useStickyHeader();
+    useScrollAlive(() => tableRef.value);
     const tableState = {
       sorter: props.defaultSort,
       key: null,
@@ -296,6 +298,9 @@ const index = defineComponent({
           class: [
             "ele-data-table",
             { "is-sticky": props.sticky },
+            { "is-layout-fixed-head": props.sticky && isLayoutFixedHead.value },
+            { "is-layout-maximized": props.sticky && isLayoutMaximized.value },
+            { "is-sticky": props.sticky },
             { "hide-header": !props.showHeader },
             { "hide-bottom-line": !props.bottomLine }
           ],

package/es/ele-data-table/props.d.ts

@@ -7,7 +7,7 @@ declare const normalizeProps: Omit<{
         default: () => never[];
     };
     size: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -44,7 +44,7 @@ declare const normalizeProps: Omit<{
     defaultExpandAll: BooleanConstructor;
     defaultSort: PropType<import('element-plus/es/components/table/src/table/defaults').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
@@ -83,12 +83,12 @@ declare const normalizeProps: Omit<{
         default: string;
     };
     tableLayout: {
-        type: PropType<"auto" | "fixed">;
+        type: PropType<"fixed" | "auto">;
         default: string;
     };
     scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
-    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
 }, "style">;
 /**
  * 属性
@@ -147,33 +147,26 @@ export declare const dataTableProps: {
     cacheData: PropType<DataItem[]>;
     width: (StringConstructor | NumberConstructor)[];
     height: (StringConstructor | NumberConstructor)[];
+    data: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
     size: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    maxHeight: (StringConstructor | NumberConstructor)[];
     fit: {
         type: BooleanConstructor;
         default: boolean;
     };
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    lazy: BooleanConstructor;
-    data: {
-        type: PropType<any[]>;
-        default: () => never[];
-    };
-    scrollbarAlwaysOn: BooleanConstructor;
-    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
-    emptyText: StringConstructor;
-    indent: {
-        type: NumberConstructor;
-        default: number;
-    };
     showHeader: {
         type: BooleanConstructor;
         default: boolean;
@@ -191,11 +184,12 @@ export declare const dataTableProps: {
     headerCellStyle: PropType<import('element-plus/es/components/table/src/table/defaults').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
     currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
     expandRowKeys: PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: PropType<import('element-plus/es/components/table/src/table/defaults').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
@@ -209,6 +203,10 @@ export declare const dataTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
     treeProps: {
         type: PropType<{
             hasChildren?: string | undefined;
@@ -221,10 +219,12 @@ export declare const dataTableProps: {
     };
     load: PropType<((row: any, treeNode: import('element-plus/es/components/table/src/table/defaults').TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
     tableLayout: {
-        type: PropType<"auto" | "fixed">;
+        type: PropType<"fixed" | "auto">;
         default: string;
     };
+    scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
 };
 export type DataTableProps = ExtractPropTypes<typeof dataTableProps>;
 /**

package/es/ele-data-table/style/css-var.scss

@@ -5,6 +5,10 @@
   .ele-data-table {
     @include set-ele-var('table', $var);
   }
+
+  .ele-table-filter-popper {
+    @include set-ele-var('table-filter', $var);
+  }
 }
 
 /* 表格原始样式变量修改 */
@@ -24,6 +28,9 @@
   & > .el-table__inner-wrapper > .el-table__header-wrapper,
   &.el-table--border > .el-table__inner-wrapper::after,
   &.el-table--border.hide-header
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper,
+  &.el-table--layout-auto:not(.hide-header)
     > .el-table__inner-wrapper
     > .el-table__body-wrapper {
     border-top-left-radius: $radius;
@@ -33,6 +40,9 @@
   & > .el-table__inner-wrapper > .el-table__footer-wrapper,
   &.el-table--border > .el-table__inner-wrapper::before,
   &.el-table--border:not(.has-footer)
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper,
+  &.el-table--layout-auto.has-footer
     > .el-table__inner-wrapper
     > .el-table__body-wrapper {
     border-bottom-left-radius: $radius;
@@ -88,3 +98,51 @@
     }
   }
 }
+
+/* 表头筛选多选样式 */
+@mixin filter-checkbox-style($transition-base) {
+  .el-checkbox-group {
+    padding: eleVar('table-filter', 'padding');
+    box-sizing: border-box;
+
+    & > .el-checkbox {
+      width: 100%;
+      display: flex;
+      height: eleVar('table-filter', 'item-height');
+      padding: eleVar('table-filter', 'item-padding');
+      border-radius: eleVar('table-filter', 'item-radius');
+      transition: (color $transition-base, background-color $transition-base);
+      box-sizing: border-box;
+      margin: 0;
+
+      & > .el-checkbox__label {
+        color: eleVar('table-filter', 'item-color');
+      }
+
+      &:hover {
+        background: eleVar('table-filter', 'item-hover-bg');
+
+        & > .el-checkbox__label {
+          color: eleVar('table-filter', 'item-hover-color');
+        }
+      }
+
+      &.is-checked {
+        background: eleVar('table-filter', 'item-active-bg');
+
+        & > .el-checkbox__label {
+          color: eleVar('table-filter', 'item-active-color');
+          font-weight: eleVar('table-filter', 'item-active-font-weight');
+        }
+
+        &:hover {
+          background: eleVar('table-filter', 'item-active-hover-bg');
+        }
+      }
+
+      & + .el-checkbox {
+        margin-top: eleVar('table-filter', 'item-margin');
+      }
+    }
+  }
+}

package/es/ele-data-table/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-data-table/style/index.js

@@ -1,4 +1,4 @@
-import 'element-plus/es/components/table/style/index';
-import 'element-plus/es/components/table-column/style/index';
-import 'element-plus/es/components/empty/style/index';
-import './index.scss';
+import "element-plus/es/components/table/style/index";
+import "element-plus/es/components/table-column/style/index";
+import "element-plus/es/components/empty/style/index";
+import "./index.scss";

package/es/ele-data-table/style/index.scss

@@ -1,9 +1,6 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
-$ele-expand-path: 'M362 811 662 512 362 213' !default;
-$ele-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
-$ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
 
 @include set-data-table-var($ele);
 @include table-var-style('body .ele-data-table.el-table');
@@ -54,11 +51,21 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     }
 
     & > .el-table__header-wrapper .ele-table-head-tr > th.el-table__cell,
-    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell {
+    & > .el-table__body-wrapper .ele-table-head-tr > th.el-table__cell,
+    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell,
+    &
+      > .el-table__body-wrapper
+      > .el-scrollbar
+      > .el-scrollbar__wrap
+      > .el-scrollbar__view
+      > .el-table__body
+      > .el-table__body-footer
+      .el-table__cell {
       background: eleVar('table', 'th-bg');
     }
 
-    & > .el-table__header-wrapper .ele-table-head-tr {
+    & > .el-table__header-wrapper .ele-table-head-tr,
+    & > .el-table__body-wrapper .ele-table-head-tr {
       & > .el-table__cell.is-sortable:hover {
         background: eleVar('table', 'sort-hover-bg');
       }
@@ -76,7 +83,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
   }
 
   .ele-table-head-tr > .el-table__cell {
-    transition: background-color $ele-transition;
+    transition: background-color $transition-base;
 
     & > .cell {
       display: flex;
@@ -130,7 +137,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     .sort-caret {
       position: static;
       border: eleVar('table', 'sort-size') solid transparent;
-      transition: border-color $ele-transition;
+      transition: border-color $transition-base;
       box-sizing: border-box;
       pointer-events: none;
     }
@@ -174,17 +181,17 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     margin: eleVar('table', 'filter-margin');
     padding: eleVar('table', 'filter-padding');
     border-radius: eleVar('table', 'icon-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     position: relative;
 
     & > .el-icon {
       color: eleVar('table', 'icon-color');
       font-size: eleVar('table', 'filter-size');
-      transition: (color $ele-transition, font-size $ele-transition);
+      transition: (color $transition-base, font-size $transition-base);
 
       & > svg > path {
-        #{'d'}: path($ele-filter-path);
+        #{'d'}: path($icon-filter-path);
       }
     }
 
@@ -214,7 +221,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       align-items: center;
       justify-content: center;
       border-radius: eleVar('table', 'icon-radius');
-      transition: (color $ele-transition, background-color $ele-transition);
+      transition: (color $transition-base, background-color $transition-base);
       transform: none;
 
       &:hover {
@@ -222,7 +229,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       }
 
       & > .el-icon {
-        transition: all $ele-transition;
+        transition: all $transition-base;
         font-size: inherit;
 
         & > svg > path {
@@ -231,13 +238,13 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
           stroke-linecap: round;
           stroke-linejoin: round;
           stroke-width: 98;
-          #{'d'}: path($ele-expand-path);
+          #{'d'}: path($icon-expand-path);
         }
       }
 
       & > .is-loading > svg > path {
         stroke-width: 85;
-        #{'d'}: path($ele-loading-path);
+        #{'d'}: path($icon-loading-path);
       }
 
       & > .el-icon:not(.is-loading) > svg {
@@ -289,7 +296,15 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
   }
 
   /* 表尾 */
-  & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+  & > .el-table__inner-wrapper > .el-table__footer-wrapper,
+  &
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper
+    > .el-scrollbar
+    > .el-scrollbar__wrap
+    > .el-scrollbar__view
+    > .el-table__body
+    > .el-table__body-footer {
     border-top: 1px solid eleVar('table', 'border-color');
     margin-top: -1px;
     z-index: 3;
@@ -418,18 +433,15 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       top: eleVar('table', 'sticky-top');
     }
   }
-}
 
-/* 粘性头部适配布局风格 */
-.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-data-table.is-sticky {
-  &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
-    top: eleVar('table', 'fixed-header-sticky-top');
+  &.is-sticky.is-layout-fixed-head {
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
+      top: eleVar('table', 'fixed-header-sticky-top');
+    }
   }
-}
 
-.ele-admin-fixed-header.ele-admin-maximized:not(.ele-admin-expanded) {
-  &:not(.ele-admin-fixed-body) .ele-data-table.is-sticky {
-    &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
+  &.is-sticky.is-layout-maximized {
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
       top: eleVar('table', 'maximized-sticky-top');
     }
   }
@@ -464,3 +476,99 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
 .ele-table-tr > .is-index > .cell.el-tooltip > div {
   display: inline;
 }
+
+/* Filter */
+.ele-table-filter-popper {
+  &.el-table-filter {
+    position: fixed !important;
+  }
+
+  .el-table-filter__list {
+    padding: eleVar('table-filter', 'padding');
+    max-height: eleVar('table-filter', 'max-height');
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .el-table-filter__list-item {
+    color: eleVar('table-filter', 'item-color');
+    height: eleVar('table-filter', 'item-height');
+    line-height: eleVar('table-filter', 'item-height');
+    padding: eleVar('table-filter', 'item-padding');
+    border-radius: eleVar('table-filter', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+    box-sizing: border-box;
+
+    & + .el-table-filter__list-item {
+      margin-top: eleVar('table-filter', 'item-margin');
+    }
+
+    &:hover {
+      color: eleVar('table-filter', 'item-hover-color');
+      background: eleVar('table-filter', 'item-hover-bg');
+    }
+
+    &.is-active {
+      color: eleVar('table-filter', 'item-active-color');
+      background: eleVar('table-filter', 'item-active-bg');
+      font-weight: eleVar('table-filter', 'item-active-font-weight');
+
+      &:hover {
+        background: eleVar('table-filter', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  .el-table-filter__wrap {
+    max-height: eleVar('table-filter', 'max-height');
+  }
+
+  @include filter-checkbox-style($transition-base);
+
+  .el-table-filter__bottom {
+    padding: eleVar('table-filter', 'footer-padding');
+    border-top: eleVar('table-filter', 'footer-border');
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & > button {
+      height: 24px;
+      line-height: 24px;
+      padding: 0 11px;
+      font-size: 12px;
+      color: elVar('text-color', 'regular');
+      border-radius: calc(#{elVar('border-radius', 'base')} - 1px);
+      transition: (color $transition-base, background-color $transition-base);
+      box-sizing: border-box;
+
+      &:hover {
+        background: elVar('fill-color', 'light');
+      }
+
+      &:active {
+        background: elVar('fill-color');
+      }
+
+      &:first-child {
+        order: 2;
+        color: #fff;
+        background: elVar('color-primary');
+        margin-left: 4px;
+
+        &:hover {
+          background: elVar('color-primary', 'light-3');
+        }
+
+        &:active {
+          background: elVar('color-primary', 'dark-2');
+        }
+
+        &.is-disabled {
+          background: elVar('color-primary', 'light-5');
+        }
+      }
+    }
+  }
+}