ele-admin-plus 1.2.1-beta.1 → 1.2.1-beta.3

package/lib/ele-pro-table/props.cjs

@@ -40,7 +40,9 @@ const proTableProps = {
   /** 是否开启顶部工具栏 */
   toolbar: {
     type: [Boolean, Object],
-    default: true
+    default: () => {
+      return null;
+    }
   },
   /** 表头工具按钮布局 */
   tools: {
@@ -98,7 +100,7 @@ const proTableEmits = {
   /** 更新单选选中数据 */
   "update:current": (_current) => true,
   /** 列配置改变事件 */
-  columnsChange: (_columns) => true,
+  columnsChange: (_columns, _tableColumns) => true,
   /** 表格尺寸改变事件 */
   sizeChange: (_size) => true,
   /** 表格最大化切换事件 */

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

@@ -1,14 +1,15 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
-import { DataItem, Columns, TableSize } from '../ele-data-table/types';
-import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableLocale, ExportConfig, PrintConfig } from './types';
+import { DataItem, Columns, TableSize, RowKey } from '../ele-data-table/types';
+import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableTool, TableLocale, ExportConfig, PrintConfig } from './types';
 
 /**
  * 属性
  */
 export declare const proTableProps: {
     rowKey: {
-        type: PropType<string | ((row: DataItem) => string) | undefined>;
+        type: PropType<RowKey>;
         required: boolean;
     };
     /** 数据请求状态 */
@@ -43,11 +44,11 @@ export declare const proTableProps: {
     /** 是否开启顶部工具栏 */
     toolbar: {
         type: PropType<boolean | EleToolbarProps>;
-        default: boolean;
+        default: () => null;
     };
     /** 表头工具按钮布局 */
     tools: {
-        type: PropType<boolean | string[]>;
+        type: PropType<TableTool[] | boolean>;
         default: () => null;
     };
     /** 列配置是否可拖拽排序 */
@@ -65,9 +66,9 @@ export declare const proTableProps: {
     /** 表格全屏状态的高度 */
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     /** 自定义表格样式 */
-    tableStyle: PropType<Partial<import('vue').CSSProperties>>;
+    tableStyle: PropType<StyleValue>;
     /** 自定义底部样式 */
-    footerStyle: PropType<Partial<import('vue').CSSProperties>>;
+    footerStyle: PropType<StyleValue>;
     /** 分页组件 */
     pagination: {
         type: PropType<boolean | TablePagination>;
@@ -98,14 +99,14 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (NumberConstructor | StringConstructor)[];
+    maxHeight: (NumberConstructor | StringConstructor)[];
     lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    height: (StringConstructor | NumberConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
     stripe: {
         type: BooleanConstructor;
         default: null;
@@ -130,13 +131,13 @@ export declare const proTableProps: {
     headerCellClassName: PropType<import('element-plus').CellCls<any> | undefined>;
     headerCellStyle: PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
-    currentRowKey: (StringConstructor | NumberConstructor)[];
+    currentRowKey: (NumberConstructor | StringConstructor)[];
     emptyText: StringConstructor;
     expandRowKeys: PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
@@ -170,7 +171,7 @@ export declare const proTableProps: {
     };
     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>;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     columns: {
         type: PropType<Columns>;
         required: boolean;
@@ -186,7 +187,6 @@ export declare const proTableProps: {
     };
     bottomLine: {
         type: BooleanConstructor;
-        /** 自定义响应参数名称 */
         default: boolean;
     };
     emptyProps: {
@@ -209,7 +209,7 @@ export declare const proTableEmits: {
     /** 更新单选选中数据 */
     'update:current': (_current?: DataItem | null) => boolean;
     /** 列配置改变事件 */
-    columnsChange: (_columns: Columns) => boolean;
+    columnsChange: (_columns: Columns, _tableColumns: Columns) => boolean;
     /** 表格尺寸改变事件 */
     sizeChange: (_size: TableSize) => boolean;
     /** 表格最大化切换事件 */
@@ -226,15 +226,14 @@ export declare const proTableEmits: {
     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 | undefined, _old?: DataItem | null | undefined) => 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 | undefined) => boolean;
-    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[] | undefined) => boolean; /** 数组数据源时刷新按钮点击事件 */
+    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey) => boolean;
+    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[]) => boolean;
 };

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

@@ -91,6 +91,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   overflow: auto;
   padding: 0 0 16px 0;
   box-sizing: border-box;
@@ -118,6 +119,10 @@
 /* 密度设置 */
 .ele-tool-size-popper {
   min-width: 88px;
+
+  &.ele-dropdown .el-dropdown-menu__item > .el-icon {
+    font-size: elVar('font-size', 'base');
+  }
 }
 
 /* 列配置 */
@@ -143,6 +148,7 @@
 .ele-tool-column-link {
   color: elVar('color-primary');
   transition: color $transition-base;
+  user-select: none;
   cursor: pointer;
 
   &:hover {
@@ -198,6 +204,7 @@
 }
 
 .ele-tool-column-item {
+  user-select: none;
   border-radius: eleVar('tool-column', 'item-radius');
 
   &.sortable-chosen {
@@ -219,25 +226,53 @@
 }
 
 .ele-tool-column-handle {
+  flex-shrink: 0;
   display: flex;
-  font-size: 12px;
+  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');
-  margin-right: 4px;
+  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');
-  padding: eleVar('tool-column', 'btn-padding');
   margin-left: eleVar('tool-column', 'btn-space');
-  border-radius: eleVar('tool-column', 'btn-radius');
   transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
@@ -257,14 +292,11 @@
   }
 }
 
-.ele-tool-column.is-sortable {
-  .ele-tool-column-item-body {
-    padding-left: 6px;
-  }
-
-  .ele-tool-column-header .ele-tool-column-label {
-    padding-left: calc(22px - #{eleVar('tool-column', 'item-padding')});
-  }
+.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});
 }
 
 /* 导出和打印的列选择 */

package/lib/ele-pro-table/types.d.ts

@@ -229,6 +229,8 @@ export interface ColItem {
   children?: ColItem[];
   /** 列类型 */
   type?: string;
+  /** 列宽 */
+  width?: number | string;
 }
 
 /**
@@ -361,6 +363,8 @@ export interface ExportDataResult {
 export interface BeforeExportParams {
   /** 导出的数据 */
   data: DataItem[];
+  /** 导出的数据来源类型 */
+  dataType: ExportDataType;
   /** 导出的列配置 */
   columns?: Columns;
   /** 导出的表头数据封装 */
@@ -377,6 +381,14 @@ export interface BeforeExportParams {
   hideLoading: () => void;
   /** 关闭弹窗 */
   closeModal: () => void;
+  /** 导出的列配置(含未勾选的列) */
+  tableColumns?: Columns;
+  /** 是否导出表头 */
+  showHeader?: boolean;
+  /** 是否导出表尾 */
+  showFooter?: boolean;
+  /** 是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -398,6 +410,14 @@ export interface ExportConfig {
   dataType?: ExportDataType;
   /** 默认文件名 */
   fileName?: string;
+  /** 重设导出的列 */
+  columns?: Columns;
+  /** 默认是否导出表头 */
+  showHeader?: boolean;
+  /** 默认是否导出表尾 */
+  showFooter?: boolean;
+  /** 默认是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -416,6 +436,14 @@ export interface PrintConfig {
   beforePrint?: BeforeExport;
   /** 默认数据类型 */
   dataType?: ExportDataType;
+  /** 重设打印的列 */
+  columns?: Columns;
+  /** 默认是否打印表头 */
+  showHeader?: boolean;
+  /** 默认是否打印表尾 */
+  showFooter?: boolean;
+  /** 默认是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -432,6 +460,31 @@ export interface TablePrintOptions extends ExportDataResult {
   data: DataItem[];
 }
 
+/**
+ * 导出方法参数
+ */
+export interface TableExportParams {
+  /** 打印的数据 */
+  data?: DataItem[];
+  /** 打印的列 */
+  columns?: Columns;
+  /** 是否打印表头 */
+  showHeader?: boolean;
+  /** 是否打印表尾 */
+  showFooter?: boolean;
+  /** 是否展示层级序号 */
+  showTreeIndex?: boolean;
+  /** 数据的来源类型 */
+  dataType?: ExportDataType;
+  /** 导出的文件名 */
+  fileName?: string;
+}
+
+/**
+ * 缓存的名称
+ */
+export type CacheKey = string | undefined;
+
 /**
  * 国际化
  */
@@ -452,6 +505,7 @@ export interface TableLocale {
   columnExpand: string;
   columnFixedLeft: string;
   columnFixedRight: string;
+  columnWidth: string;
   exportOk: string;
   exportCancel: string;
   exportFileName: string;