ele-admin-plus 1.1.9-beta.8 → 1.1.9

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

@@ -1,47 +1,65 @@
-import type { PropType } from 'vue';
+import { BodyColumn, CustomRenderProps, ColSize } from '../types';
+import { DataItem, Column } from '../../ele-data-table/types';
 import { StyleValues } from '../../ele-app/types';
-import type { DataItem, Column } from '../../ele-data-table/types';
-import type { CustomRenderProps, ColSize } from '../types';
-declare const _default: import("vue").DefineComponent<{
-    /** 当前列配置 */
-    column: PropType<Partial<import("element-plus").Column<DataItem>>>;
-    /** 当前列索引 */
-    columnIndex: NumberConstructor;
-    /** 当前行索引 */
-    rowIndex: NumberConstructor;
-    /** 当前行数据 */
-    rowData: PropType<DataItem>;
-    /** 表格主体列宽 */
-    colSizes: PropType<ColSize[]>;
-    /** 表格尺寸 */
-    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+import { PropType } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 列配置 */
+    column: {
+        type: PropType<BodyColumn>;
+        required: true;
+    };
+    /** 列索引 */
+    columnIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 行索引 */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 行数据 */
+    rowData: {
+        type: PropType<DataItem>;
+        required: true;
+    };
+    /** 所有列的列宽 */
+    colSizes: {
+        type: PropType<ColSize[]>;
+        required: true;
+    };
     /** 单元格类名自定义 */
-    bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
+    bodyCellClass: PropType<import('element-plus').CellCls<DataItem> | undefined>;
     /** 单元格样式自定义 */
-    bodyCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<DataItem> | undefined>;
+    bodyCellStyle: PropType<import('element-plus').CellStyle<DataItem> | undefined>;
     /** 单元格合并行列方法 */
     spanMethod: PropType<((data: {
         row: DataItem;
         rowIndex: number;
-        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<DataItem>;
+        column: import('element-plus').TableColumnCtx<DataItem>;
         columnIndex: number;
     }) => number[] | {
         rowspan: number;
         colspan: number;
     } | undefined) | undefined>;
     /** 溢出提示组件全局属性 */
-    tableTooltipProps: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tableTooltipProps: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
     /** 序号列起始编号 */
     pageIndex: NumberConstructor;
     /** 表格行高 */
     rowHeight: NumberConstructor;
-    /** 树表格展开图标的列 */
-    expandColumnKey: StringConstructor;
     /** 多选当前行是否选中 */
     isChecked: BooleanConstructor;
+    /** 多选当前行是否禁用 */
+    isDisabled: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 树表格展开图标的列 */
+    expandColumnKey: StringConstructor;
     /** 树表格当前行是否有子级 */
     hasChildren: BooleanConstructor;
-    /** 当前行缩进 */
+    /** 树表格当前行缩进 */
     rowIndent: StringConstructor;
     /** 树表格当前行是否折叠 */
     isCollapse: BooleanConstructor;
@@ -52,13 +70,12 @@ declare const _default: import("vue").DefineComponent<{
     /** 表格是否是自适应行高 */
     autoRowHeight: BooleanConstructor;
 }, {
-    colType: import("vue").ComputedRef<string | undefined>;
-    cellClass: import("vue").ComputedRef<string>;
-    cellStyle: import("vue").ComputedRef<StyleValues | undefined>;
-    indexText: import("vue").ComputedRef<string>;
-    cellText: import("vue").ComputedRef<string | undefined>;
-    isExpandCol: import("vue").ComputedRef<boolean>;
-    renderOpt: import("vue").ComputedRef<CustomRenderProps>;
+    colType: import('vue').ComputedRef<string>;
+    cellClass: import('vue').ComputedRef<string>;
+    cellStyle: import('vue').ComputedRef<StyleValues | undefined>;
+    cellText: import('vue').ComputedRef<string | undefined>;
+    isExpandCol: import('vue').ComputedRef<boolean>;
+    renderOpt: import('vue').ComputedRef<CustomRenderProps>;
     onTextClick: (e: MouseEvent) => void;
     onCheckedChange: (checked: boolean) => void;
     onExpandChange: () => void;
@@ -67,61 +84,78 @@ declare const _default: import("vue").DefineComponent<{
     onContextmenu: (e: MouseEvent) => void;
     onMouseenter: (e: MouseEvent) => void;
     onMouseleave: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     /** 多选框选中改变事件 */
-    checkedChange: (_row: DataItem, _checked: boolean) => true;
+    checkedChange: (_checked: boolean) => true;
     /** 展开状态改变事件 */
-    expandChange: (_row: DataItem, _expanded: boolean) => true;
+    expandChange: (_expanded: boolean) => true;
     /** 点击事件 */
-    click: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    click: (_col: Column, _e: MouseEvent) => true;
     /** 双击事件 */
-    dblclick: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    dblclick: (_col: Column, _e: MouseEvent) => true;
     /** 右键事件 */
-    contextmenu: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    contextmenu: (_col: Column, _e: MouseEvent) => true;
     /** 鼠标移入事件 */
-    mouseenter: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    mouseenter: (_col: Column, _e: MouseEvent) => true;
     /** 鼠标移出事件 */
-    mouseleave: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** 当前列配置 */
-    column: PropType<Partial<import("element-plus").Column<DataItem>>>;
-    /** 当前列索引 */
-    columnIndex: NumberConstructor;
-    /** 当前行索引 */
-    rowIndex: NumberConstructor;
-    /** 当前行数据 */
-    rowData: PropType<DataItem>;
-    /** 表格主体列宽 */
-    colSizes: PropType<ColSize[]>;
-    /** 表格尺寸 */
-    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    mouseleave: (_col: Column, _e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 列配置 */
+    column: {
+        type: PropType<BodyColumn>;
+        required: true;
+    };
+    /** 列索引 */
+    columnIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 行索引 */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 行数据 */
+    rowData: {
+        type: PropType<DataItem>;
+        required: true;
+    };
+    /** 所有列的列宽 */
+    colSizes: {
+        type: PropType<ColSize[]>;
+        required: true;
+    };
     /** 单元格类名自定义 */
-    bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
+    bodyCellClass: PropType<import('element-plus').CellCls<DataItem> | undefined>;
     /** 单元格样式自定义 */
-    bodyCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<DataItem> | undefined>;
+    bodyCellStyle: PropType<import('element-plus').CellStyle<DataItem> | undefined>;
     /** 单元格合并行列方法 */
     spanMethod: PropType<((data: {
         row: DataItem;
         rowIndex: number;
-        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<DataItem>;
+        column: import('element-plus').TableColumnCtx<DataItem>;
         columnIndex: number;
     }) => number[] | {
         rowspan: number;
         colspan: number;
     } | undefined) | undefined>;
     /** 溢出提示组件全局属性 */
-    tableTooltipProps: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tableTooltipProps: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
     /** 序号列起始编号 */
     pageIndex: NumberConstructor;
     /** 表格行高 */
     rowHeight: NumberConstructor;
-    /** 树表格展开图标的列 */
-    expandColumnKey: StringConstructor;
     /** 多选当前行是否选中 */
     isChecked: BooleanConstructor;
+    /** 多选当前行是否禁用 */
+    isDisabled: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 树表格展开图标的列 */
+    expandColumnKey: StringConstructor;
     /** 树表格当前行是否有子级 */
     hasChildren: BooleanConstructor;
-    /** 当前行缩进 */
+    /** 树表格当前行缩进 */
     rowIndent: StringConstructor;
     /** 树表格当前行是否折叠 */
     isCollapse: BooleanConstructor;
@@ -132,15 +166,16 @@ declare const _default: import("vue").DefineComponent<{
     /** 表格是否是自适应行高 */
     autoRowHeight: BooleanConstructor;
 }>> & {
-    onMouseenter?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onMouseleave?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onClick?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onContextmenu?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onExpandChange?: ((_row: DataItem, _expanded: boolean) => any) | undefined;
-    onDblclick?: ((_row: DataItem, _col: Column, _e: MouseEvent) => any) | undefined;
-    onCheckedChange?: ((_row: DataItem, _checked: boolean) => any) | undefined;
+    onMouseenter?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onMouseleave?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onClick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onContextmenu?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onExpandChange?: ((_expanded: boolean) => any) | undefined;
+    onDblclick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onCheckedChange?: ((_checked: boolean) => any) | undefined;
 }, {
     loading: boolean;
+    isDisabled: boolean;
     isChecked: boolean;
     hasChildren: boolean;
     isCollapse: boolean;

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);
 }