yuang-framework-ui-pc 1.1.45 → 1.1.46

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

@@ -0,0 +1,258 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
+import { DataItem, Columns, TableSize, RowKey } from '../ele-data-table/types';
+import { default as TableTools } from './components/table-tools';
+import { default as ToolExport } from './components/tool-export';
+import { default as ToolPrint } from './components/tool-print';
+import { QueryParam, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableTool, TableLocale, ExportConfig, PrintConfig } from './types';
+
+/**
+ * 属性
+ */
+export declare const proTableProps: {
+    rowKey: {
+        type: PropType<RowKey>;
+        required: boolean;
+    };
+    /** 数据请求状态 */
+    loading: BooleanConstructor;
+    /** 数据源 */
+    datasource: {
+        type: PropType<Datasource>;
+        required: boolean;
+    };
+    /** 默认请求参数 */
+    queryParam: PropType<QueryParam>;
+    /** 自定义请求参数名称 */
+    request: PropType<RequestOption>;
+    /** 自定义响应参数名称 */
+    response: PropType<ResponseOption>;
+    /** 自定义响应数据解析 */
+    parseData: PropType<ParseData>;
+    /** 初始是否请求数据 */
+    loadOnCreated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否在排序和筛选改变后自动刷新 */
+    loadOnChanged: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 多选选中的数据 */
+    selections: PropType<DataItem[]>;
+    /** 单选选中的数据 */
+    current: PropType<DataItem | null>;
+    /** 是否开启顶部工具栏 */
+    toolbar: {
+        type: PropType<boolean | EleToolbarProps>;
+        default: () => null;
+    };
+    /** 表头工具按钮布局 */
+    tools: {
+        type: PropType<TableTool[] | boolean>;
+        default: () => null;
+    };
+    /** 列配置是否可拖拽排序 */
+    columnSortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 列配置是否可固定列 */
+    columnFixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 表格全屏时的层级 */
+    maximizedIndex: NumberConstructor;
+    /** 表格全屏状态的高度 */
+    maximizedHeight: (NumberConstructor | StringConstructor)[];
+    /** 自定义表格样式 */
+    tableStyle: PropType<StyleValue>;
+    /** 自定义底部样式 */
+    footerStyle: PropType<StyleValue>;
+    /** 分页组件 */
+    pagination: {
+        type: PropType<boolean | TablePagination>;
+        default: () => null;
+    };
+    /** 自定义加载组件属性 */
+    loadingProps: PropType<EleLoadingProps>;
+    /** 列配置缓存名称 */
+    cacheKey: StringConstructor;
+    /** 是否虚拟滚动 */
+    virtual: BooleanConstructor;
+    /** 虚拟滚动表格行高 */
+    rowHeight: NumberConstructor;
+    /** 国际化 */
+    locale: PropType<Partial<TableLocale>>;
+    /** 导出配置 */
+    exportConfig: PropType<ExportConfig>;
+    /** 打印配置 */
+    printConfig: PropType<PrintConfig>;
+    load: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["load"]>;
+    size: {
+        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;
+    };
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: (NumberConstructor | StringConstructor)[];
+    maxHeight: (NumberConstructor | StringConstructor)[];
+    lazy: BooleanConstructor;
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: (NumberConstructor | StringConstructor)[];
+    stripe: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["summaryMethod"]>;
+    rowClassName: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["rowClassName"]>;
+    rowStyle: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["rowStyle"]>;
+    cellClassName: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["cellClassName"]>;
+    cellStyle: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["cellStyle"]>;
+    headerRowClassName: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["headerRowClassName"]>;
+    headerRowStyle: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["headerRowStyle"]>;
+    headerCellClassName: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["headerCellClassName"]>;
+    headerCellStyle: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["headerCellStyle"]>;
+    highlightCurrentRow: BooleanConstructor;
+    currentRowKey: (NumberConstructor | StringConstructor)[];
+    emptyText: StringConstructor;
+    expandRowKeys: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["expandRowKeys"]>;
+    defaultExpandAll: BooleanConstructor;
+    defaultSort: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["defaultSort"]>;
+    tooltipEffect: StringConstructor;
+    tooltipOptions: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["tooltipOptions"]>;
+    spanMethod: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["spanMethod"]>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["treeProps"]>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+            checkStrictly: boolean;
+        };
+    };
+    tableLayout: {
+        type: PropType<"auto" | "fixed">;
+        default: string;
+    };
+    scrollbarAlwaysOn: BooleanConstructor;
+    flexible: BooleanConstructor;
+    showOverflowTooltip: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["showOverflowTooltip"]>;
+    tooltipFormatter: PropType<import('element-plus/es/components/table/index').TableProps<import('element-plus/es/components/table/src/table/defaults').DefaultRow>["tooltipFormatter"]>;
+    appendFilterPanelTo: StringConstructor;
+    scrollbarTabindex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    allowDragLastColumn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preserveExpandedContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    columns: {
+        type: PropType<Columns>;
+        required: boolean;
+    };
+    sticky: BooleanConstructor;
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    bottomLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyProps: {
+        type: PropType<import('../ele-data-table/types').TableEmptyProps>;
+        default: () => null;
+    };
+    rowClickChecked: PropType<import('../ele-data-table/types').RowClickChecked>;
+    reserveCurrent: BooleanConstructor;
+    selectedRowKeys: PropType<import('../ele-data-table/types').DataKey[]>;
+};
+export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
+/**
+ * 事件
+ */
+export declare const proTableEmits: {
+    /** 表格数据请求完成事件 */
+    done: (_result: DoneParams<DataItem>, _parent?: DataItem) => boolean;
+    /** 更新多选选中数据 */
+    'update:selections': (_selections: DataItem[]) => boolean;
+    /** 更新单选选中数据 */
+    'update:current': (_current?: DataItem | null) => boolean;
+    /** 列配置改变事件 */
+    columnsChange: (_columns: Columns, _tableColumns: Columns, _isReset: boolean) => boolean;
+    /** 表格尺寸改变事件 */
+    sizeChange: (_size: TableSize) => boolean;
+    /** 表格最大化切换事件 */
+    maximizedChange: (_maximized: boolean) => boolean;
+    /** 数组数据源时刷新按钮点击事件 */
+    refresh: () => boolean;
+    select: (_selection: DataItem[], _row: DataItem) => boolean;
+    selectAll: (_selection: DataItem[]) => boolean;
+    selectionChange: (_selection: DataItem[]) => boolean;
+    cellMouseEnter: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellMouseLeave: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellClick: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellDblclick: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellContextmenu: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    rowClick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
+    rowContextmenu: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
+    rowDblclick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
+    headerClick: (_column: import('./types').Column, _e: MouseEvent) => boolean;
+    headerContextmenu: (_column: import('./types').Column, _e: MouseEvent) => boolean;
+    sortChange: (_sorter: import('./types').Sorter) => boolean;
+    filterChange: (_filter: import('./types').Filter) => boolean;
+    currentChange: (_current?: DataItem | null, _old?: DataItem | null) => boolean;
+    headerDragend: (_width: number, _old: number, _column: import('./types').Column, _e: MouseEvent) => boolean;
+    expandChange: (_row: DataItem, _expanded: boolean) => boolean;
+    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey) => boolean;
+    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[]) => boolean;
+};
+/**
+ * 默认工具按钮实例
+ */
+export type TableToolsInstance = InstanceType<typeof TableTools> | null;
+/**
+ * 导出组件实例
+ */
+export type ToolExportInstance = InstanceType<typeof ToolExport> | null;
+/**
+ * 打印组件实例
+ */
+export type ToolPrintInstance = InstanceType<typeof ToolPrint> | null;

