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

package/es/ele-pro-table/components/table-view.d.ts

@@ -5,12 +5,15 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<Columns>;
         required: boolean;
     };
-    loading: BooleanConstructor;
     pageIndex: NumberConstructor;
     headerEllipsis: {
         type: BooleanConstructor;
         default: boolean;
     };
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -136,12 +139,15 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<Columns>;
         required: boolean;
     };
-    loading: BooleanConstructor;
     pageIndex: NumberConstructor;
     headerEllipsis: {
         type: BooleanConstructor;
         default: boolean;
     };
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -248,7 +254,6 @@ declare const _default: import("vue").DefineComponent<{
     onHeaderDragend?: ((_width: number, _old: number, _column: import("../types").Column, _e: MouseEvent) => any) | undefined;
     onExpandChange?: ((_row: import("../types").DataItem, _expanded: boolean) => any) | undefined;
 }, {
-    loading: boolean;
     fit: boolean;
     className: string;
     lazy: boolean;
@@ -269,5 +274,6 @@ declare const _default: import("vue").DefineComponent<{
     scrollbarAlwaysOn: boolean;
     flexible: boolean;
     headerEllipsis: boolean;
+    slotNormalize: boolean;
 }, {}>;
 export default _default;

package/es/ele-pro-table/components/table-view.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, withDirectives, h } from "vue";
-import { ElTable, vLoading, ElTableColumn } from "element-plus";
+import { defineComponent, ref, h } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
 import { pick, omit } from "../../utils/core";
 import { useTableMethods, useTableEvents } from "../util";
 import { tableViewProps, tableEmits, tablePropKeys } from "../props";
