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

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

@@ -11,14 +11,13 @@ const index = vue.defineComponent({
   setup(props$1, { emit, slots, expose }) {
     const events = util.useEmits(emit);
     const methods = util.useMethods(() => tableRef.value);
-    const {
-      getSorter,
-      setSorter,
-      getFilter,
-      setFilter,
-      getSelectionNoChange,
-      setSelectionNoChange
-    } = util.useState(props$1.defaultSort);
+    const tableState = {
+      sorter: props$1.defaultSort,
+      key: null,
+      checkedKeys: [],
+      checked: [],
+      reserveChecked: util.isReserveChecked(props$1.columns)
+    };
     const tableRef = vue.ref(null);
     const tableCols = vue.ref(props$1.columns ?? []);
     const tableOverflowTooltip = vue.computed(() => {
@@ -28,73 +27,252 @@ const index = vue.defineComponent({
         props$1.tooltipOptions
       );
     });
-    vue.watch(
-      () => props$1.columns,
-      (columns) => {
-        if (!columns) {
-          tableCols.value = [];
-          return;
-        }
-        const { cols, sorter } = util.getStateCols(
-          columns,
-          getSorter(),
-          getFilter()
-        );
-        tableCols.value = cols;
-        vue.nextTick(() => {
-          methods.doLayout();
-          if (sorter) {
-            methods.sort(sorter.prop, sorter.order || "ascending");
-          }
-        });
-      },
-      { deep: true }
-    );
+    const childKey = vue.computed(() => {
+      var _a;
+      return ((_a = props$1.treeProps) == null ? void 0 : _a.children) || "children";
+    });
     const clearSort = () => {
       methods.clearSort();
-      setSorter({});
+      tableState.sorter = {};
+    };
+    const clearSelection = () => {
+      updateCheckedState([]);
+    };
+    const toggleRowSelection = (row, selected) => {
+      methods.toggleRowSelection(row, selected);
+      const selection = methods.getSelectionRows() || [];
+      updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
+    };
+    const setCurrentRow = (row) => {
+      updateSelectedState(util.getValue(row, props$1.rowKey), row);
+    };
+    const setCurrentRowKey = (key) => {
+      updateSelectedState(key);
+    };
+    const getCurrentRow = () => {
+      return tableState.row;
     };
     const setSelectedRows = (rows) => {
-      if (rows == null) {
-        return;
+      if (rows) {
+        updateCheckedState(util.getRowKeys(rows, props$1.rowKey), rows, !!rows.length);
       }
-      setSelectionNoChange(true);
-      methods.clearSelection();
-      rows.forEach((d) => {
-        methods.toggleRowSelection(d, true);
-      });
-      setSelectionNoChange(false);
-      events.onSelectionChange(rows);
     };
     const setSelectedRowKeys = (keys) => {
-      if (!keys || !props$1.rowKey) {
-        return;
+      if (keys) {
+        updateCheckedState(keys);
       }
-      const rows = props$1.data.filter(
-        (d) => keys.some((v) => v === util.getValue(d, props$1.rowKey))
-      );
-      setSelectedRows(rows);
     };
     const toggleRowExpansionAll = (expanded) => {
-      var _a;
-      const childKey = ((_a = props$1.treeProps) == null ? void 0 : _a.children) || "children";
       core.eachTree(
         props$1.data,
-        (d) => {
-          var _a2;
-          if ((_a2 = d[childKey]) == null ? void 0 : _a2.length) {
-            methods.toggleRowExpansion(d, expanded);
+        (row) => {
+          var _a;
+          if ((_a = row[childKey.value]) == null ? void 0 : _a.length) {
+            methods.toggleRowExpansion(row, expanded);
           }
         },
-        childKey
+        childKey.value
       );
     };
+    const updateSelectedState = (key, item) => {
+      if (!util.valueIsChanged(tableState.key, key)) {
+        if (key != null && item != null) {
+          if (tableState.row !== item) {
+            tableState.row = item;
+            events.onCurrentChange(item, tableState.oldRow);
+          }
+          methods.setCurrentRow(item);
+        }
+        return;
+      }
+      if (key != null) {
+        const row = util.getRowByKey(key, props$1.data, props$1.rowKey, childKey.value);
+        if (row != null || props$1.reserveCurrent) {
+          tableState.oldRow = tableState.row;
+          tableState.row = row || item || void 0;
+          if (tableState.row == null && props$1.cacheData != null) {
+            tableState.row = util.getRowByKey(
+              key,
+              props$1.cacheData,
+              props$1.rowKey,
+              childKey.value
+            );
+          }
+          tableState.key = key;
+          methods.setCurrentRow(row);
+          updateCurrentRowKey(key);
+          events.onCurrentChange(tableState.row, tableState.oldRow);
+          return;
+        }
+      }
+      if (tableState.key != null) {
+        tableState.oldRow = tableState.row;
+        tableState.row = void 0;
+        tableState.key = null;
+        methods.setCurrentRow(null);
+        updateCurrentRowKey();
+        events.onCurrentChange(void 0, tableState.oldRow);
+      }
+    };
+    const updateCheckedState = (keys, items, force) => {
+      if (!force && !util.arrayIsChanged(tableState.checkedKeys, keys)) {
+        return;
+      }
+      const [dataKeys, list] = util.getKeysAndList(
+        props$1.data,
+        props$1.rowKey,
+        childKey.value
+      );
+      const [cacheKeys, cacheList] = util.getKeysAndList(
+        props$1.cacheData,
+        props$1.rowKey,
+        childKey.value
+      );
+      const itemKeys = items ? items.map((d) => util.getValue(d, props$1.rowKey)) : [];
+      const oldKeys = tableState.checked.map((d) => util.getValue(d, props$1.rowKey));
+      const checkedKeys = [];
+      const checked = [];
+      keys.forEach((key) => {
+        const index2 = dataKeys.indexOf(key);
+        if (index2 !== -1) {
+          checkedKeys.push(key);
+          checked.push(list[index2]);
+        } else if (tableState.reserveChecked) {
+          checkedKeys.push(key);
+          if (items != null) {
+            const tIndex = itemKeys.indexOf(key);
+            if (tIndex !== -1 && !items[tIndex]._isMock) {
+              checked.push(items[tIndex]);
+              return;
+            }
+          }
+          if (props$1.cacheData != null) {
+            const i = cacheKeys.indexOf(key);
+            if (i !== -1) {
+              checked.push(cacheList[i]);
+              return;
+            }
+          }
+          const oIndex = oldKeys.indexOf(key);
+          if (oIndex !== -1) {
+            checked.push(tableState.checked[oIndex]);
+            return;
+          }
+          if (typeof props$1.rowKey === "string") {
+            checked.push({ [props$1.rowKey]: key, _isMock: true });
+          }
+        }
+      });
+      const isChanged = util.arrayIsChanged(tableState.checked, checked);
+      tableState.checked = checked;
+      tableState.checkedKeys = checkedKeys;
+      if (isChanged) {
+        methods.clearSelection();
+        checked.forEach((row) => {
+          methods.toggleRowSelection(row, true);
+        });
+      }
+      updateSelectedRowKeys(checkedKeys);
+      if (isChanged) {
+        events.onSelectionChange(checked);
+      }
+    };
+    const updateSelectedAndChecked = () => {
+      const key = tableState.key;
+      if (key != null) {
+        const row = util.getRowByKey(key, props$1.data, props$1.rowKey, childKey.value);
+        if (row != null) {
+          updateSelectedState(key, row);
+        } else if (!props$1.reserveCurrent) {
+          updateSelectedState(null);
+        } else if (props$1.cacheData != null) {
+          const temp = util.getRowByKey(
+            key,
+            props$1.cacheData,
+            props$1.rowKey,
+            childKey.value
+          );
+          if (temp != null) {
+            updateSelectedState(key, temp);
+          }
+        }
+      }
+      if (tableState.checkedKeys.length) {
+        updateCheckedState(tableState.checkedKeys, void 0, true);
+      }
+    };
+    const updateCurrentRowKey = (key) => {
+      if (util.valueIsChanged(props$1.currentRowKey, key)) {
+        events["onUpdate:currentRowKey"](key);
+      }
+    };
+    const updateSelectedRowKeys = (keys) => {
+      const selected = props$1.selectedRowKeys || [];
+      if (util.arrayIsChanged(selected, keys)) {
+        events["onUpdate:selectedRowKeys"](keys);
+      }
+    };
+    vue.watch(
+      () => props$1.columns,
+      (columns) => {
+        tableState.reserveChecked = util.isReserveChecked(columns);
+        if (!columns) {
+          tableCols.value = [];
+        } else {
+          const { cols, sorter } = util.getStateCols(
+            columns,
+            tableState.sorter,
+            tableState.filter
+          );
+          tableCols.value = cols;
+          vue.nextTick(() => {
+            methods.doLayout();
+            if (sorter) {
+              methods.sort(sorter.prop, sorter.order || "ascending");
+            }
+          });
+        }
+      },
+      { deep: true }
+    );
+    vue.watch([() => props$1.data, () => props$1.cacheData], () => {
+      vue.nextTick(() => {
+        updateSelectedAndChecked();
+      });
+    });
+    vue.watch(
+      () => props$1.currentRowKey,
+      (key) => {
+        updateSelectedState(key);
+      }
+    );
+    vue.watch(
+      () => props$1.selectedRowKeys,
+      (selectedRowKeys) => {
+        updateCheckedState(selectedRowKeys || []);
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      if (props$1.currentRowKey != null) {
+        updateSelectedState(props$1.currentRowKey);
+      }
+      if (props$1.selectedRowKeys != null && props$1.selectedRowKeys.length) {
+        updateCheckedState(props$1.selectedRowKeys);
+      }
+    });
     const exposeValue = {
       ...methods,
       clearSort,
+      clearSelection,
+      toggleRowSelection,
+      setCurrentRow,
+      setCurrentRowKey,
+      getCurrentRow,
       setSelectedRows,
       setSelectedRowKeys,
       toggleRowExpansionAll,
+      updateSelectedAndChecked,
       tableRef
     };
     expose(exposeValue);
@@ -103,13 +281,17 @@ const index = vue.defineComponent({
         elementPlus.ElTable,
         {
           ...core.pick(props$1, props.tablePropKeys),
-          ...events,
+          ...core.omit(events, [
+            "onUpdate:currentRowKey",
+            "onUpdate:selectedRowKeys"
+          ]),
           ref: tableRef,
           class: [
             "ele-data-table",
             { "is-sticky": props$1.sticky },
             { "hide-bottom-line": !props$1.bottomLine }
           ],
+          currentRowKey: void 0,
           emptyText: props$1.errorText || props$1.emptyText,
           rowClassName: (param) => {
             return util.getBodyRowClass(props$1.rowClassName, param);
@@ -124,10 +306,11 @@ const index = vue.defineComponent({
           onRowClick: (row, column, event) => {
             if (props$1.rowClickChecked && !util.isDisableRow(row, props$1.data.indexOf(row), props$1.columns)) {
               const selections = methods.getSelectionRows();
-              if (props$1.rowClickChecked === "smart" && selections != null && selections.length === 1) {
-                methods.setSelectedRows([row]);
+              if (props$1.rowClickChecked === "smart" && (!selections || !selections.length || selections.length === 1)) {
+                const key = util.getValue(row, props$1.rowKey);
+                updateCheckedState(key == null ? [] : [key]);
               } else {
-                methods.toggleRowSelection(row);
+                toggleRowSelection(row);
               }
             }
             events.onRowClick(row, column, event);
@@ -137,29 +320,38 @@ const index = vue.defineComponent({
               const el = e.currentTarget;
               if (el) {
                 const caretEl = el.querySelector(".caret-wrapper");
-                if (caretEl) {
-                  caretEl.dispatchEvent(new MouseEvent("click"));
-                }
+                caretEl && caretEl.dispatchEvent(new MouseEvent("click"));
               }
             }
             events.onHeaderClick(column, e);
           },
-          onSelectionChange: (selection) => {
-            if (!getSelectionNoChange()) {
-              events.onSelectionChange(selection);
-            }
-          },
           onSortChange: (sorter) => {
-            const currentSorter = getSorter();
+            const currentSorter = tableState.sorter;
             if (currentSorter && sorter.prop === currentSorter.prop && sorter.order === currentSorter.order) {
               return;
             }
-            setSorter(sorter);
-            events.onSortChange(getSorter());
+            tableState.sorter = sorter;
+            events.onSortChange(sorter);
           },
           onFilterChange: (filter) => {
-            setFilter(util.getTableFilter(tableRef.value) ?? filter);
-            events.onFilterChange(getFilter());
+            tableState.filter = util.getTableFilter(tableRef.value) ?? filter;
+            events.onFilterChange(tableState.filter);
+          },
+          // 重写选中逻辑
+          onCurrentChange: (row, old) => {
+            if (row != null && row !== old) {
+              updateSelectedState(util.getValue(row, props$1.rowKey), row);
+            }
+          },
+          onSelect: (selection, row) => {
+            events.onSelect(selection, row);
+            updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
+          },
+          onSelectAll: (selection) => {
+            updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
+            events.onSelectAll(selection);
+          },
+          onSelectionChange: () => {
           },
           // 移除提示组件相关属性
           showOverflowTooltip: void 0,

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

@@ -1,12 +1,12 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { DataItem, Column, Columns, Sorter, Filter, TableEmptyProps, RowClickChecked } from './types';
+import type { DataKey, 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 type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -137,8 +137,14 @@ export declare const dataTableProps: {
     };
     /** 多选时行点击选中 */
     rowClickChecked: PropType<RowClickChecked>;
+    /** 单选选中是否保留不存在的数据 */
+    reserveCurrent: BooleanConstructor;
+    /** 多选选中行的值 */
+    selectedRowKeys: PropType<DataKey[]>;
+    /** 缓存数据 */
+    cacheData: PropType<DataItem[]>;
     size: {
-        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -165,6 +171,11 @@ export declare const dataTableProps: {
         default: boolean;
     };
     showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    emptyText: StringConstructor;
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
     showHeader: {
         type: BooleanConstructor;
         default: boolean;
@@ -182,7 +193,6 @@ export declare const dataTableProps: {
     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>;
@@ -201,10 +211,6 @@ export declare const dataTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    indent: {
-        type: NumberConstructor;
-        default: number;
-    };
     treeProps: {
         type: PropType<{
             hasChildren?: string | undefined;
@@ -245,6 +251,10 @@ export declare const dataTableEmits: {
     currentChange: (_current?: DataItem | null, _old?: DataItem | null) => boolean;
     headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
+    /** 更新单选选中行的值 */
+    'update:currentRowKey': (_currentRowKey?: DataKey) => boolean;
+    /** 更新多选选中行的值 */
+    'update:selectedRowKeys': (_selectedRowKeys?: DataKey[]) => boolean;
 };
 /**
  * 表格组件属性名

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

@@ -47,7 +47,13 @@ const dataTableProps = {
     }
   },
   /** 多选时行点击选中 */
-  rowClickChecked: [Boolean, String]
+  rowClickChecked: [Boolean, String],
+  /** 单选选中是否保留不存在的数据 */
+  reserveCurrent: Boolean,
+  /** 多选选中行的值 */
+  selectedRowKeys: Array,
+  /** 缓存数据 */
+  cacheData: Array
 };
 const dataTableEmits = {
   select: (_selection, _row) => true,
@@ -67,7 +73,11 @@ const dataTableEmits = {
   filterChange: (_filter) => true,
   currentChange: (_current, _old) => true,
   headerDragend: (_width, _old, _column, _e) => true,
-  expandChange: (_row, _expanded) => true
+  expandChange: (_row, _expanded) => true,
+  /** 更新单选选中行的值 */
+  "update:currentRowKey": (_currentRowKey) => true,
+  /** 更新多选选中行的值 */
+  "update:selectedRowKeys": (_selectedRowKeys) => true
 };
 const tablePropKeys = Object.keys(normalizeProps);
 const dataTablePropKeys = Object.keys(

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

@@ -13,6 +13,10 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
   background: none;
 }
 
+.ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper {
+  z-index: 4;
+}
+
 .ele-data-table {
   /* 单元格背景 */
   & > .el-table__inner-wrapper {
@@ -268,6 +272,7 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
     bottom: 0;
     width: 0;
     border-left: 1px solid eleVar('table', 'border-color');
+    z-index: 5;
   }
 
   &.el-table > .el-table__inner-wrapper::before,
@@ -275,6 +280,7 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
     right: 0;
     height: 0;
     border-top: 1px solid eleVar('table', 'border-color');
+    z-index: 5;
   }
 
   &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
@@ -338,7 +344,6 @@ $ele-expand-path: 'M605.08 512.14L338.35 245.27l51.76-51.68 318.41 318.58L390.09
     & > .el-table__inner-wrapper > .el-table__header-wrapper {
       position: sticky;
       top: eleVar('table', 'sticky-top');
-      z-index: 3;
     }
   }
 }

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

@@ -10,8 +10,10 @@ export type DataKey = string | number;
 export interface DataItem extends Record<keyof any, any> {
     /** 子级数据 */
     children?: DataItem[];
+    /** 是否为模拟数据 */
+    _isMock?: boolean;
     /** 行唯一值 */
-    _rowKey?: DataKey;
+    _rowKey?: DataKey | null;
     /** 行索引 */
     _rowIndex?: number;
     /** 行是否禁用 */
@@ -67,6 +69,35 @@ export type FilterValue = string[] | undefined;
  * 排序方式值
  */
 export type OrderValue = Exclude<Sorter['order'], undefined>;
+/**
+ * 表格状态
+ */
+export interface TableState {
+    /** 当前排序参数 */
+    sorter?: Sorter;
+    /** 当前筛选参数 */
+    filter?: Filter;
+    /** 单选选中值 */
+    key: DataKey | null;
+    /** 单选选中数据 */
+    row?: DataItem;
+    /** 单选上次选中数据 */
+    oldRow?: DataItem;
+    /** 多选选中值 */
+    checkedKeys: DataKey[];
+    /** 多选选中数据 */
+    checked: DataItem[];
+    /** 多选选中是否保留不存在的数据 */
+    reserveChecked: boolean;
+}
+/**
+ * 多选时行点击选中
+ */
+export type RowClickChecked = boolean | 'smart';
+/**
+ * 表格空组件属性
+ */
+export type TableEmptyProps = boolean | ElEmptyProps;
 /**
  * 获取表格实例
  */
@@ -88,25 +119,31 @@ export interface TableMethods {
     scrollTo: (options: number | ScrollToOptions, yCoord?: number) => void;
     setScrollTop: (top?: number) => void;
     setScrollLeft: (left?: number) => void;
-    /** 设置选中数据 */
+    /** 设置单选选中值 */
+    setCurrentRowKey: (key?: DataKey | null) => void;
+    /** 获取单选选中数据 */
+    getCurrentRow: () => DataItem | undefined;
+    /** 设置多选选中数据 */
     setSelectedRows: (rows?: DataItem[]) => void;
-    /** 设置选中数据 */
-    setSelectedRowKeys: (keys?: string[] | number[]) => void;
-    /** 切换所有行的展开状态 */
+    /** 设置多选选中值 */
+    setSelectedRowKeys: (keys?: DataKey[], rows?: DataItem[]) => void;
+    /** 切换所有行展开状态 */
     toggleRowExpansionAll: (expanded?: boolean) => void;
+    /** 更新单选和多选选中 */
+    updateSelectedAndChecked: () => void;
 }
 /**
  * 表格尺寸
  */
 export type TableSize = ElTableProps<DataItem>['size'];
-/**
- * 树表格懒加载回调
- */
-export type ResolveFunction = (data: DataItem[]) => void;
 /**
  * 树表格懒加载方法
  */
 export type TableLoad = ElTableProps<DataItem>['load'];
+/**
+ * 树表格懒加载回调
+ */
+export type ResolveFunction = (data: DataItem[]) => void;
 /**
  * 嵌套数据配置项
  */
@@ -114,17 +151,6 @@ export interface TreeProps {
     hasChildren?: string;
     children?: string;
 }
-/**
- * 表格当前排序和筛选数据
- */
-export interface TableState {
-    /** 当前排序值 */
-    sorter?: Sorter;
-    /** 当前筛选值 */
-    filter?: Filter;
-    /** 是否不触发多选改变事件 */
-    selectionNoChange?: boolean;
-}
 /**
  * 溢出提示组件属性
  */
@@ -181,11 +207,3 @@ export type RowKey = ElTableProps<DataItem>['rowKey'];
  * 控制行是否可选中的方法
  */
 export type RowSelectable = Column['selectable'];
-/**
- * 表格空组件属性
- */
-export type TableEmptyProps = boolean | ElEmptyProps;
-/**
- * 多选时行点击选中
- */
-export type RowClickChecked = boolean | 'smart';