package/es/ele-pro-table/props.js

@@ -0,0 +1,112 @@
+import { omit } from "../utils/core";
+import { dataTableProps, dataTableEmits } from "../ele-data-table/props";
+const proTableProps = {
+  ...omit(dataTableProps, ["data", "pageIndex", "errorText", "cacheData"]),
+  rowKey: {
+    type: [String, Function],
+    required: false
+  },
+  /** 数据请求状态 */
+  loading: Boolean,
+  /** 数据源 */
+  datasource: {
+    type: [Array, Function],
+    required: true
+  },
+  /** 默认请求参数 */
+  queryParam: Object,
+  /** 自定义请求参数名称 */
+  request: Object,
+  /** 自定义响应参数名称 */
+  response: Object,
+  /** 自定义响应数据解析 */
+  parseData: Function,
+  /** 初始是否请求数据 */
+  loadOnCreated: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否在排序和筛选改变后自动刷新 */
+  loadOnChanged: {
+    type: Boolean,
+    default: true
+  },
+  /** 多选选中的数据 */
+  selections: Array,
+  /** 单选选中的数据 */
+  current: Object,
+  /** 是否开启顶部工具栏 */
+  toolbar: {
+    type: [Boolean, Object],
+    default: () => {
+      return null;
+    }
+  },
+  /** 表头工具按钮布局 */
+  tools: {
+    type: [Boolean, Array],
+    default: () => {
+      return null;
+    }
+  },
+  /** 列配置是否可拖拽排序 */
+  columnSortable: {
+    type: Boolean,
+    default: true
+  },
+  /** 列配置是否可固定列 */
+  columnFixed: {
+    type: Boolean,
+    default: true
+  },
+  /** 表格全屏时的层级 */
+  maximizedIndex: Number,
+  /** 表格全屏状态的高度 */
+  maximizedHeight: [String, Number],
+  /** 自定义表格样式 */
+  tableStyle: Object,
+  /** 自定义底部样式 */
+  footerStyle: Object,
+  /** 分页组件 */
+  pagination: {
+    type: [Boolean, Object],
+    default: () => {
+      return null;
+    }
+  },
+  /** 自定义加载组件属性 */
+  loadingProps: Object,
+  /** 列配置缓存名称 */
+  cacheKey: String,
+  /** 是否虚拟滚动 */
+  virtual: Boolean,
+  /** 虚拟滚动表格行高 */
+  rowHeight: Number,
+  /** 国际化 */
+  locale: Object,
+  /** 导出配置 */
+  exportConfig: Object,
+  /** 打印配置 */
+  printConfig: Object
+};
+const proTableEmits = {
+  ...dataTableEmits,
+  /** 表格数据请求完成事件 */
+  done: (_result, _parent) => true,
+  /** 更新多选选中数据 */
+  "update:selections": (_selections) => true,
+  /** 更新单选选中数据 */
+  "update:current": (_current) => true,
+  /** 列配置改变事件 */
+  columnsChange: (_columns, _tableColumns, _isReset) => true,
+  /** 表格尺寸改变事件 */
+  sizeChange: (_size) => true,
+  /** 表格最大化切换事件 */
+  maximizedChange: (_maximized) => true,
+  /** 数组数据源时刷新按钮点击事件 */
+  refresh: () => true
+};
+export {
+  proTableEmits,
+  proTableProps
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表格主题变量 */
+@mixin set-pro-table-var($var) {
+  .ele-tool-column {
+    @include set-ele-var('tool-column', $var);
+  }
+}

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

@@ -0,0 +1,326 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pro-table-var($ele);
+
+/* 工具栏 */
+.ele-pro-table > .ele-toolbar {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  & + .ele-toolbar {
+    border-top: none;
+  }
+}
+
+.ele-pro-table:not(.is-border) > .ele-toolbar {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.ele-pro-table.is-border > .ele-toolbar {
+  border-bottom: none;
+}
+
+/* 取消表格上边圆角 */
+.ele-pro-table > .ele-toolbar.is-default {
+  & + .ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper,
+  & + .ele-data-table > .el-table__inner-wrapper > .el-table__body-wrapper,
+  & + .ele-data-table.el-table--border > .el-table__inner-wrapper::after,
+  &
+    + .ele-data-table.el-table--border.hide-header
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper,
+  &
+    + .ele-virtual-table
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__header-wrapper,
+  & + .ele-virtual-table.is-border > .el-table-v2::after,
+  &
+    + .ele-virtual-table.is-border.hide-header
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__body
+    > div:not(.el-virtual-scrollbar) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  & + .ele-data-table.el-table--border::before,
+  & + .ele-virtual-table.is-border::before {
+    border-top-left-radius: 0;
+  }
+
+  & + .ele-data-table.el-table--border::after,
+  & + .ele-virtual-table.is-border::after {
+    border-top-right-radius: 0;
+  }
+
+  &
+    + .ele-data-table.hide-header:not(.el-table--border)
+    > .el-table__inner-wrapper::after,
+  & + .ele-virtual-table.hide-header:not(.is-border) > .el-table-v2::after {
+    display: none;
+  }
+}
+
+/* 加载图标 */
+.ele-pro-table > .ele-loading-spinner {
+  background: transparent;
+}
+
+/* 底栏 */
+.ele-pro-table-footer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  & > .ele-pagination {
+    margin: 0 auto;
+    padding-top: 4px;
+  }
+}
+
+/* 全屏 */
+.ele-pro-table.is-maximized {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: auto;
+  padding: 0 0 16px 0;
+  box-sizing: border-box;
+  background: elVar('bg-color');
+  z-index: calc(var(#{eleVarName('layout', 'index')}, 0) + 99);
+
+  & > .ele-toolbar.is-plain {
+    padding: 0 16px;
+  }
+
+  /* 粘性表头顶部距离修改 */
+  &
+    > .ele-data-table.is-sticky
+    > .el-table__inner-wrapper
+    > .el-table__header-wrapper,
+  &
+    > .ele-virtual-table.is-sticky
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__header-wrapper {
+    top: eleVar('table', 'sticky-top');
+  }
+}
+
+/* 密度设置 */
+.ele-tool-size-popper {
+  min-width: 88px;
+
+  &.ele-dropdown .el-dropdown-menu__item > .el-icon {
+    font-size: elVar('font-size', 'base');
+  }
+}
+
+/* 列配置 */
+.ele-tool-column-popover.ele-popover {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
+
+.ele-tool-column {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
+
+.ele-tool-column-header {
+  display: flex;
+  align-items: center;
+  border-bottom: eleVar('tool-column', 'header-border');
+  padding: eleVar('tool-column', 'header-padding');
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ele-tool-column-link {
+  color: elVar('color-primary');
+  transition: color $transition-base;
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    color: elVar('color-primary', 'light-3');
+  }
+}
+
+.ele-tool-column .ele-tool-column-item .ele-tool-column-item-body,
+.ele-tool-column .ele-tool-column-header .ele-tool-column-label {
+  .el-checkbox {
+    height: eleVar('tool-column', 'item-height');
+    line-height: eleVar('tool-column', 'item-height');
+  }
+
+  .el-checkbox__label {
+    color: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.ele-tool-column-label {
+  flex: 1;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.ele-tool-column > .ele-tool-column-list {
+  padding: eleVar('tool-column', 'body-padding');
+  max-height: eleVar('tool-column', 'max-height');
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-tool-column-item-body {
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('tool-column', 'item-padding');
+  border-radius: eleVar('tool-column', 'item-radius');
+  transition: background-color $transition-base;
+  position: relative;
+
+  .el-checkbox {
+    width: 100%;
+  }
+
+  &:hover {
+    background: eleVar('tool-column', 'item-hover-bg');
+  }
+}
+
+.ele-tool-column-item {
+  user-select: none;
+  border-radius: eleVar('tool-column', 'item-radius');
+
+  &.sortable-chosen {
+    background: eleVar('tool-column', 'item-hover-bg');
+    opacity: 1 !important;
+
+    & > .ele-tool-column-item-body {
+      background: none;
+    }
+  }
+
+  &.sortable-ghost {
+    opacity: 0 !important;
+  }
+
+  & > .ele-tool-column-list {
+    padding-left: 24px;
+  }
+}
+
+.ele-tool-column-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  margin-right: eleVar('tool-column', 'btn-space');
+  margin-left: eleVar('tool-column', 'btn-offset');
+  color: elVar('text-color', 'placeholder');
+  font-size: 12px;
+  cursor: move;
+}
+
+.ele-tool-column-input {
+  flex-shrink: 0;
+  width: 60px;
+  background: elVar('bg-color', 'overlay');
+  border-radius: elVar('border-radius', 'base');
+  margin-left: eleVar('tool-column', 'btn-space');
+  margin-right: eleVar('tool-column', 'btn-offset');
+
+  .el-input__inner {
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.ele-tool-column-fixed {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  &:last-child {
+    margin-right: eleVar('tool-column', 'btn-offset');
+  }
+}
+
+.ele-tool-column-fixed-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  border-radius: eleVar('tool-column', 'btn-radius');
+  font-size: 12px;
+  color: eleVar('tool-column', 'btn-color');
+  margin-left: eleVar('tool-column', 'btn-space');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('tool-column', 'btn-hover-color');
+    background: eleVar('tool-column', 'btn-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('tool-column', 'btn-active-color');
+    background: eleVar('tool-column', 'btn-active-bg');
+  }
+
+  & > .el-icon > svg {
+    stroke-width: 5;
+  }
+}
+
+.ele-tool-column.is-sortable .ele-tool-column-header .ele-tool-column-label {
+  $size: eleVar('tool-column', 'btn-size');
+  $space: eleVar('tool-column', 'btn-space');
+  $offset: eleVar('tool-column', 'btn-offset');
+  padding-left: calc(#{$size} + #{$space} + #{$offset});
+}
+
+/* 导出和打印的列选择 */
+.ele-tool-export-form,
+.ele-tool-print-form {
+  .ele-tool-column {
+    border: 1px solid elVar('border-color', 'light');
+    border-radius: elVar('border-radius', 'base');
+    line-height: normal;
+    width: 100%;
+  }
+
+  .ele-tool-column-header {
+    background: elVar('fill-color', 'lighter');
+    border-top-left-radius: elVar('border-radius', 'base');
+    border-top-right-radius: elVar('border-radius', 'base');
+  }
+}
+
+.ele-tool-form-options {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 8px;
+}