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

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

@@ -0,0 +1,385 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+$ele-filter-path: 'M 349 838 c 0 17.7 14.2 32 31.8 32 h 262.4 c 17.6 0 31.8 -14.3 31.8 -32 V 642 H 349 v 196 Z M 880.1 154 H 143.9 c -24.5 0 -39.8 26.7 -27.5 48 l 221.3 376 h 348.8 l 221.3 -376 c 12.1 -21.3 -3.2 -48 -27.7 -48 Z' !default;
+$ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09 830.41l-51.68-51.73z' !default;
+
+@include set-data-table-var($ele);
+@include table-var-style('body .ele-data-table.el-table');
+
+/* 原始样式重写 */
+.ele-data-table.el-table,
+.ele-data-table.el-table tr {
+  background: none;
+}
+
+.ele-data-table {
+  /* 单元格背景 */
+  & > .el-table__inner-wrapper {
+    .ele-table-tr {
+      & > td.el-table__cell {
+        background: eleVar('table', 'tr-bg');
+      }
+
+      &.el-table__row--striped > td.el-table__cell {
+        background: eleVar('table', 'even-bg');
+      }
+
+      &:hover > td.el-table__cell,
+      &.hover-row > td.el-table__cell {
+        background: eleVar('table', 'tr-hover-bg');
+      }
+
+      &.current-row > td.el-table__cell {
+        background: eleVar('table', 'tr-active-bg');
+      }
+
+      &.current-row:hover > td.el-table__cell,
+      &.current-row.hover-row > td.el-table__cell {
+        background: eleVar('table', 'tr-active-hover-bg');
+      }
+    }
+
+    & > .el-table__header-wrapper .ele-table-head-tr > th.el-table__cell,
+    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell {
+      background: eleVar('table', 'th-bg');
+    }
+
+    & > .el-table__header-wrapper .ele-table-head-tr {
+      & > .el-table__cell.is-sortable:hover {
+        background: eleVar('table', 'sort-hover-bg');
+      }
+    }
+  }
+
+  /* 表头单元格 */
+  .cell > .ele-cell-title {
+    flex: 1;
+    position: relative;
+    color: eleVar('table', 'th-color');
+    font-weight: eleVar('table', 'th-font-weight');
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .ele-table-head-tr > .el-table__cell {
+    transition: background-color $ele-transition;
+
+    & > .cell {
+      display: flex;
+      align-items: center;
+    }
+
+    &.is-center > .cell {
+      justify-content: center;
+    }
+
+    &.is-right > .cell {
+      justify-content: flex-end;
+    }
+
+    &::after {
+      content: '';
+      width: 0;
+      height: 20px;
+      border-right: 1px solid eleVar('table', 'border-color');
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -10px;
+    }
+  }
+
+  .ele-table-head-tr > .el-table__cell:last-child::after,
+  .ele-table-head-tr > .el-table__cell.el-table-column--selection::after,
+  .ele-table-head-tr > .el-table__cell.el-table__expand-column::after,
+  &.is-scrolling-middle .el-table-fixed-column--left.is-last-column::after,
+  &.is-scrolling-right .el-table-fixed-column--left.is-last-column::after,
+  &.el-table--border .ele-table-head-tr > .el-table__cell::after {
+    display: none;
+  }
+
+  /* 表头单元格省略 */
+  .ele-table-head-tr.is-ellipsis > .el-table__cell > .cell {
+    white-space: nowrap;
+  }
+
+  /* 表头排序图标 */
+  .ele-table-head-tr .caret-wrapper {
+    flex-shrink: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    position: static;
+    margin-left: eleVar('table', 'icon-margin');
+    box-sizing: border-box;
+
+    .sort-caret {
+      position: static;
+      border: eleVar('table', 'sort-size') solid transparent;
+      transition: border-color $ele-transition;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+
+    .ascending {
+      border-bottom-color: eleVar('table', 'icon-color');
+      margin-top: calc(0px - #{eleVar('table', 'sort-size')});
+      margin-bottom: calc(#{eleVar('table', 'sort-space')} / 2);
+    }
+
+    .descending {
+      border-top-color: eleVar('table', 'icon-color');
+      margin-bottom: calc(0px - #{eleVar('table', 'sort-size')});
+      margin-top: calc(#{eleVar('table', 'sort-space')} / 2);
+    }
+  }
+
+  .ele-table-head-tr > .el-table__cell:hover {
+    .sort-caret.ascending {
+      border-bottom-color: eleVar('table', 'icon-hover-color');
+    }
+
+    .sort-caret.descending {
+      border-top-color: eleVar('table', 'icon-hover-color');
+    }
+  }
+
+  .ele-table-head-tr > .el-table__cell.ascending .sort-caret.ascending {
+    border-bottom-color: elVar('color-primary');
+  }
+
+  .ele-table-head-tr > .el-table__cell.descending .sort-caret.descending {
+    border-top-color: elVar('color-primary');
+  }
+
+  /* 表头筛选图标 */
+  .ele-table-head-tr .el-table__column-filter-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: eleVar('table', 'filter-margin');
+    padding: eleVar('table', 'filter-padding');
+    border-radius: eleVar('table', 'icon-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    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);
+
+      & > svg > path {
+        #{'d'}: path($ele-filter-path);
+      }
+    }
+
+    &:hover {
+      background: eleVar('table', 'icon-hover-bg');
+
+      & > .el-icon {
+        color: eleVar('table', 'icon-hover-color');
+      }
+    }
+  }
+
+  .cell.highlight > .el-table__column-filter-trigger > .el-icon {
+    color: elVar('color-primary');
+  }
+
+  /* 行高 */
+  .ele-table-tr > .el-table__cell > .cell,
+  .ele-table-head-tr > .el-table__cell > .cell {
+    line-height: eleVar('table', 'line-height');
+  }
+
+  /* 展开按钮 */
+  .ele-table-tr > .el-table__cell > .cell {
+    & > .el-table__expand-icon {
+      font-size: 16px;
+      align-items: center;
+      justify-content: flex-end;
+      border-radius: eleVar('table', 'icon-radius');
+      transition: (color $ele-transition, background-color $ele-transition);
+      transform: none;
+
+      & > .el-icon {
+        transition: all $ele-transition;
+        font-size: inherit;
+
+        &:not(.is-loading) > svg > path {
+          #{'d'}: path($ele-expand-path);
+        }
+      }
+
+      &:hover {
+        background: eleVar('table', 'icon-hover-bg');
+      }
+    }
+
+    & > .el-table__expand-icon,
+    & > .el-table__indent,
+    & > .el-table__placeholder {
+      height: 17px;
+      display: inline-flex;
+      vertical-align: -3px;
+    }
+
+    & > .el-table__expand-icon,
+    & > .el-table__placeholder {
+      width: 17px;
+      margin: eleVar('table', 'expand-margin');
+    }
+
+    & > .el-table__expand-icon--expanded > .el-icon:not(.is-loading) {
+      transform: rotate(90deg);
+    }
+  }
+
+  /* 展开列 */
+  .ele-table-tr > .el-table__expand-column > .cell > .el-table__expand-icon {
+    margin: 0;
+    justify-content: center;
+  }
+
+  /* 复选框 */
+  .ele-table-head-tr > .el-table-column--selection > .cell,
+  .ele-table-tr > .el-table-column--selection > .cell {
+    height: auto;
+    vertical-align: middle;
+    overflow: visible;
+  }
+
+  .ele-table-tr > .el-table-column--selection {
+    &.is-center > .cell {
+      justify-content: center;
+    }
+
+    &.is-right > .cell {
+      justify-content: flex-end;
+    }
+  }
+
+  /* 边框线 */
+  &.el-table--border::after,
+  &.el-table--border::before {
+    top: 0;
+    bottom: 0;
+    width: 0;
+    border-left: 1px solid eleVar('table', 'border-color');
+  }
+
+  &.el-table > .el-table__inner-wrapper::before,
+  &.el-table--border > .el-table__inner-wrapper::after {
+    right: 0;
+    height: 0;
+    border-top: 1px solid eleVar('table', 'border-color');
+  }
+
+  &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
+    bottom: eleVar('table', 'fix-height');
+    box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
+  }
+
+  & > .el-table__inner-wrapper > .el-table__border-left-patch,
+  &.has-footer:not(.el-table--border) > .el-table__inner-wrapper::before,
+  &.hide-bottom-line > .el-table__inner-wrapper::before {
+    display: none;
+  }
+
+  & > .el-table__inner-wrapper > .el-table__footer-wrapper td.el-table__cell {
+    border-bottom-color: transparent;
+  }
+
+  & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+    margin-top: -1px;
+  }
+
+  &.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;
+    }
+  }
+
+  /* 圆角 */
+  &:not(.el-table--border) {
+    @include data-table-radius(eleVar('table', 'radius'));
+
+    &.el-table--large {
+      @include data-table-radius(eleVar('table', 'lg-radius'));
+    }
+
+    &.el-table--small {
+      @include data-table-radius(eleVar('table', 'sm-radius'));
+    }
+  }
+
+  /* 内部组件 */
+  &.el-table--border > .el-loading-mask {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+  }
+
+  @include table-empty-style();
+
+  .ele-table-tr,
+  .ele-table-head-tr {
+    @include table-common-style();
+  }
+
+  /* 粘性表头 */
+  &.is-sticky.el-table {
+    overflow: visible;
+
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
+      position: sticky;
+      top: eleVar('table', 'sticky-top');
+      z-index: 3;
+    }
+  }
+}
+
+/* 粘性头部适配布局风格 */
+.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');
+  }
+}
+
+.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 {
+      top: eleVar('table', 'maximized-sticky-top');
+    }
+  }
+}
+
+/* Tooltip */
+body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
+  padding: eleVar('tooltip', 'padding');
+
+  &::after {
+    content: '';
+    background: inherit;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+}
+
+.ele-table-tr > .el-table__cell > .cell.el-tooltip {
+  min-width: auto;
+
+  & > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

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

@@ -0,0 +1,191 @@
+import type { Sort } from 'element-plus/es/components/table';
+import type { ElTableProps, ElColumnProps, ElTableInstance, ElEmptyProps } from '../../ele-app/types';
+/**
+ * 数据唯一键
+ */
+export type DataKey = string | number;
+/**
+ * 数据
+ */
+export interface DataItem extends Record<keyof any, any> {
+    /** 子级数据 */
+    children?: DataItem[];
+    /** 行唯一值 */
+    _rowKey?: DataKey;
+    /** 行索引 */
+    _rowIndex?: number;
+    /** 行是否禁用 */
+    _rowDisabled?: boolean;
+    /** 是否是展开行 */
+    _isExpandRow?: boolean;
+    /** 展开行对应的行数据 */
+    _expandParent?: DataItem;
+    /** 展开行对应的行索引 */
+    _expandParantIndex?: number;
+}
+/**
+ * 原始列属性
+ */
+export type TableColumn = Partial<ElColumnProps>;
+/**
+ * 列属性
+ */
+export interface Column extends TableColumn {
+    /** 唯一标识 */
+    uid?: string;
+    /** 插槽名称 */
+    slot?: string;
+    /** 表头插槽名称 */
+    headerSlot?: string;
+    /** 是否隐藏 */
+    hideInTable?: boolean;
+    /** 是否不显示在列配置中 */
+    hideInSetting?: boolean;
+    /** 子级 */
+    children?: Columns;
+}
+/**
+ * 列属性
+ */
+export type Columns = Column[];
+/**
+ * 排序方式
+ */
+export interface Sorter extends Partial<Sort> {
+    /** 列配置 */
+    column?: Column;
+}
+/**
+ * 筛选条件
+ */
+export type Filter = Record<string, FilterValue>;
+/**
+ * 筛选值
+ */
+export type FilterValue = string[] | undefined;
+/**
+ * 排序方式值
+ */
+export type OrderValue = Exclude<Sorter['order'], undefined>;
+/**
+ * 获取表格实例
+ */
+export type GetInstance = () => ElTableInstance | undefined | null;
+/**
+ * 表格实例方法
+ */
+export interface TableMethods {
+    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) => void;
+    setScrollTop: (top?: number) => void;
+    setScrollLeft: (left?: number) => void;
+    /** 设置选中数据 */
+    setSelectedRows: (rows?: DataItem[]) => void;
+    /** 设置选中数据 */
+    setSelectedRowKeys: (keys?: string[] | number[]) => void;
+    /** 切换所有行的展开状态 */
+    toggleRowExpansionAll: (expanded?: boolean) => void;
+}
+/**
+ * 表格尺寸
+ */
+export type TableSize = ElTableProps<DataItem>['size'];
+/**
+ * 树表格懒加载回调
+ */
+export type ResolveFunction = (data: DataItem[]) => void;
+/**
+ * 树表格懒加载方法
+ */
+export type TableLoad = ElTableProps<DataItem>['load'];
+/**
+ * 嵌套数据配置项
+ */
+export interface TreeProps {
+    hasChildren?: string;
+    children?: string;
+}
+/**
+ * 表格当前排序和筛选数据
+ */
+export interface TableState {
+    /** 当前排序值 */
+    sorter?: Sorter;
+    /** 当前筛选值 */
+    filter?: Filter;
+    /** 是否不触发多选改变事件 */
+    selectionNoChange?: boolean;
+}
+/**
+ * 溢出提示组件属性
+ */
+export type ShowOverflowTooltip = Column['showOverflowTooltip'];
+/**
+ * 溢出提示组件主题
+ */
+export type TooltipEffect = ElTableProps<DataItem>['tooltipEffect'];
+/**
+ * 溢出提示组件全局配置
+ */
+export type TooltipOptions = ElTableProps<DataItem>['tooltipOptions'];
+/**
+ * 单元格类名自定义
+ */
+export type CellClass = ElTableProps<DataItem>['cellClassName'];
+/**
+ * 单元格样式自定义
+ */
+export type CellStyle = ElTableProps<DataItem>['cellStyle'];
+/**
+ * 行类名自定义
+ */
+export type RowClass = ElTableProps<DataItem>['rowClassName'];
+/**
+ * 行样式自定义
+ */
+export type RowStyle = ElTableProps<DataItem>['rowStyle'];
+/**
+ * 表头单元格类名自定义
+ */
+export type HeaderCellClass = ElTableProps<DataItem>['headerCellClassName'];
+/**
+ * 表头单元格样式自定义
+ */
+export type HeaderCellStyle = ElTableProps<DataItem>['headerCellStyle'];
+/**
+ * 表头行类名自定义
+ */
+export type HeaderRowClass = ElTableProps<DataItem>['headerRowClassName'];
+/**
+ * 表头行样式自定义
+ */
+export type HeaderRowStyle = ElTableProps<DataItem>['headerRowStyle'];
+/**
+ * 单元格合并方法
+ */
+export type SpanMethod = ElTableProps<DataItem>['spanMethod'];
+/**
+ * 行数据唯一值的字段名
+ */
+export type RowKey = ElTableProps<DataItem>['rowKey'];
+/**
+ * 控制行是否可选中的方法
+ */
+export type RowSelectable = Column['selectable'];
+/**
+ * 表格空组件属性
+ */
+export type TableEmptyProps = boolean | ElEmptyProps;
+/**
+ * 多选时行点击选中
+ */
+export type RowClickChecked = boolean | 'smart';