ele-admin-plus 1.1.9-beta.1 → 1.1.9-beta.11

package/es/ele-virtual-table/components/body-cell.js

@@ -3,7 +3,7 @@ import { ElIcon } from "element-plus";
 import { getValue } from "../../ele-data-table/util";
 import { ArrowDown, LoadingDotOutlined } from "../../icons";
 import CellCheckbox from "./cell-checkbox";
-import { CellRender } from "../util";
+import { CellRender, getCellSpan, getIndexValue } from "../util";
 const _sfc_main = defineComponent({
   name: "BodyCell",
   components: {
@@ -14,18 +14,31 @@ const _sfc_main = defineComponent({
     CellRender
   },
   props: {
-    /** 当前列配置 */
-    column: Object,
-    /** 当前列索引 */
-    columnIndex: Number,
-    /** 当前行索引 */
-    rowIndex: Number,
-    /** 当前行数据 */
-    rowData: Object,
-    /** 表格主体列宽 */
-    colSizes: Array,
-    /** 表格尺寸 */
-    tableSize: String,
+    /** 列配置 */
+    column: {
+      type: Object,
+      required: true
+    },
+    /** 列索引 */
+    columnIndex: {
+      type: Number,
+      required: true
+    },
+    /** 行索引 */
+    rowIndex: {
+      type: Number,
+      required: true
+    },
+    /** 行数据 */
+    rowData: {
+      type: Object,
+      required: true
+    },
+    /** 所有列的列宽 */
+    colSizes: {
+      type: Array,
+      required: true
+    },
     /** 单元格类名自定义 */
     bodyCellClass: [String, Function],
     /** 单元格样式自定义 */
@@ -38,13 +51,17 @@ const _sfc_main = defineComponent({
     pageIndex: Number,
     /** 表格行高 */
     rowHeight: Number,
-    /** 树表格展开图标的列 */
-    expandColumnKey: String,
     /** 多选当前行是否选中 */
     isChecked: Boolean,
+    /** 多选当前行是否禁用 */
+    isDisabled: Boolean,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 树表格展开图标的列 */
+    expandColumnKey: String,
     /** 树表格当前行是否有子级 */
     hasChildren: Boolean,
-    /** 当前行缩进 */
+    /** 树表格当前行缩进 */
     rowIndent: String,
     /** 树表格当前行是否折叠 */
     isCollapse: Boolean,
@@ -57,27 +74,23 @@ const _sfc_main = defineComponent({
   },
   emits: {
     /** 多选框选中改变事件 */
-    checkedChange: (_row, _checked) => true,
+    checkedChange: (_checked) => true,
     /** 展开状态改变事件 */
-    expandChange: (_row, _expanded) => true,
+    expandChange: (_expanded) => true,
     /** 点击事件 */
-    click: (_row, _col, _e) => true,
+    click: (_col, _e) => true,
     /** 双击事件 */
-    dblclick: (_row, _col, _e) => true,
+    dblclick: (_col, _e) => true,
     /** 右键事件 */
-    contextmenu: (_row, _col, _e) => true,
+    contextmenu: (_col, _e) => true,
     /** 鼠标移入事件 */
-    mouseenter: (_row, _col, _e) => true,
+    mouseenter: (_col, _e) => true,
     /** 鼠标移出事件 */
-    mouseleave: (_row, _col, _e) => true
+    mouseleave: (_col, _e) => true
   },
   setup(props, { emit, slots }) {
-    const originalCol = computed(() => {
-      return props.column ? props.column.originalCol : void 0;
-    });
-    const colType = computed(() => {
-      return originalCol.value ? originalCol.value.type : void 0;
-    });
+    const originalCol = computed(() => props.column.originalCol);
+    const colType = computed(() => originalCol.value.type ?? "");
     const cellParam = computed(() => {
       return {
         column: originalCol.value,
@@ -87,29 +100,8 @@ const _sfc_main = defineComponent({
       };
     });
     const cellSpan = computed(() => {
-      const span = { rowspan: 1, colspan: 1 };
-      if (typeof props.spanMethod === "function") {
-        const result = props.spanMethod(cellParam.value);
-        if (result != null) {
-          if (Array.isArray(result)) {
-            const [rowspan, colspan] = result;
-            if (rowspan != null) {
-              span.rowspan = rowspan;
-            }
-            if (colspan != null) {
-              span.colspan = colspan;
-            }
-          } else {
-            if (result.rowspan != null) {
-              span.rowspan = result.rowspan;
-            }
-            if (result.colspan != null) {
-              span.colspan = result.colspan;
-            }
-          }
-        }
-      }
-      if (colType.value && ["indedx", "selection", "expand"].includes(colType.value)) {
+      const span = getCellSpan(cellParam.value, props.spanMethod);
+      if (["indedx", "selection", "expand"].includes(colType.value)) {
         span.rowspan = 1;
       }
       return span;
@@ -181,14 +173,11 @@ const _sfc_main = defineComponent({
       return classes.join(" ");
     });
     const cellWidth = computed(() => {
-      if (props.columnIndex == null || !props.colSizes) {
-        return;
-      }
-      let width = props.colSizes[props.columnIndex].width || 0;
       const colspan = cellSpan.value.colspan;
       if (colspan === 0) {
         return "0px";
       }
+      let width = props.colSizes[props.columnIndex].width || 0;
       if (colspan && colspan > 1) {
         const end = props.columnIndex + colspan;
         for (let i = props.columnIndex; i < end; i++) {
@@ -236,6 +225,13 @@ const _sfc_main = defineComponent({
       ];
     });
     const cellText = computed(() => {
+      const col = originalCol.value;
+      if (col && col.type === "index") {
+        if (typeof col.index === "function") {
+          return;
+        }
+        return getIndexValue(props.rowIndex, col.index, props.pageIndex);
+      }
       const prop = props.column ? props.column.dataKey : void 0;
       const { rowspan, colspan } = cellSpan.value;
       if (rowspan === 0 || colspan === 0 || prop == null || !props.rowData) {
@@ -243,12 +239,6 @@ const _sfc_main = defineComponent({
       }
       return getValue(props.rowData, prop);
     });
-    const indexText = computed(() => {
-      const rowIndex = props.rowIndex || 0;
-      const index = originalCol.value ? originalCol.value.index : void 0;
-      const start = typeof index === "function" ? index(rowIndex) : index;
-      return String((props.pageIndex || start || 0) + rowIndex);
-    });
     const isExpandCol = computed(() => {
       return props.column != null && props.expandColumnKey != null && props.expandColumnKey === props.column.key;
     });
@@ -256,18 +246,23 @@ const _sfc_main = defineComponent({
       const col = originalCol.value;
       const { rowspan, colspan } = cellSpan.value;
       if (col && rowspan !== 0 && colspan !== 0) {
+        const { rowIndex, rowData } = props;
+        if (col.type === "index") {
+          if (typeof col.index === "function") {
+            return { render: col.index, params: [rowIndex] };
+          }
+          return {};
+        }
         if (col.slot && typeof slots[col.slot] === "function") {
-          const param = {
-            row: props.rowData,
-            column: col,
-            $index: props.rowIndex
+          return {
+            render: slots[col.slot],
+            params: [{ row: rowData, column: col, $index: rowIndex }]
           };
-          return { render: slots[col.slot], params: [param] };
         }
         if (typeof col.formatter === "function") {
           return {
             render: col.formatter,
-            params: [props.rowData, col, cellText.value, props.rowIndex]
+            params: [rowData, col, cellText.value, rowIndex]
           };
         }
       }
@@ -279,58 +274,32 @@ const _sfc_main = defineComponent({
       }
     };
     const onCheckedChange = (checked) => {
-      emit("checkedChange", props.rowData, checked);
+      emit("checkedChange", checked);
     };
     const onExpandChange = () => {
       if (!props.loading) {
-        emit("expandChange", props.rowData, props.isCollapse);
+        emit("expandChange", props.isCollapse);
       }
     };
     const onClick = (e) => {
-      emit(
-        "click",
-        props.rowData,
-        originalCol.value,
-        e
-      );
+      emit("click", originalCol.value, e);
     };
     const onDblclick = (e) => {
-      emit(
-        "dblclick",
-        props.rowData,
-        originalCol.value,
-        e
-      );
+      emit("dblclick", originalCol.value, e);
     };
     const onContextmenu = (e) => {
-      emit(
-        "contextmenu",
-        props.rowData,
-        originalCol.value,
-        e
-      );
+      emit("contextmenu", originalCol.value, e);
     };
     const onMouseenter = (e) => {
-      emit(
-        "mouseenter",
-        props.rowData,
-        originalCol.value,
-        e
-      );
+      emit("mouseenter", originalCol.value, e);
     };
     const onMouseleave = (e) => {
-      emit(
-        "mouseleave",
-        props.rowData,
-        originalCol.value,
-        e
-      );
+      emit("mouseleave", originalCol.value, e);
     };
     return {
       colType,
       cellClass,
       cellStyle,
-      indexText,
       cellText,
       isExpandCol,
       renderOpt,
@@ -360,8 +329,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_LoadingDotOutlined = resolveComponent("LoadingDotOutlined");
   const _component_ArrowDown = resolveComponent("ArrowDown");
   const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_CellRender = resolveComponent("CellRender");
   const _component_CellCheckbox = resolveComponent("CellCheckbox");
+  const _component_CellRender = resolveComponent("CellRender");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.cellClass),
     style: normalizeStyle(_ctx.cellStyle),
@@ -396,20 +365,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["class"])
         ], 2)) : (openBlock(), createElementBlock("div", _hoisted_1))
       ], 64)) : createCommentVNode("", true),
-      !_ctx.colType ? (openBlock(), createBlock(_component_CellRender, normalizeProps(mergeProps({ key: 1 }, _ctx.renderOpt)), {
+      _ctx.colType === "selection" ? (openBlock(), createBlock(_component_CellCheckbox, {
+        key: 1,
+        checked: _ctx.isChecked,
+        disabled: _ctx.isDisabled,
+        size: _ctx.tableSize,
+        onChange: _ctx.onCheckedChange
+      }, null, 8, ["checked", "disabled", "size", "onChange"])) : _ctx.colType !== "expand" ? (openBlock(), createBlock(_component_CellRender, normalizeProps(mergeProps({ key: 2 }, _ctx.renderOpt)), {
         default: withCtx(() => [
           createTextVNode(toDisplayString(_ctx.cellText), 1)
         ]),
         _: 1
-      }, 16)) : _ctx.colType === "index" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        createTextVNode(toDisplayString(_ctx.indexText), 1)
-      ], 64)) : _ctx.colType === "selection" ? (openBlock(), createBlock(_component_CellCheckbox, {
-        key: 3,
-        checked: _ctx.isChecked,
-        disabled: _ctx.rowData ? _ctx.rowData._rowDisabled : false,
-        size: _ctx.tableSize,
-        onChange: _ctx.onCheckedChange
-      }, null, 8, ["checked", "disabled", "size", "onChange"])) : createCommentVNode("", true)
+      }, 16)) : createCommentVNode("", true)
     ])
   ], 38);
 }

package/es/ele-virtual-table/components/body-row.d.ts

@@ -1,19 +1,32 @@
-import type { PropType } from 'vue';
-import type { DataKey, DataItem, Column } from '../../ele-data-table/types';
-import type { BodyColumn, BodyColumns, ColSize } from '../types';
-declare const _default: import("vue").DefineComponent<{
+import { BodyColumns, ColSize, VirtualRow } from '../types';
+import { DataKey, DataItem, Column } from '../../ele-data-table/types';
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
     /** 主体列配置 */
-    bodyCols: PropType<BodyColumns>;
+    bodyCols: {
+        type: PropType<BodyColumns>;
+        required: true;
+    };
     /** 表格主体列宽 */
-    colSizes: PropType<ColSize[]>;
+    colSizes: {
+        type: PropType<ColSize[]>;
+        required: true;
+    };
     /** 当前行索引 */
-    rowIndex: NumberConstructor;
-    /** 当前行数据 */
-    rowData: PropType<DataItem>;
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前行对象 */
+    rowItem: {
+        type: PropType<VirtualRow>;
+        required: true;
+    };
+    /** 当前行数据唯一值 */
+    rowId: PropType<DataKey>;
     /** 表格多选选中的值 */
     checkedRowKeys: PropType<Set<DataKey>>;
-    /** 是否禁用表头选择框 */
-    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
     /** 单元格类名自定义 */
     bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
     /** 单元格样式自定义 */
@@ -34,19 +47,19 @@ declare const _default: import("vue").DefineComponent<{
     pageIndex: NumberConstructor;
     /** 表格行高 */
     rowHeight: NumberConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
     /** 树表格展开图标的列 */
     expandColumnKey: StringConstructor;
     /** 表格展开行的值 */
     expandedRowKeys: PropType<DataKey[]>;
-    /** 嵌套数据是否有子级字段名称 */
-    hasChildrenName: StringConstructor;
     /** 树表格是否懒加载子级 */
     lazy: BooleanConstructor;
     /** 树表格懒加载方法 */
     load: PropType<((row: DataItem, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: DataItem[]) => void) => void) | undefined>;
-    /** 树表格行数据级别 */
+    /** 树表格行数据缩进级别 */
     level: NumberConstructor;
-    /** 树表格行缩进 */
+    /** 树表格每一级行缩进大小 */
     indent: NumberConstructor;
     /** 是否需要固定单元格高度 */
     fixedCellHeight: BooleanConstructor;
@@ -58,42 +71,53 @@ declare const _default: import("vue").DefineComponent<{
     hasChildren: import("vue").ComputedRef<boolean>;
     rowIndent: import("vue").ComputedRef<string | undefined>;
     isCollapse: import("vue").ComputedRef<boolean>;
-    getKey: (column: BodyColumn, columnIndex?: number) => string;
-    onCellCheckedChange: (row: DataItem, checked: boolean) => void;
-    onCellExpandChange: (row: DataItem, expanded: boolean) => void;
-    onCellClick: (row: DataItem, col: Column, e: MouseEvent) => void;
-    onCellDblclick: (row: DataItem, col: Column, e: MouseEvent) => void;
-    onCellContextmenu: (row: DataItem, col: Column, e: MouseEvent) => void;
-    onCellMouseenter: (row: DataItem, col: Column, e: MouseEvent) => void;
-    onCellMouseleave: (row: DataItem, col: Column, e: MouseEvent) => void;
+    onCellCheckedChange: (checked: boolean) => void;
+    onCellExpandChange: (expanded: boolean) => void;
+    onCellClick: (col: Column, e: MouseEvent) => void;
+    onCellDblclick: (col: Column, e: MouseEvent) => void;
+    onCellContextmenu: (col: Column, e: MouseEvent) => void;
+    onCellMouseenter: (col: Column, e: MouseEvent) => void;
+    onCellMouseleave: (col: Column, e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     /** 多选框选中改变事件 */
-    cellCheckedChange: (_row: DataItem, _checked: boolean) => true;
+    cellCheckedChange: (_row: VirtualRow, _checked: boolean) => true;
     /** 展开状态改变事件 */
-    cellExpandChange: (_row: DataItem, _expanded: boolean, _data?: DataItem[]) => true;
+    cellExpandChange: (_row: VirtualRow, _expanded: boolean, _children?: DataItem[]) => true;
     /** 单元格点击事件 */
-    cellClick: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    cellClick: (_row: VirtualRow, _col: Column, _e: MouseEvent) => true;
     /** 单元格双击事件 */
-    cellDblclick: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    cellDblclick: (_row: VirtualRow, _col: Column, _e: MouseEvent) => true;
     /** 单元格右键事件 */
-    cellContextmenu: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    cellContextmenu: (_row: VirtualRow, _col: Column, _e: MouseEvent) => true;
     /** 单元格鼠标移入事件 */
-    cellMouseenter: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    cellMouseenter: (_row: VirtualRow, _col: Column, _e: MouseEvent) => true;
     /** 单元格鼠标移出事件 */
-    cellMouseleave: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    cellMouseleave: (_row: VirtualRow, _col: Column, _e: MouseEvent) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** 主体列配置 */
-    bodyCols: PropType<BodyColumns>;
+    bodyCols: {
+        type: PropType<BodyColumns>;
+        required: true;
+    };
     /** 表格主体列宽 */
-    colSizes: PropType<ColSize[]>;
+    colSizes: {
+        type: PropType<ColSize[]>;
+        required: true;
+    };
     /** 当前行索引 */
-    rowIndex: NumberConstructor;
-    /** 当前行数据 */
-    rowData: PropType<DataItem>;
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 当前行对象 */
+    rowItem: {
+        type: PropType<VirtualRow>;
+        required: true;
+    };
+    /** 当前行数据唯一值 */
+    rowId: PropType<DataKey>;
     /** 表格多选选中的值 */
     checkedRowKeys: PropType<Set<DataKey>>;
-    /** 是否禁用表头选择框 */
-    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
     /** 单元格类名自定义 */
     bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
     /** 单元格样式自定义 */
@@ -114,32 +138,32 @@ declare const _default: import("vue").DefineComponent<{
     pageIndex: NumberConstructor;
     /** 表格行高 */
     rowHeight: NumberConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
     /** 树表格展开图标的列 */
     expandColumnKey: StringConstructor;
     /** 表格展开行的值 */
     expandedRowKeys: PropType<DataKey[]>;
-    /** 嵌套数据是否有子级字段名称 */
-    hasChildrenName: StringConstructor;
     /** 树表格是否懒加载子级 */
     lazy: BooleanConstructor;
     /** 树表格懒加载方法 */
     load: PropType<((row: DataItem, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: DataItem[]) => void) => void) | undefined>;
-    /** 树表格行数据级别 */
+    /** 树表格行数据缩进级别 */
     level: NumberConstructor;
-    /** 树表格行缩进 */
+    /** 树表格每一级行缩进大小 */
     indent: NumberConstructor;
     /** 是否需要固定单元格高度 */
     fixedCellHeight: BooleanConstructor;
     /** 表格是否是自适应行高 */
     autoRowHeight: BooleanConstructor;
 }>> & {
-    onCellClick?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onCellDblclick?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onCellContextmenu?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onCellCheckedChange?: ((_row: DataItem, _checked: boolean) => any) | undefined;
-    onCellExpandChange?: ((_row: DataItem, _expanded: boolean, _data?: DataItem[] | undefined) => any) | undefined;
-    onCellMouseenter?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onCellMouseleave?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
+    onCellClick?: ((_row: VirtualRow, _col: Column, _e: MouseEvent) => any) | undefined;
+    onCellDblclick?: ((_row: VirtualRow, _col: Column, _e: MouseEvent) => any) | undefined;
+    onCellContextmenu?: ((_row: VirtualRow, _col: Column, _e: MouseEvent) => any) | undefined;
+    onCellMouseenter?: ((_row: VirtualRow, _col: Column, _e: MouseEvent) => any) | undefined;
+    onCellCheckedChange?: ((_row: VirtualRow, _checked: boolean) => any) | undefined;
+    onCellExpandChange?: ((_row: VirtualRow, _expanded: boolean, _children?: DataItem[] | undefined) => any) | undefined;
+    onCellMouseleave?: ((_row: VirtualRow, _col: Column, _e: MouseEvent) => any) | undefined;
 }, {
     lazy: boolean;
     fixedCellHeight: boolean;