ele-admin-plus 1.1.4-beta.3 → 1.1.5-beta.1

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

@@ -0,0 +1,413 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const util$1 = require("../../ele-data-table/util");
+const icons = require("../../icons");
+const CellCheckbox = require("./cell-checkbox");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "BodyCell",
+  components: { ElIcon: elementPlus.ElIcon, Loading: iconsVue.Loading, ArrowDown: icons.ArrowDown, CellCheckbox, CellRender: util.CellRender },
+  props: {
+    /** 当前列配置 */
+    column: Object,
+    /** 当前列索引 */
+    columnIndex: Number,
+    /** 当前行索引 */
+    rowIndex: Number,
+    /** 当前行数据 */
+    rowData: Object,
+    /** 表格主体列宽 */
+    colSizes: Array,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 单元格类名自定义 */
+    bodyCellClass: [String, Function],
+    /** 单元格样式自定义 */
+    bodyCellStyle: [Object, Function],
+    /** 单元格合并行列方法 */
+    spanMethod: Function,
+    /** 溢出提示组件全局属性 */
+    tableTooltipProps: [Boolean, Object],
+    /** 序号列起始编号 */
+    pageIndex: Number,
+    /** 表格行高 */
+    rowHeight: Number,
+    /** 树表格展开图标的列 */
+    expandColumnKey: String,
+    /** 多选当前行是否选中 */
+    isChecked: Boolean,
+    /** 树表格当前行是否有子级 */
+    hasChildren: Boolean,
+    /** 当前行缩进 */
+    rowIndent: String,
+    /** 树表格当前行是否折叠 */
+    isCollapse: Boolean,
+    /** 树表格子级加载状态 */
+    loading: Boolean,
+    /** 是否需要固定单元格高度 */
+    fixedCellHeight: Boolean,
+    /** 表格是否是自适应行高 */
+    autoRowHeight: Boolean
+  },
+  emits: {
+    /** 多选框选中改变事件 */
+    checkedChange: (_row, _checked) => true,
+    /** 展开状态改变事件 */
+    expandChange: (_row, _expanded) => true,
+    /** 点击事件 */
+    click: (_row, _col, _e) => true,
+    /** 双击事件 */
+    dblclick: (_row, _col, _e) => true,
+    /** 右键事件 */
+    contextmenu: (_row, _col, _e) => true,
+    /** 鼠标移入事件 */
+    mouseenter: (_row, _col, _e) => true,
+    /** 鼠标移出事件 */
+    mouseleave: (_row, _col, _e) => true
+  },
+  setup(props, { emit, slots }) {
+    const originalCol = vue.computed(() => {
+      return props.column ? props.column.originalCol : void 0;
+    });
+    const colType = vue.computed(() => {
+      return originalCol.value ? originalCol.value.type : void 0;
+    });
+    const cellParam = vue.computed(() => {
+      return {
+        column: originalCol.value,
+        columnIndex: props.columnIndex,
+        rowIndex: props.rowIndex,
+        row: props.rowData
+      };
+    });
+    const cellSpan = vue.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)) {
+        span.rowspan = 1;
+      }
+      return span;
+    });
+    const isEllipsis = vue.computed(() => {
+      if (colType.value === "selection" || colType.value === "expand") {
+        return true;
+      }
+      const col = originalCol.value;
+      if (col && col.showOverflowTooltip != null) {
+        return col.showOverflowTooltip !== false;
+      }
+      return !!props.tableTooltipProps;
+    });
+    const cellClass = vue.computed(() => {
+      const classes = ["el-table-v2__row-cell", "ele-table-td"];
+      if (!cellSpan.value.colspan) {
+        classes.push("is-none");
+      } else if (cellSpan.value.colspan > 1) {
+        classes.push("is-multi-cell");
+      }
+      if (!cellSpan.value.rowspan) {
+        classes.push("is-placeholder");
+      } else if (cellSpan.value.rowspan > 1) {
+        classes.push("is-multi-row");
+      }
+      if (colType.value === "index") {
+        classes.push("is-index");
+      }
+      if (colType.value === "selection") {
+        classes.push("is-selection");
+      }
+      if (colType.value === "expand") {
+        classes.push("is-expand");
+      }
+      const col = originalCol.value;
+      if (col) {
+        if (col.align) {
+          classes.push("is-align-" + col.align);
+        }
+        if (isEllipsis.value) {
+          classes.push("is-ellipsis");
+        }
+        if (col.fixed === "right") {
+          classes.push("is-fixed-right");
+        } else if (col.fixed === "left" || col.fixed === true) {
+          classes.push("is-fixed-left");
+        }
+        if (props.column) {
+          if (props.column.isFixedLeftLast) {
+            classes.push("is-fixed-left-last");
+          }
+          if (props.column.isFixedRightFirst) {
+            classes.push("is-fixed-right-first");
+          }
+        }
+        if (typeof props.bodyCellClass === "function") {
+          const temp = props.bodyCellClass(cellParam.value);
+          if (temp) {
+            classes.push(temp);
+          }
+        } else if (props.bodyCellClass) {
+          classes.push(props.bodyCellClass);
+        }
+        if (col.className) {
+          classes.push(col.className);
+        }
+      }
+      return classes.join(" ");
+    });
+    const cellWidth = vue.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";
+      }
+      if (colspan && colspan > 1) {
+        const end = props.columnIndex + colspan;
+        for (let i = props.columnIndex; i < end; i++) {
+          if (props.colSizes[i] && props.colSizes[i].width != null) {
+            width += props.colSizes[i].width;
+          }
+        }
+      }
+      return width + "px";
+    });
+    const cellHeight = vue.computed(() => {
+      if (props.fixedCellHeight && props.rowHeight != null) {
+        return props.rowHeight + "px";
+      }
+      const rowspan = cellSpan.value.rowspan;
+      if (props.rowHeight == null || rowspan == null || rowspan <= 1) {
+        return;
+      }
+      return rowspan * props.rowHeight + "px";
+    });
+    const cellMinHeight = vue.computed(() => {
+      if (!props.autoRowHeight || !props.rowHeight) {
+        return;
+      }
+      return props.rowHeight + "px";
+    });
+    const colSize = vue.computed(() => {
+      if (!props.colSizes || props.columnIndex == null) {
+        return;
+      }
+      return props.colSizes[props.columnIndex];
+    });
+    const cellStyle = vue.computed(() => {
+      const userStyle = props.bodyCellStyle;
+      const param = cellParam.value;
+      return [
+        {
+          width: cellWidth.value,
+          height: cellHeight.value,
+          minHeight: cellMinHeight.value,
+          left: colSize.value ? colSize.value.fixedLeft : void 0,
+          right: colSize.value ? colSize.value.fixedRight : void 0
+        },
+        (typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
+      ];
+    });
+    const cellText = vue.computed(() => {
+      const prop = props.column ? props.column.dataKey : void 0;
+      const { rowspan, colspan } = cellSpan.value;
+      if (rowspan === 0 || colspan === 0 || prop == null || !props.rowData) {
+        return;
+      }
+      return util$1.getValue(props.rowData, prop);
+    });
+    const indexText = vue.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 = vue.computed(() => {
+      return props.column != null && props.expandColumnKey != null && props.expandColumnKey === props.column.key;
+    });
+    const renderOpt = vue.computed(() => {
+      const col = originalCol.value;
+      const { rowspan, colspan } = cellSpan.value;
+      if (col && rowspan !== 0 && colspan !== 0) {
+        if (col.slot && typeof slots[col.slot] === "function") {
+          const param = {
+            row: props.rowData,
+            column: col,
+            $index: props.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]
+          };
+        }
+      }
+      return {};
+    });
+    const onTextClick = (e) => {
+      if (colType.value === "selection") {
+        e.stopPropagation();
+      }
+    };
+    const onCheckedChange = (checked) => {
+      emit("checkedChange", props.rowData, checked);
+    };
+    const onExpandChange = () => {
+      if (!props.loading) {
+        emit("expandChange", props.rowData, props.isCollapse);
+      }
+    };
+    const onClick = (e) => {
+      emit(
+        "click",
+        props.rowData,
+        originalCol.value,
+        e
+      );
+    };
+    const onDblclick = (e) => {
+      emit(
+        "dblclick",
+        props.rowData,
+        originalCol.value,
+        e
+      );
+    };
+    const onContextmenu = (e) => {
+      emit(
+        "contextmenu",
+        props.rowData,
+        originalCol.value,
+        e
+      );
+    };
+    const onMouseenter = (e) => {
+      emit(
+        "mouseenter",
+        props.rowData,
+        originalCol.value,
+        e
+      );
+    };
+    const onMouseleave = (e) => {
+      emit(
+        "mouseleave",
+        props.rowData,
+        originalCol.value,
+        e
+      );
+    };
+    return {
+      colType,
+      cellClass,
+      cellStyle,
+      indexText,
+      cellText,
+      isExpandCol,
+      renderOpt,
+      onTextClick,
+      onCheckedChange,
+      onExpandChange,
+      onClick,
+      onDblclick,
+      onContextmenu,
+      onMouseenter,
+      onMouseleave
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 2,
+  class: "ele-table-placeholder"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Loading = vue.resolveComponent("Loading");
+  const _component_ArrowDown = vue.resolveComponent("ArrowDown");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_CellRender = vue.resolveComponent("CellRender");
+  const _component_CellCheckbox = vue.resolveComponent("CellCheckbox");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.cellClass),
+    style: vue.normalizeStyle(_ctx.cellStyle),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+    onDblclick: _cache[3] || (_cache[3] = (...args) => _ctx.onDblclick && _ctx.onDblclick(...args)),
+    onContextmenu: _cache[4] || (_cache[4] = (...args) => _ctx.onContextmenu && _ctx.onContextmenu(...args)),
+    onMouseenter: _cache[5] || (_cache[5] = (...args) => _ctx.onMouseenter && _ctx.onMouseenter(...args)),
+    onMouseleave: _cache[6] || (_cache[6] = (...args) => _ctx.onMouseleave && _ctx.onMouseleave(...args))
+  }, [
+    vue.createElementVNode("div", {
+      class: "ele-table-cell",
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onTextClick && _ctx.onTextClick(...args))
+    }, [
+      _ctx.isExpandCol ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+        _ctx.rowIndent ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-table-indent",
+          style: vue.normalizeStyle({ width: _ctx.rowIndent })
+        }, null, 4)) : vue.createCommentVNode("", true),
+        _ctx.hasChildren ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["ele-table-expand", { "is-collapse": _ctx.isCollapse }]),
+          onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onExpandChange && _ctx.onExpandChange(...args), ["stop"]))
+        }, [
+          vue.createVNode(_component_ElIcon, {
+            class: vue.normalizeClass({ "is-loading": _ctx.loading })
+          }, {
+            default: vue.withCtx(() => [
+              _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_Loading, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_ArrowDown, { key: 1 }))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 2)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1))
+      ], 64)) : vue.createCommentVNode("", true),
+      !_ctx.colType ? (vue.openBlock(), vue.createBlock(_component_CellRender, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.renderOpt)), {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.cellText), 1)
+        ]),
+        _: 1
+      }, 16)) : _ctx.colType === "index" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+        vue.createTextVNode(vue.toDisplayString(_ctx.indexText), 1)
+      ], 64)) : _ctx.colType === "selection" ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+    ])
+  ], 38);
+}
+const bodyCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = bodyCell;

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

