ele-admin-plus 1.1.3 → 1.1.4-beta.2

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

@@ -10,18 +10,21 @@ const tableViewProps = {
     type: Array,
     required: true
   },
-  // 数据请求状态
-  loading: Boolean,
   // 起始编号
   pageIndex: Number,
   // 表头内容超出省略
   headerEllipsis: {
     type: Boolean,
     default: true
+  },
+  // 插槽不渲染非正常的调用
+  slotNormalize: {
+    type: Boolean,
+    default: true
   }
 };
 const proTableProps = {
-  ...tableViewProps,
+  ...core.omit(tableViewProps, ["pageIndex"]),
   stripe: {
     type: Boolean,
     default: null
@@ -30,6 +33,8 @@ const proTableProps = {
     type: Boolean,
     default: null
   },
+  // 数据请求状态
+  loading: Boolean,
   // 数据源
   datasource: {
     type: [Array, Function],
@@ -105,6 +110,13 @@ const proTableProps = {
   },
   // 设置粘性头部
   sticky: Boolean,
+  // 自定义加载组件属性
+  loadingProps: Object,
+  // 是否显示下边框线
+  bottomLine: {
+    type: Boolean,
+    default: true
+  },
   // 列配置缓存名称
   cacheKey: String,
   // 国际化

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

@@ -6,11 +6,11 @@ require("element-plus/es/components/link/style/index");
 require("element-plus/es/components/table/style/index");
 require("element-plus/es/components/table-column/style/index");
 require("element-plus/es/components/empty/style/index");
-require("element-plus/es/components/loading/style/index");
 require("../../ele-tooltip/style/index");
 require("../../ele-popover/style/index");
 require("../../ele-dropdown/style/index");
 require("../../ele-pagination/style/index");
+require("../../ele-loading/style/index");
 require("../../ele-toolbar/style/index");
 require("../../ele-tool/style/index");
 require("./index.scss");

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

@@ -90,6 +90,7 @@
       #{elVarName('text-color', 'placeholder')}: #{$color};
       width: 14px;
       overflow: visible;
+      flex-shrink: 0;
 
       .ascending {
         left: 4px;
@@ -133,6 +134,8 @@
   .ele-cell-title {
     flex: 1;
     position: relative;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   // 行高
@@ -150,16 +153,29 @@
     }
   }
 
+  // 复选框
+  .ele-table-head-tr > .el-table-column--selection > .cell,
+  .ele-table-tr > .el-table-column--selection > .cell {
+    height: auto;
+    vertical-align: middle;
+    overflow: visible;
+  }
+
   // 边框线
   & > .el-table--border::after,
   & > .el-table--border::before,
   & > .el-table > .el-table__inner-wrapper > .el-table__border-left-patch {
-    width: 0.8px;
+    width: eleVar('table', 'fix-border');
   }
 
   & > .el-table > .el-table__inner-wrapper::before,
   & > .el-table--border > .el-table__inner-wrapper::after {
-    height: 0.8px;
+    height: eleVar('table', 'fix-border');
+  }
+
+  // 隐藏下边框
+  &.hide-bottom-line > .el-table > .el-table__inner-wrapper::before {
+    display: none;
   }
 
   // 圆角
@@ -199,6 +215,8 @@
 
     // 合计行
     & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+      margin-top: calc(0px - eleVar('table', 'fix-height'));
+
       & > table > tbody > tr:last-child > td {
         border-bottom-color: transparent;
       }
@@ -239,6 +257,14 @@
     display: none;
   }
 
+  // 滚动条
+  & > .el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
+    & > .el-scrollbar > .el-scrollbar__wrap {
+      padding-bottom: eleVar('table', 'fix-height');
+      box-sizing: border-box;
+    }
+  }
+
   // loading
   & > .el-table--border > .el-loading-mask {
     top: 1px;
@@ -247,6 +273,10 @@
     bottom: 1px;
   }
 
+  & > .ele-loading-spinner {
+    background: transparent;
+  }
+
   // 空状态
   .ele-table-empty {
     padding: 58px 0;
@@ -311,9 +341,30 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
   height: auto;
 }
 
+/* Link */
+.ele-table-tr .el-link,
+.ele-table-head-tr .el-link {
+  display: inline;
+  font-size: inherit;
+
+  & > .el-link__inner {
+    display: inline;
+  }
+
+  & > .el-icon {
+    vertical-align: -1.7px;
+  }
+}
+
+// 超出隐藏
+.ele-table-tr > .el-table__cell > .cell.el-tooltip > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* 底栏 */
 .ele-pro-table-footer {
-  padding-top: 2px;
+  padding-top: 4px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -428,17 +479,22 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
     .ele-tool-fixed-item {
       display: flex;
       font-size: 12px;
-      margin-left: 4px;
-      color: elVar('text-color', 'placeholder');
-      transition: color $ele-transition;
+      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 $ele-transition, background-color $ele-transition);
+      box-sizing: border-box;
       cursor: pointer;
 
       &:hover {
-        color: elVar('text-color', 'regular');
+        color: eleVar('tool-column', 'btn-hover-color');
+        background: eleVar('tool-column', 'btn-hover-bg');
       }
 
       &.is-active {
-        color: elVar('color-primary');
+        color: eleVar('tool-column', 'btn-active-color');
+        background: eleVar('tool-column', 'btn-active-bg');
       }
     }
   }

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