@@ -62,14 +62,13 @@ const tableView = defineComponent({
       const nodes = [];
       if (cols) {
         cols.forEach((col) => {
-          const ts = col.slot && getSlot ? getSlot(col.slot) : void 0;
           nodes.push(
             h(
               ElTableColumn,
               {
                 ...omit(col, [
                   "showOverflowTooltip",
-                  "id",
+                  "uid",
                   "slot",
                   "headerSlot",
                   "hideInTable",
@@ -80,11 +79,18 @@ const tableView = defineComponent({
                   col.showOverflowTooltip,
                   props.showOverflowTooltip
                 ),
-                key: col.id,
+                key: col.uid,
                 index: col.index ?? index
               },
               {
-                default: ts ? ts : () => getCols(col.children, index, getSlot),
+                default: (slotProps) => {
+                  const tSlot = getSlot ? getSlot(col.slot) : void 0;
+                  const $index = slotProps == null ? void 0 : slotProps.$index;
+                  if (!tSlot || $index == -1 && props.slotNormalize) {
+                    return getCols(col.children, index, getSlot);
+                  }
+                  return tSlot(slotProps);
+                },
                 header: (slotProps) => {
                   var _a;
                   const title = (_a = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _a.label;
@@ -108,24 +114,21 @@ const tableView = defineComponent({
     const exposeValue = { ...tableIns, tableRef };
     expose(exposeValue);
     return () => {
-      const getSlot = (name) => slots[name];
-      return withDirectives(
-        h(
-          ElTable,
-          {
-            ...pick(props, tablePropKeys),
-            ...tableEvents,
-            ref: tableRef,
-            rowClassName: tableRowClassName,
-            headerRowClassName: tableHeaderRowClassName
-          },
-          {
-            default: () => getCols(props.columns, props.pageIndex, getSlot),
-            append: slots.append,
-            empty: slots.empty
-          }
-        ),
-        [[vLoading, props.loading]]
+      const getSlot = (name) => name ? slots[name] : void 0;
+      return h(
+        ElTable,
+        {
+          ...pick(props, tablePropKeys),
+          ...tableEvents,
+          ref: tableRef,
+          rowClassName: tableRowClassName,
+          headerRowClassName: tableHeaderRowClassName
+        },
+        {
+          default: () => getCols(props.columns, props.pageIndex, getSlot),
+          append: slots.append,
+          empty: slots.empty
+        }
       );
     };
   }

package/es/ele-pro-table/components/tool-column.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     cacheKey: StringConstructor;
 }, {
     data: import("vue").Ref<{
-        id: string;
+        uid: string;
         prop?: string | undefined;
         columnKey?: string | undefined;
         label?: string | undefined;
@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     tooltipContent: import("vue").Ref<string>;
     virtualRef: import("vue").Ref<any>;
     popperClass: import("vue").ComputedRef<string>;
+    updateSortCols: (cols: ColItem[]) => void;
     onCheckedChange: () => void;
     onCheckAllChange: () => void;
     onReset: () => void;

package/es/ele-pro-table/components/tool-column.js

@@ -6,7 +6,7 @@ import EleTooltip from "../../ele-tooltip/index";
 import ElePopover from "../../ele-popover/index";
 import { HolderOutlined, VerticalRightOutlined, VerticalLeftOutlined } from "../../icons";
 import EleTool from "../../ele-tool/index";
-import { getSettingCols, getCheckedColumns, getColsCacheKey } from "../util";
+import { getSettingCols, sortCols, getCheckedColumns, getColsCacheKey } from "../util";
 const _sfc_main = defineComponent({
   name: "ToolColumn",
   components: {
@@ -64,9 +64,13 @@ const _sfc_main = defineComponent({
       }
       return classes.join(" ");
     });
+    const updateSortCols = (cols) => {
+      data.value = sortCols(cols);
+      onSortChange();
+    };
     const onCheckedChange = () => {
       data.value.forEach((d) => {
-        d.checked = checkedIds.value.includes(d.id);
+        d.checked = checkedIds.value.includes(d.uid);
       });
       isChecked.value = data.value.length > 0 && data.value.length === checkedIds.value.length;
       isIndeterminate.value = checkedIds.value.length !== 0 && data.value.length !== checkedIds.value.length;
@@ -81,13 +85,13 @@ const _sfc_main = defineComponent({
     };
     const onCheckAllChange = () => {
       if (isChecked.value) {
-        checkedIds.value = data.value.map((d) => d.id);
+        checkedIds.value = data.value.map((d) => d.uid);
       } else {
         checkedIds.value = [];
       }
       isIndeterminate.value = false;
       data.value.forEach((d) => {
-        d.checked = checkedIds.value.includes(d.id);
+        d.checked = checkedIds.value.includes(d.uid);
       });
       const columns = getCheckedColumns(
         props.columns,
@@ -124,11 +128,18 @@ const _sfc_main = defineComponent({
       emit("update:columns", columns);
     };
     const onItemFixedLeft = (col) => {
-      col.fixed = col.fixed === true || col.fixed === "left" ? false : "left";
+      const cols = [...data.value];
+      const index = cols.findIndex((c) => c.uid === col.uid);
+      const isFixedLeft = col.fixed === true || col.fixed === "left";
+      cols[index].fixed = isFixedLeft ? false : "left";
+      data.value = sortCols(cols);
       onSortChange();
     };
     const onItemFixedRight = (col) => {
-      col.fixed = col.fixed === "right" ? false : "right";
+      const cols = [...data.value];
+      const index = cols.findIndex((c) => c.uid === col.uid);
+      cols[index].fixed = col.fixed === "right" ? false : "right";
+      data.value = sortCols(cols);
       onSortChange();
     };
     const cacheSettingCols = () => {
@@ -177,6 +188,7 @@ const _sfc_main = defineComponent({
       tooltipContent,
       virtualRef,
       popperClass,
+      updateSortCols,
       onCheckedChange,
       onCheckAllChange,
       onReset,
@@ -230,10 +242,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         transition: "el-zoom-in-top",
         popperClass: _ctx.popperClass,
         popperOptions: {
-          modifiers: [
-            { name: "arrow", options: { padding: 20 } },
-            { name: "offset", options: { offset: [20, 10] } }
-          ]
+          modifiers: [{ name: "offset", options: { offset: [20, 10] } }]
         }
       }, {
         reference: withCtx(() => [
@@ -276,19 +285,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           createVNode(_component_ElCheckboxGroup, {
             modelValue: _ctx.checkedIds,
-            "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.checkedIds = $event),
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.checkedIds = $event),
             onChange: _ctx.onCheckedChange
           }, {
             default: withCtx(() => [
               createVNode(_component_VueDraggable, {
-                itemKey: "id",
-                modelValue: _ctx.data,
-                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.data = $event),
+                itemKey: "uid",
                 animation: 300,
+                modelValue: _ctx.data,
                 setData: () => void 0,
-                componentData: { class: "ele-tool-column-body" },
                 handle: ".ele-tool-column-handle",
-                onChange: _ctx.onSortChange
+                componentData: { class: "ele-tool-column-body" },
+                "onUpdate:modelValue": _ctx.updateSortCols
               }, {
                 item: withCtx(({ element: d }) => [
                   createElementVNode("div", {
@@ -306,7 +314,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     ])) : createCommentVNode("", true),
                     createElementVNode("div", _hoisted_3, [
                       createVNode(_component_ElCheckbox, {
-                        label: d.id
+                        label: d.uid
                       }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(d.label), 1)
@@ -349,7 +357,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 ]),
                 _: 1
-              }, 8, ["modelValue", "onChange"])
+              }, 8, ["modelValue", "onUpdate:modelValue"])
             ]),
             _: 1
           }, 8, ["modelValue", "onChange"])

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

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue';
-import type { StyleValue, ElEmptyProps } from '../ele-app/types';
+import type { ElEmptyProps, ComponentProps } from '../ele-app/types';
+import type { LoadingProps } from '../ele-loading/props';
 import type { PaginationProps } from '../ele-pagination/props';
 import type { DataItem, Column, Columns, Sorter, Filter, ReloadFunction, DoneParams, TableTool, TableSize, FetchCallback } from './types';
 import type { TableViewProps } from './props';
@@ -14,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
+    loading: BooleanConstructor;
     datasource: {
         type: import("vue").PropType<import("./types").Datasource>;
         required: boolean;
@@ -51,8 +53,8 @@ declare const _default: import("vue").DefineComponent<{
     maximizedIndex: NumberConstructor;
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     rowClickChecked: import("vue").PropType<import("./types").RowClickChecked>;
-    tableStyle: import("vue").PropType<StyleValue>;
-    footerStyle: import("vue").PropType<StyleValue>;
+    tableStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    footerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     pagination: {
         type: import("vue").PropType<boolean | import("./types").TablePagination>;
         default: () => null;
@@ -62,18 +64,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => null;
     };
     sticky: BooleanConstructor;
-    cacheKey: StringConstructor;
-    locale: import("vue").PropType<Partial<import("./types").TableLocale>>;
-    columns: {
-        type: import("vue").PropType<Columns>;
-        required: boolean;
-    };
-    loading: BooleanConstructor;
-    pageIndex: NumberConstructor;
-    headerEllipsis: {
+    loadingProps: import("vue").PropType<Partial<LoadingProps>>;
+    bottomLine: {
         type: BooleanConstructor;
         default: boolean;
     };
+    cacheKey: StringConstructor;
+    locale: import("vue").PropType<Partial<import("./types").TableLocale>>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -158,6 +155,18 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     flexible: BooleanConstructor;
+    columns: {
+        type: import("vue").PropType<Columns>;
+        required: boolean;
+    };
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     tableEvents: {
         onSelect: (selection: DataItem[], row: DataItem) => void;
@@ -190,9 +199,10 @@ declare const _default: import("vue").DefineComponent<{
     tableIndex: import("vue").ComputedRef<number>;
     paginationProps: import("vue").ComputedRef<Partial<PaginationProps> | null>;
     tableProps: import("vue").ComputedRef<Partial<TableViewProps>>;
-    proTableStyle: import("vue").ComputedRef<StyleValue>;
+    tableZIndex: import("vue").ComputedRef<number | undefined>;
     tableTools: import("vue").ComputedRef<TableTool[]>;
     tableEmptyProps: import("vue").ComputedRef<boolean | ElEmptyProps>;
+    rootProps: import("vue").ComputedRef<ComponentProps<LoadingProps>>;
     tableLoad: (row: DataItem, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: DataItem[]) => void) => void;
     onRefresh: () => void;
     onSizeChange: (size: TableSize) => void;
@@ -207,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
     onCurrentChange: (currentRow?: DataItem, oldCurrentRow?: DataItem) => void;
     reload: ReloadFunction;
     reloadTable: () => void;
+    getTableRef: () => import("../ele-app/types").ElTableInstance | undefined;
     getData: () => DataItem[];
     setData: (data: DataItem[]) => void;
     setSelectedRows: (rows?: DataItem[]) => void;
@@ -262,6 +273,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
+    loading: BooleanConstructor;
     datasource: {
         type: import("vue").PropType<import("./types").Datasource>;
         required: boolean;
@@ -299,8 +311,8 @@ declare const _default: import("vue").DefineComponent<{
     maximizedIndex: NumberConstructor;
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     rowClickChecked: import("vue").PropType<import("./types").RowClickChecked>;
-    tableStyle: import("vue").PropType<StyleValue>;
-    footerStyle: import("vue").PropType<StyleValue>;
+    tableStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    footerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
     pagination: {
         type: import("vue").PropType<boolean | import("./types").TablePagination>;
         default: () => null;
@@ -310,18 +322,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => null;
     };
     sticky: BooleanConstructor;
-    cacheKey: StringConstructor;
-    locale: import("vue").PropType<Partial<import("./types").TableLocale>>;
-    columns: {
-        type: import("vue").PropType<Columns>;
-        required: boolean;
-    };
-    loading: BooleanConstructor;
-    pageIndex: NumberConstructor;
-    headerEllipsis: {
+    loadingProps: import("vue").PropType<Partial<LoadingProps>>;
+    bottomLine: {
         type: BooleanConstructor;
         default: boolean;
     };
+    cacheKey: StringConstructor;
+    locale: import("vue").PropType<Partial<import("./types").TableLocale>>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -406,6 +413,18 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     flexible: BooleanConstructor;
+    columns: {
+        type: import("vue").PropType<Columns>;
+        required: boolean;
+    };
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    slotNormalize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onSelect?: ((_selection: DataItem[], _row: DataItem) => any) | undefined;
     onSortChange?: ((_sorter: Sorter) => any) | undefined;
@@ -453,6 +472,8 @@ declare const _default: import("vue").DefineComponent<{
     tableLayout: "auto" | "fixed";
     scrollbarAlwaysOn: boolean;
     flexible: boolean;
+    headerEllipsis: boolean;
+    slotNormalize: boolean;
     loadOnCreated: boolean;
     loadOnChanged: boolean;
     toolbar: boolean | import("./types").TableToolbar;
@@ -462,6 +483,6 @@ declare const _default: import("vue").DefineComponent<{
     pagination: boolean | import("./types").TablePagination;
     emptyProps: boolean | ElEmptyProps;
     sticky: boolean;
-    headerEllipsis: boolean;
+    bottomLine: boolean;
 }, {}>;
 export default _default;