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

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

@@ -0,0 +1,192 @@
+import { defineComponent, ref, computed, watch, nextTick, h } from "vue";
+import { ElTable } from "element-plus";
+import { pick, eachTree } from "../utils/core";
+import { useEmits, useMethods, useState, getGlobalTooltipProps, getStateCols, getBodyRowClass, getHeadRowClass, isDisableRow, getTableFilter, getCols, getEmptySlot, getValue } from "./util";
+import { dataTableProps, dataTableEmits, tablePropKeys } from "./props";
+const index = defineComponent({
+  name: "EleDataTable",
+  props: dataTableProps,
+  emits: dataTableEmits,
+  setup(props, { emit, slots, expose }) {
+    const events = useEmits(emit);
+    const methods = useMethods(() => tableRef.value);
+    const {
+      getSorter,
+      setSorter,
+      getFilter,
+      setFilter,
+      getSelectionNoChange,
+      setSelectionNoChange
+    } = useState(props.defaultSort);
+    const tableRef = ref(null);
+    const tableCols = ref(props.columns ?? []);
+    const tableOverflowTooltip = computed(() => {
+      return getGlobalTooltipProps(
+        props.showOverflowTooltip,
+        props.tooltipEffect,
+        props.tooltipOptions
+      );
+    });
+    watch(
+      () => props.columns,
+      (columns) => {
+        if (!columns) {
+          tableCols.value = [];
+          return;
+        }
+        const { cols, sorter } = getStateCols(
+          columns,
+          getSorter(),
+          getFilter()
+        );
+        tableCols.value = cols;
+        nextTick(() => {
+          methods.doLayout();
+          if (sorter) {
+            methods.sort(sorter.prop, sorter.order || "ascending");
+          }
+        });
+      },
+      { deep: true }
+    );
+    const clearSort = () => {
+      methods.clearSort();
+      setSorter({});
+    };
+    const setSelectedRows = (rows) => {
+      if (rows == null) {
+        return;
+      }
+      setSelectionNoChange(true);
+      methods.clearSelection();
+      rows.forEach((d) => {
+        methods.toggleRowSelection(d, true);
+      });
+      setSelectionNoChange(false);
+      events.onSelectionChange(rows);
+    };
+    const setSelectedRowKeys = (keys) => {
+      if (!keys || !props.rowKey) {
+        return;
+      }
+      const rows = props.data.filter(
+        (d) => keys.some((v) => v === getValue(d, props.rowKey))
+      );
+      setSelectedRows(rows);
+    };
+    const toggleRowExpansionAll = (expanded) => {
+      var _a;
+      const childKey = ((_a = props.treeProps) == null ? void 0 : _a.children) || "children";
+      eachTree(
+        props.data,
+        (d) => {
+          var _a2;
+          if ((_a2 = d[childKey]) == null ? void 0 : _a2.length) {
+            methods.toggleRowExpansion(d, expanded);
+          }
+        },
+        childKey
+      );
+    };
+    const exposeValue = {
+      ...methods,
+      clearSort,
+      setSelectedRows,
+      setSelectedRowKeys,
+      toggleRowExpansionAll,
+      tableRef
+    };
+    expose(exposeValue);
+    return () => {
+      return h(
+        ElTable,
+        {
+          ...pick(props, tablePropKeys),
+          ...events,
+          ref: tableRef,
+          class: [
+            "ele-data-table",
+            { "is-sticky": props.sticky },
+            { "hide-bottom-line": !props.bottomLine }
+          ],
+          emptyText: props.errorText || props.emptyText,
+          rowClassName: (param) => {
+            return getBodyRowClass(props.rowClassName, param);
+          },
+          headerRowClassName: (param) => {
+            return getHeadRowClass(
+              props.headerRowClassName,
+              param,
+              props.headerEllipsis
+            );
+          },
+          onRowClick: (row, column, event) => {
+            if (props.rowClickChecked && !isDisableRow(row, props.data.indexOf(row), props.columns)) {
+              const selections = methods.getSelectionRows();
+              if (props.rowClickChecked === "smart" && selections != null && selections.length === 1) {
+                methods.setSelectedRows([row]);
+              } else {
+                methods.toggleRowSelection(row);
+              }
+            }
+            events.onRowClick(row, column, event);
+          },
+          onHeaderClick: (column, e) => {
+            if (column.sortable && column.filters) {
+              const el = e.currentTarget;
+              if (el) {
+                const caretEl = el.querySelector(".caret-wrapper");
+                if (caretEl) {
+                  caretEl.dispatchEvent(new MouseEvent("click"));
+                }
+              }
+            }
+            events.onHeaderClick(column, e);
+          },
+          onSelectionChange: (selection) => {
+            if (!getSelectionNoChange()) {
+              events.onSelectionChange(selection);
+            }
+          },
+          onSortChange: (sorter) => {
+            const currentSorter = getSorter();
+            if (currentSorter && sorter.prop === currentSorter.prop && sorter.order === currentSorter.order) {
+              return;
+            }
+            setSorter(sorter);
+            events.onSortChange(getSorter());
+          },
+          onFilterChange: (filter) => {
+            setFilter(getTableFilter(tableRef.value) ?? filter);
+            events.onFilterChange(getFilter());
+          },
+          // 移除提示组件相关属性
+          showOverflowTooltip: void 0,
+          tooltipOptions: void 0,
+          tooltipEffect: void 0
+        },
+        {
+          default: () => {
+            return getCols(
+              tableCols.value,
+              props.pageIndex,
+              slots,
+              props.slotNormalize,
+              tableOverflowTooltip.value
+            );
+          },
+          append: slots.append,
+          empty: getEmptySlot(
+            slots,
+            props.emptyProps,
+            props.emptyText,
+            props.errorText
+          )
+        }
+      );
+    };
+  }
+});
+export {
+  index as default
+};

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