@@ -136,7 +136,7 @@ export type TableColumn = Partial<ElColumnProps>;
  */
 export interface Column extends TableColumn {
     /** 唯一标识 */
-    id?: string;
+    uid?: string;
     /** 插槽名称 */
     slot?: string;
     /** 表头插槽名称 */
@@ -199,7 +199,7 @@ export type TableTool = 'reload' | 'size' | 'columns' | 'maximized';
  */
 export interface ColItem {
     /** 列配置标识 */
-    id: string;
+    uid: string;
     /** 字段名称 */
     prop?: string;
     /** 列数据标识 */
@@ -263,7 +263,7 @@ export type RowClickChecked = boolean | 'smart';
 /**
  * 获取插槽方法
  */
-export type GetSlotFunc = (name: string) => Slot | undefined;
+export type GetSlotFunc = (name?: string) => Slot | undefined;
 /**
  * showOverflowTooltip 属性
  */
@@ -272,17 +272,51 @@ export type ShowOverflowTooltip = Column['showOverflowTooltip'];
  * 复合属性类型
  */
 export type ProProps<T extends Record<keyof any, any>> = boolean | T;
+/**
+ * 表格的 treeProps 属性
+ */
+export interface TreeProps {
+    hasChildren?: string;
+    children?: string;
+}
+/**
+ * 获取含表格状态的列配置的返回结果
+ */
+export interface TableState {
+    /** 含筛选状态的列配置 */
+    cols: Columns;
+    /** 排序状态 */
+    sorter?: Sorter | null;
+}
 /**
  * 表格实例数据
  */
 export interface TableCurrent {
     /** 当前排序参数 */
-    sorter: Sorter | null;
+    sorter: Sorter;
     /** 当前筛选参数 */
-    filter: Filter | null;
+    filter: Filter;
     /** 当前搜索参数 */
     where: Where;
 }
+/**
+ * 表格实例方法
+ */
+export interface TableIns {
+    clearSelection: () => void;
+    getSelectionRows: () => DataItem[] | undefined;
+    toggleRowSelection: (row: DataItem, selected?: boolean) => void;
+    toggleAllSelection: () => void;
+    toggleRowExpansion: (row: DataItem, expanded?: boolean) => void;
+    setCurrentRow: (row?: DataItem | null) => void;
+    clearSort: () => void;
+    clearFilter: (columnKeys?: string[]) => void;
+    doLayout: () => void;
+    sort: (prop: string, order: string) => void;
+    scrollTo: (options: number | ScrollToOptions, yCoord?: number | undefined) => void;
+    setScrollTop: (top?: number) => void;
+    setScrollLeft: (left?: number) => void;
+}
 /**
  * 国际化
  */

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

@@ -2,7 +2,19 @@ import type { SetupContext } from 'vue';
 import type { ElTableInstance } from '../ele-app/types';
 import type { PaginationProps } from '../ele-pagination/props';
 import type { tableEmits } from './props';
-import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, ReloadDataResult, TableSize, ColItem, CacheResult, ProProps } from './types';
+import type { DataItem, Column, Columns, Sorter, Orders, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, DatasourceResult, ResponseResult, ReloadDataResult, TableSize, ColItem, CacheResult, ProProps, TreeProps, TableCurrent, TableIns, TableState } from './types';
+/**
+ * 合并复合属性
+ * @param props 属性
+ * @param globalProps 全局属性
+ */
+export declare function mergeProps<T extends Record<keyof any, any>>(props?: ProProps<T> | null, globalProps?: ProProps<T> | null): ProProps<T>;
+/**
+ * 获取数据某字段值
+ * @param data 数据
+ * @param field 字段, 可嵌套a.b.c
+ */
+export declare function getValue<T>(data: unknown, field?: string | ((d: unknown) => T)): T | undefined;
 /**
  * 获取默认页码
  * @param pagination 分页组件属性
@@ -23,18 +35,24 @@ export declare function getTableLimit(pagination: boolean | TablePagination | un
  * @param pageProps 分页相关的属性
  */
 export declare function getPaginationProps(size: TableSize, pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined, pageProps?: Pick<PaginationProps, 'total' | 'pageSize' | 'currentPage'>): Partial<PaginationProps> | null;
-/**
- * 合并复合属性
- * @param props 属性
- * @param globalProps 全局属性
- */
-export declare function mergeProps<T extends Record<keyof any, any>>(props?: ProProps<T> | null, globalProps?: ProProps<T> | null): ProProps<T>;
 /**
  * 获取是否开启自动修正页码
  * @param pagination 分页组件属性
  * @param globalPagination 全局配置分页组件属性
  */
 export declare function isAutoAmend(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): boolean;
+/**
+ * 获取表格默认尺寸
+ * @param cacheKey 本地缓存的键名
+ * @param size 表格尺寸
+ * @param globalSize 全局配置尺寸
+ */
+export declare function getTableSize(cacheKey?: string, size?: TableSize, globalSize?: TableSize): TableSize;
+/**
+ * 获取默认筛选条件
+ * @param columns 表格的列
+ */
+export declare function getDefaultFilter(columns?: Columns): Filter;
 /**
  * 获取请求参数名称
  * @param globalRequest 全局配置
@@ -43,28 +61,43 @@ export declare function isAutoAmend(pagination: boolean | TablePagination | unde
 export declare function getRequestName(globalRequest?: RequestOption, request?: RequestOption): RequestOption;
 /**
  * 获取响应参数名称
- * @param globalRequest 全局配置
- * @param request 当前配置
+ * @param globalRequest 全局响应参数配置
+ * @param request 响应参数配置
  */
 export declare function getResponseName(globalResponse?: ResponseOption, response?: ResponseOption): ResponseOption;
 /**
- * 获取表格默认尺寸
- * @param cacheKey 本地缓存的键名
- * @param size 表格尺寸
- * @param globalSize 全局配置尺寸
+ * 获取排序方式封装
+ * @param sorter 排序方式
  */
-export declare function getTableSize(cacheKey?: string, size?: TableSize, globalSize?: TableSize): TableSize;
+export declare function getOrderItems(sorter?: Sorter): OrderItem[];
 /**
- * 获取数据某字段值
- * @param data 数据
- * @param field 字段, 可嵌套a.b.c
+ * 生成请求的排序参数
+ * @param sorter 排序方式
+ * @param request 请求参数配置
+ * @param globalRequest 全局请求参数配置
  */
-export declare function getValue<T>(data: unknown, field?: string | ((d: unknown) => T)): T | undefined;
+export declare function getRequestOrders(sorter?: Sorter, request?: RequestOption, globalRequest?: RequestOption): Orders;
 /**
- * 获取排序方式封装
- * @param sorter 排序方式
+ * 生成请求的筛选参数
+ * @param filter 筛选条件
  */
-export declare function getOrderItems(sorter: Sorter): OrderItem[];
+export declare function getRequestFilters(filter?: Filter): Filters;
+/**
+ * 获取数据源请求结果
+ * @param data 数据源请求的原始数据
+ * @param response 响应参数配置
+ * @param globalResponse 全局响应参数配置
+ * @param lazy 表格是否开启懒加载
+ * @param treeOpt 树形表格字段名配置
+ */
+export declare function getResponseResult(data: DatasourceResult, response?: ResponseOption, globalResponse?: ResponseOption, lazy?: boolean, treeOpt?: TreeProps): ResponseResult;
+/**
+ * 树形懒加载时数据增加可展开的字段标识
+ * @param data 请求数据
+ * @param lazy 表格是否开启懒加载
+ * @param treeProps 树形表格字段名配置
+ */
+export declare function getResponseData(data?: DataItem[], lazy?: boolean, treeProps?: TreeProps): DataItem[] | undefined;
 /**
  * 前端分页排序
  * @param datasource 数据源
@@ -72,24 +105,13 @@ export declare function getOrderItems(sorter: Sorter): OrderItem[];
  * @param page 页码
  * @param limit 每页数量
  */
-export declare function reloadData(datasource: DataItem[], sorter: Sorter, page?: number, limit?: number): ReloadDataResult;
+export declare function reloadData(datasource: DataItem[], sorter?: Sorter, page?: number, limit?: number): ReloadDataResult;
 /**
  * 排序数据
  * @param datasource 数据源
  * @param sorter 排序方式
  */
-export declare function sortData(datasource: DataItem[], sorter: Sorter): DataItem[];
-/**
- * 生成请求的筛选参数
- * @param filter 筛选条件
- */
-export declare function getRequestFilters(filter: Filter): Filters;
-/**
- * 判断选中的数据是否改变
- * @param rows 选中的数据
- * @param selections 当前选中的数据
- */
-export declare function selectionIsChange(rows: DataItem[], selections?: DataItem[]): boolean;
+export declare function sortData(datasource: DataItem[], sorter?: Sorter): DataItem[];
 /**
  * 获取列配置标识
  * @param column 列数据
@@ -122,6 +144,16 @@ export declare function getCheckedColumns(columns: Columns | undefined, cols: Co
  * @param cacheKey 缓存的名称
  */
 export declare function getSettingCols(columns?: Columns, untitledText?: string, cacheKey?: string): CacheResult;
+/**
+ * 获取列配置数据
+ * @param cols 列配置
+ */
+export declare function getColsResult(cols: ColItem[]): CacheResult;
+/**
+ * 排序列配置数据
+ * @param cols 列配置数据
+ */
+export declare function sortCols(cols: ColItem[]): ColItem[];
 /**
  * 获取缓存的列配置下拉列表数据
  * @param cacheKey 缓存的名称
@@ -140,6 +172,12 @@ export declare function getSizeCacheKey(cacheKey: string): string;
  * @param cacheKey 缓存的名称
  */
 export declare function getCacheSize(cacheKey?: string): TableSize;
+/**
+ * 判断选中的数据是否改变
+ * @param rows 选中的数据
+ * @param selections 当前选中的数据
+ */
+export declare function selectionIsChange(rows: DataItem[], selections?: DataItem[]): boolean;
 /**
  * 判断行是否被禁用
  * @param row 行数据
@@ -147,25 +185,22 @@ export declare function getCacheSize(cacheKey?: string): TableSize;
  * @param columns 列配置
  */
 export declare function isDisableRow(row: DataItem, index: number, columns?: Columns): boolean;
+/**
+ * 获取表格筛选值
+ * @param tableRef 表格实例
+ */
+export declare function getTableFilter(tableRef?: ElTableInstance): Filter | undefined;
+/**
+ * 获取含表格状态的列配置
+ * @param cols 表格的列
+ * @param data 表格实例数据
+ */
+export declare function getTableState(cols: Columns, data: TableCurrent): TableState;
 /**
  * 表格默认实例方法
  * @param getIns 获取表格实例
  */
-export declare function useTableMethods(getIns: () => ElTableInstance | undefined): {
-    clearSelection: () => void;
-    getSelectionRows: () => DataItem[] | undefined;
-    toggleRowSelection: (row: DataItem, selected?: boolean) => void;
-    toggleAllSelection: () => void;
-    toggleRowExpansion: (row: DataItem, expanded?: boolean) => void;
-    setCurrentRow: (row?: DataItem | null) => void;
-    clearSort: () => void;
-    clearFilter: (columnKeys?: string[]) => void;
-    doLayout: () => void;
-    sort: (prop: string, order: string) => void;
-    scrollTo: (options: number | ScrollToOptions, yCoord?: number | undefined) => void;
-    setScrollTop: (top?: number) => void;
-    setScrollLeft: (left?: number) => void;
-};
+export declare function useTableMethods(getIns: () => ElTableInstance | undefined): TableIns;
 /**
  * 表格默认事件
  * @param emit 事件触发对象