@@ -0,0 +1,148 @@
+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<{
+    /** 主体列配置 */
+    bodyCols: PropType<BodyColumns>;
+    /** 表格主体列宽 */
+    colSizes: PropType<ColSize[]>;
+    /** 当前行索引 */
+    rowIndex: NumberConstructor;
+    /** 当前行数据 */
+    rowData: PropType<DataItem>;
+    /** 表格多选选中的值 */
+    selectedRowKeys: PropType<Set<DataKey>>;
+    /** 是否禁用表头选择框 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 单元格类名自定义 */
+    bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
+    /** 单元格样式自定义 */
+    bodyCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<DataItem> | undefined>;
+    /** 单元格合并行列方法 */
+    spanMethod: PropType<((data: {
+        row: DataItem;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").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" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    /** 序号列起始编号 */
+    pageIndex: NumberConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+    /** 树表格展开图标的列 */
+    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;
+}, {
+    loading: import("vue").Ref<boolean>;
+    isChecked: import("vue").ComputedRef<boolean>;
+    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;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** 多选框选中改变事件 */
+    cellCheckedChange: (_row: DataItem, _checked: boolean) => true;
+    /** 展开状态改变事件 */
+    cellExpandChange: (_row: DataItem, _expanded: boolean, _data?: DataItem[]) => true;
+    /** 单元格点击事件 */
+    cellClick: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    /** 单元格双击事件 */
+    cellDblclick: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    /** 单元格右键事件 */
+    cellContextmenu: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    /** 单元格鼠标移入事件 */
+    cellMouseenter: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+    /** 单元格鼠标移出事件 */
+    cellMouseleave: (_row: DataItem, _col: Column, _e: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 主体列配置 */
+    bodyCols: PropType<BodyColumns>;
+    /** 表格主体列宽 */
+    colSizes: PropType<ColSize[]>;
+    /** 当前行索引 */
+    rowIndex: NumberConstructor;
+    /** 当前行数据 */
+    rowData: PropType<DataItem>;
+    /** 表格多选选中的值 */
+    selectedRowKeys: PropType<Set<DataKey>>;
+    /** 是否禁用表头选择框 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 单元格类名自定义 */
+    bodyCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<DataItem> | undefined>;
+    /** 单元格样式自定义 */
+    bodyCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<DataItem> | undefined>;
+    /** 单元格合并行列方法 */
+    spanMethod: PropType<((data: {
+        row: DataItem;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").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" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    /** 序号列起始编号 */
+    pageIndex: NumberConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+    /** 树表格展开图标的列 */
+    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;
+}, {
+    lazy: boolean;
+    fixedCellHeight: boolean;
+    autoRowHeight: boolean;
+}, {}>;
+export default _default;