@@ -0,0 +1,256 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { DataItem, Column, Columns, Sorter, Filter, TableEmptyProps, RowClickChecked } from './types';
+declare const normalizeProps: Omit<{
+    data: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    size: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    width: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stripe: BooleanConstructor;
+    border: BooleanConstructor;
+    rowKey: PropType<string | ((row: any) => string) | undefined>;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: PropType<import("element-plus/es/components/table/src/table/defaults").SummaryMethod<any> | undefined>;
+    rowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    rowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    cellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    cellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    headerRowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    headerRowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    headerCellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    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" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    spanMethod: PropType<((data: {
+        row: any;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined) | undefined>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: PropType<{
+            hasChildren?: string | undefined;
+            children?: string | undefined;
+        } | undefined>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+        };
+    };
+    lazy: BooleanConstructor;
+    load: PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+    style: {
+        type: PropType<import("vue").CSSProperties>;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    tableLayout: {
+        type: PropType<"auto" | "fixed">;
+        default: string;
+    };
+    scrollbarAlwaysOn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexible: BooleanConstructor;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+}, "style">;
+/**
+ * 属性
+ */
+export declare const dataTableProps: {
+    stripe: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /** 列配置 */
+    columns: {
+        type: PropType<Columns>;
+        required: boolean;
+    };
+    /** 起始编号 */
+    pageIndex: NumberConstructor;
+    /** 空数据时显示的错误文本 */
+    errorText: StringConstructor;
+    /** 表头内容超出省略 */
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 插槽不渲染非正常的调用 */
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 设置粘性头部 */
+    sticky: BooleanConstructor;
+    /** 是否显示下边框线 */
+    bottomLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 空组件属性 */
+    emptyProps: {
+        type: PropType<TableEmptyProps>;
+        default: () => null;
+    };
+    /** 多选时行点击选中 */
+    rowClickChecked: PropType<RowClickChecked>;
+    size: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    lazy: BooleanConstructor;
+    rowKey: PropType<string | ((row: any) => string) | undefined>;
+    data: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    scrollbarAlwaysOn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: PropType<import("element-plus/es/components/table/src/table/defaults").SummaryMethod<any> | undefined>;
+    rowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    rowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    cellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    cellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    headerRowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    headerRowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    headerCellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    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" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    spanMethod: PropType<((data: {
+        row: any;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined) | undefined>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: PropType<{
+            hasChildren?: string | undefined;
+            children?: string | undefined;
+        } | undefined>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+        };
+    };
+    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">;
+        default: string;
+    };
+    flexible: BooleanConstructor;
+};
+export type DataTableProps = ExtractPropTypes<typeof dataTableProps>;
+/**
+ * 事件
+ */
+export declare const dataTableEmits: {
+    select: (_selection: DataItem[], _row: DataItem) => boolean;
+    selectAll: (_selection: DataItem[]) => boolean;
+    selectionChange: (_selection: DataItem[]) => boolean;
+    cellMouseEnter: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellMouseLeave: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellClick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellDblclick: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellContextmenu: (_row: DataItem, _column: Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    rowClick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowContextmenu: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    rowDblclick: (_row: DataItem, _column: Column, _e: MouseEvent) => boolean;
+    headerClick: (_column: Column, _e: MouseEvent) => boolean;
+    headerContextmenu: (_column: Column, _e: MouseEvent) => boolean;
+    sortChange: (_sorter: Sorter) => boolean;
+    filterChange: (_filter: Filter) => boolean;
+    currentChange: (_current?: DataItem | null, _old?: DataItem | null) => boolean;
+    headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
+    expandChange: (_row: DataItem, _expanded: boolean) => boolean;
+};
+/**
+ * 表格组件属性名
+ */
+export type TablePropKeys = Array<keyof typeof normalizeProps>;
+export type DataTablePropKeys = Array<keyof typeof dataTableProps>;
+export declare const tablePropKeys: TablePropKeys;
+export declare const dataTablePropKeys: DataTableProps;
+export {};

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

@@ -0,0 +1,79 @@
+import elTableProps from "element-plus/es/components/table/src/table/defaults";
+import { omit } from "../utils/core";
+const normalizeProps = omit(elTableProps, ["style"]);
+const dataTableProps = {
+  ...normalizeProps,
+  stripe: {
+    type: Boolean,
+    default: null
+  },
+  border: {
+    type: Boolean,
+    default: null
+  },
+  /** 列配置 */
+  columns: {
+    type: Array,
+    required: true
+  },
+  /** 起始编号 */
+  pageIndex: Number,
+  /** 空数据时显示的错误文本 */
+  errorText: String,
+  /** 表头内容超出省略 */
+  headerEllipsis: {
+    type: Boolean,
+    default: true
+  },
+  /** 插槽不渲染非正常的调用 */
+  slotNormalize: {
+    type: Boolean,
+    default: true
+  },
+  /** 设置粘性头部 */
+  sticky: Boolean,
+  /** 是否显示下边框线 */
+  bottomLine: {
+    type: Boolean,
+    default: true
+  },
+  /** 空组件属性 */
+  emptyProps: {
+    type: [Boolean, Object],
+    default: () => {
+      return null;
+    }
+  },
+  /** 多选时行点击选中 */
+  rowClickChecked: [Boolean, String]
+};
+const dataTableEmits = {
+  select: (_selection, _row) => true,
+  selectAll: (_selection) => true,
+  selectionChange: (_selection) => true,
+  cellMouseEnter: (_row, _column, _cell, _e) => true,
+  cellMouseLeave: (_row, _column, _cell, _e) => true,
+  cellClick: (_row, _column, _cell, _e) => true,
+  cellDblclick: (_row, _column, _cell, _e) => true,
+  cellContextmenu: (_row, _column, _cell, _e) => true,
+  rowClick: (_row, _column, _e) => true,
+  rowContextmenu: (_row, _column, _e) => true,
+  rowDblclick: (_row, _column, _e) => true,
+  headerClick: (_column, _e) => true,
+  headerContextmenu: (_column, _e) => true,
+  sortChange: (_sorter) => true,
+  filterChange: (_filter) => true,
+  currentChange: (_current, _old) => true,
+  headerDragend: (_width, _old, _column, _e) => true,
+  expandChange: (_row, _expanded) => true
+};
+const tablePropKeys = Object.keys(normalizeProps);
+const dataTablePropKeys = Object.keys(
+  dataTableProps
+);
+export {
+  dataTableEmits,
+  dataTablePropKeys,
+  dataTableProps,
+  tablePropKeys
+};

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

@@ -0,0 +1,72 @@
+@use '../../style/util.scss' as *;
+
+/* 数据表格主题变量 */
+@mixin set-data-table-var($var) {
+  .ele-data-table {
+    @include set-ele-var('table', $var);
+  }
+}
+
+/* 表格原始样式变量修改 */
+@mixin table-var-style($selector) {
+  #{$selector} {
+    $left-shadow: eleVar('table', 'fixed-left-shadow');
+    $right-shadow: eleVar('table', 'fixed-right-shadow');
+    #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
+    #{elVarName('table', 'text-color')}: eleVar('table', 'color');
+    #{elVarName('table', 'fixed-left-column')}: #{$left-shadow};
+    #{elVarName('table', 'fixed-right-column')}: #{$right-shadow};
+  }
+}
+
+/* 设置单元格圆角 */
+@mixin data-table-radius($radius) {
+  & > .el-table__inner-wrapper > .el-table__header-wrapper {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+
+  & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+}
+
+/* 空状态样式 */
+@mixin table-empty-style() {
+  .ele-table-empty {
+    padding: 58px 0;
+    line-height: 1;
+
+    .el-empty__description {
+      margin-top: 8px;
+
+      p {
+        color: elVar('text-color', 'placeholder');
+      }
+    }
+  }
+}
+
+/* 单元格内组件样式修改 */
+@mixin table-common-style() {
+  /* 表单组件 */
+  .el-checkbox,
+  .el-switch {
+    height: auto;
+  }
+
+  /* Link */
+  .el-link {
+    display: inline;
+    font-size: inherit;
+
+    & > .el-link__inner {
+      display: inline;
+    }
+
+    & > .el-icon {
+      vertical-align: -1.7px;
+    }
+  }
+}

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

@@ -0,0 +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';