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

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

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, watch, nextTick, h } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, onMounted, 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 { pick, omit, eachTree } from "../utils/core";
+import { useEmits, useMethods, isReserveChecked, getGlobalTooltipProps, getStateCols, getBodyRowClass, getHeadRowClass, isDisableRow, getValue, getTableFilter, getRowKeys, getCols, getEmptySlot, valueIsChanged, getRowByKey, arrayIsChanged, getKeysAndList } from "./util";
 import { dataTableProps, dataTableEmits, tablePropKeys } from "./props";
 const index = defineComponent({
   name: "EleDataTable",
@@ -10,14 +10,13 @@ const index = defineComponent({
   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 tableState = {
+      sorter: props.defaultSort,
+      key: null,
+      checkedKeys: [],
+      checked: [],
+      reserveChecked: isReserveChecked(props.columns)
+    };
     const tableRef = ref(null);
     const tableCols = ref(props.columns ?? []);
     const tableOverflowTooltip = computed(() => {
@@ -27,73 +26,252 @@ const index = defineComponent({
         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 childKey = computed(() => {
+      var _a;
+      return ((_a = props.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(getRowKeys(selection, props.rowKey), selection);
+    };
+    const setCurrentRow = (row) => {
+      updateSelectedState(getValue(row, props.rowKey), row);
+    };
+    const setCurrentRowKey = (key) => {
+      updateSelectedState(key);
+    };
+    const getCurrentRow = () => {
+      return tableState.row;
     };
     const setSelectedRows = (rows) => {
-      if (rows == null) {
-        return;
+      if (rows) {
+        updateCheckedState(getRowKeys(rows, props.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.rowKey) {
-        return;
+      if (keys) {
+        updateCheckedState(keys);
       }
-      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);
+        (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 (!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 = getRowByKey(key, props.data, props.rowKey, childKey.value);
+        if (row != null || props.reserveCurrent) {
+          tableState.oldRow = tableState.row;
+          tableState.row = row || item || void 0;
+          if (tableState.row == null && props.cacheData != null) {
+            tableState.row = getRowByKey(
+              key,
+              props.cacheData,
+              props.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 && !arrayIsChanged(tableState.checkedKeys, keys)) {
+        return;
+      }
+      const [dataKeys, list] = getKeysAndList(
+        props.data,
+        props.rowKey,
+        childKey.value
+      );
+      const [cacheKeys, cacheList] = getKeysAndList(
+        props.cacheData,
+        props.rowKey,
+        childKey.value
+      );
+      const itemKeys = items ? items.map((d) => getValue(d, props.rowKey)) : [];
+      const oldKeys = tableState.checked.map((d) => getValue(d, props.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.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.rowKey === "string") {
+            checked.push({ [props.rowKey]: key, _isMock: true });
+          }
+        }
+      });
+      const isChanged = 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 = getRowByKey(key, props.data, props.rowKey, childKey.value);
+        if (row != null) {
+          updateSelectedState(key, row);
+        } else if (!props.reserveCurrent) {
+          updateSelectedState(null);
+        } else if (props.cacheData != null) {
+          const temp = getRowByKey(
+            key,
+            props.cacheData,
+            props.rowKey,
+            childKey.value
+          );
+          if (temp != null) {
+            updateSelectedState(key, temp);
+          }
+        }
+      }
+      if (tableState.checkedKeys.length) {
+        updateCheckedState(tableState.checkedKeys, void 0, true);
+      }
+    };
+    const updateCurrentRowKey = (key) => {
+      if (valueIsChanged(props.currentRowKey, key)) {
+        events["onUpdate:currentRowKey"](key);
+      }
+    };
+    const updateSelectedRowKeys = (keys) => {
+      const selected = props.selectedRowKeys || [];
+      if (arrayIsChanged(selected, keys)) {
+        events["onUpdate:selectedRowKeys"](keys);
+      }
+    };
+    watch(
+      () => props.columns,
+      (columns) => {
+        tableState.reserveChecked = isReserveChecked(columns);
+        if (!columns) {
+          tableCols.value = [];
+        } else {
+          const { cols, sorter } = getStateCols(
+            columns,
+            tableState.sorter,
+            tableState.filter
+          );
+          tableCols.value = cols;
+          nextTick(() => {
+            methods.doLayout();
+            if (sorter) {
+              methods.sort(sorter.prop, sorter.order || "ascending");
+            }
+          });
+        }
+      },
+      { deep: true }
+    );
+    watch([() => props.data, () => props.cacheData], () => {
+      nextTick(() => {
+        updateSelectedAndChecked();
+      });
+    });
+    watch(
+      () => props.currentRowKey,
+      (key) => {
+        updateSelectedState(key);
+      }
+    );
+    watch(
+      () => props.selectedRowKeys,
+      (selectedRowKeys) => {
+        updateCheckedState(selectedRowKeys || []);
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      if (props.currentRowKey != null) {
+        updateSelectedState(props.currentRowKey);
+      }
+      if (props.selectedRowKeys != null && props.selectedRowKeys.length) {
+        updateCheckedState(props.selectedRowKeys);
+      }
+    });
     const exposeValue = {
       ...methods,
       clearSort,
+      clearSelection,
+      toggleRowSelection,
+      setCurrentRow,
+      setCurrentRowKey,
+      getCurrentRow,
       setSelectedRows,
       setSelectedRowKeys,
       toggleRowExpansionAll,
+      updateSelectedAndChecked,
       tableRef
     };
     expose(exposeValue);
@@ -102,13 +280,17 @@ const index = defineComponent({
         ElTable,
         {
           ...pick(props, tablePropKeys),
-          ...events,
+          ...omit(events, [
+            "onUpdate:currentRowKey",
+            "onUpdate:selectedRowKeys"
+          ]),
           ref: tableRef,
           class: [
             "ele-data-table",
             { "is-sticky": props.sticky },
             { "hide-bottom-line": !props.bottomLine }
           ],
+          currentRowKey: void 0,
           emptyText: props.errorText || props.emptyText,
           rowClassName: (param) => {
             return getBodyRowClass(props.rowClassName, param);
@@ -123,10 +305,11 @@ const index = defineComponent({
           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]);
+              if (props.rowClickChecked === "smart" && (!selections || !selections.length || selections.length === 1)) {
+                const key = getValue(row, props.rowKey);
+                updateCheckedState(key == null ? [] : [key]);
               } else {
-                methods.toggleRowSelection(row);
+                toggleRowSelection(row);
               }
             }
             events.onRowClick(row, column, event);
@@ -136,29 +319,38 @@ const index = 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(getTableFilter(tableRef.value) ?? filter);
-            events.onFilterChange(getFilter());
+            tableState.filter = getTableFilter(tableRef.value) ?? filter;
+            events.onFilterChange(tableState.filter);
+          },
+          // 重写选中逻辑
+          onCurrentChange: (row, old) => {
+            if (row != null && row !== old) {
+              updateSelectedState(getValue(row, props.rowKey), row);
+            }
+          },
+          onSelect: (selection, row) => {
+            events.onSelect(selection, row);
+            updateCheckedState(getRowKeys(selection, props.rowKey), selection);
+          },
+          onSelectAll: (selection) => {
+            updateCheckedState(getRowKeys(selection, props.rowKey), selection);
+            events.onSelectAll(selection);
+          },
+          onSelectionChange: () => {
           },
           // 移除提示组件相关属性
           showOverflowTooltip: void 0,

package/es/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/es/ele-data-table/props.js

@@ -45,7 +45,13 @@ const dataTableProps = {
     }
   },
   /** 多选时行点击选中 */
-  rowClickChecked: [Boolean, String]
+  rowClickChecked: [Boolean, String],
+  /** 单选选中是否保留不存在的数据 */
+  reserveCurrent: Boolean,
+  /** 多选选中行的值 */
+  selectedRowKeys: Array,
+  /** 缓存数据 */
+  cacheData: Array
 };
 const dataTableEmits = {
   select: (_selection, _row) => true,
@@ -65,7 +71,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/es/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/es/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';