@ibiz-template/vue3-components 0.7.41-alpha.12 → 0.7.41-alpha.13

package/es/control/grid/virtualized-table/virtualized-table.css

@@ -0,0 +1 @@
+.ibiz-control-virtualized-table{--ibiz-control-virtualized-table-text-color:var(--ibiz-color-text-0);--ibiz-control-virtualized-table-bg-color:transparent;--ibiz-control-virtualized-table-padding:var(--ibiz-spacing-none);--ibiz-control-virtualized-table-cell-padding:var(--ibiz-spacing-tight);--ibiz-control-virtualized-table-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-virtualized-table-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-virtualized-table-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-virtualized-table-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-virtualized-table-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-virtualized-table-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-virtualized-table-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-virtualized-table-now-header-height:54px;--ibiz-control-virtualized-table-scrollbar-width:4px;--ibiz-control-virtualized-table-scrollbar-bg-color:var(--ibiz-color-fill-2);--ibiz-control-virtualized-table-scrollbar-bg-hover-opacity:0.5;--ibiz-control-virtualized-table-scrollbar-bg-hover-color:var(--ibiz-color-fill-2);--ibiz-control-virtualized-table-header-text-color:var(--ibiz-color-text-2);--ibiz-control-virtualized-table-header-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-control-virtualized-table-header-height:auto;--ibiz-control-virtualized-table-header-min-height:54px;--ibiz-control-virtualized-table-header-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-virtualized-table-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-virtualized-table-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-virtualized-table-content-text-color:var(--ibiz-control-virtualized-table-text-color);--ibiz-control-virtualized-table-content-row-height:48px;--ibiz-control-virtualized-table-page-text-color:var(--ibiz-color-text-2);--ibiz-control-virtualized-table-page-height:50px;--ibiz-control-virtualized-table-page-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-virtualized-table-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-virtualized-table-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-virtualized-table-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-virtualized-table-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;width:100%;height:100%;padding:var(--ibiz-control-virtualized-table-padding);background-color:var(--ibiz-control-virtualized-table-bg-color)}.ibiz-control-virtualized-table.is-enable-page .el-auto-resizer{height:calc(100% - var(--ibiz-control-virtualized-table-page-height))!important}.ibiz-control-virtualized-table.is-enable-page .el-table-v2__empty{height:calc(100% - var(--ibiz-control-virtualized-table-page-height))}.ibiz-control-virtualized-table__table{width:100%;height:100%}.ibiz-control-virtualized-table__table.el-table-v2{--el-table-header-bg-color:var(--ibiz-control-virtualized-table-header-bg-color);--el-table-border-color:transparent}.ibiz-control-virtualized-table__table .el-table-v2__empty{height:100%}.ibiz-control-virtualized-table__table .el-table-v2__header-row,.ibiz-control-virtualized-table__table .el-table-v2__row{border:none}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__header-cell,.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__row-cell{padding:var(--ibiz-control-virtualized-table-cell-padding)}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__header-cell:not(.is-selection),.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__row-cell:not(.is-selection){cursor:pointer}.ibiz-control-virtualized-table__table .el-table-v2__main{background-color:transparent}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__body .el-table-v2__row .el-table-v2__row-cell{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__body .el-table-v2__row:nth-child(2n) .el-table-v2__row-cell{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__body .el-table-v2__row:hover .el-table-v2__row-cell{background-color:var(--ibiz-control-grid-row-hover-color)}.ibiz-control-virtualized-table__table.el-table-v2 .el-table-v2__body .el-table-v2__row.is-selected .el-table-v2__row-cell{background-color:var(--ibiz-control-virtualized-table-row-select-color)}.ibiz-control-virtualized-table__table .el-table-v2__body{color:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-virtualized-table__header-cell{font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-virtualized-table__caret-wrapper{display:inline-flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;width:24px;height:14px;overflow:initial;line-height:23px;vertical-align:middle;cursor:pointer}.ibiz-control-virtualized-table__caret-wrapper--sort-caret{width:0;height:0;border:solid 5px transparent;opacity:.6}.ibiz-control-virtualized-table__caret-wrapper--asc{border-bottom-color:var(--ibiz-color-text-2)}.ibiz-control-virtualized-table__caret-wrapper--asc.is-active{border-bottom-color:var(--ibiz-color-primary)}.ibiz-control-virtualized-table__caret-wrapper--desc{border-top-color:var(--ibiz-color-text-2)}.ibiz-control-virtualized-table__caret-wrapper--desc.is-active{border-top-color:var(--ibiz-color-primary)}.ibiz-control-virtualized-table__quick-toolbar{justify-content:center}.ibiz-control-virtualized-table__batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:var(--ibiz-control-virtualized-table-now-header-height);font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-virtualized-table-header-bg-color)}.ibiz-control-virtualized-table__batch-toolbar.is-show{display:flex;align-items:center;justify-content:flex-start}.ibiz-control-virtualized-table__batch-toolbar--separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-virtualized-table__batch-toolbar--content{height:100%;display:flex;align-items:center;justify-content:flex-start}.ibiz-control-virtualized-table.is-enable-customized .ibiz-control-virtualized-table__setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-virtualized-table-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-virtualized-table-header-bg-color)}

package/es/control/grid/virtualized-table/virtualized-table.d.ts

@@ -0,0 +1,200 @@
+import { VNode, PropType } from 'vue';
+import { IDEGrid } from '@ibiz/model-core';
+import { ControlVO, GridController, IControlProvider } from '@ibiz-template/runtime';
+import { IColumn } from './virtualized-table.util';
+import './virtualized-table.scss';
+export declare const VirtualizedTableControl: import("vue").DefineComponent<{
+    /**
+     * @description 表格模型数据
+     */
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    /**
+     * @description 应用上下文对象
+     */
+    context: {
+        type: PropType<import("@ibiz-template/core").IApiContext>;
+        required: true;
+    };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
+    params: {
+        type: PropType<import("@ibiz-template/core").IApiParams>;
+        default: () => {};
+    };
+    /**
+     * @description 部件适配器
+     */
+    provider: {
+        type: PropType<IControlProvider>;
+    };
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否单选
+     */
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否启用行编辑
+     */
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /**
+     * @description 简单模式下传入的数据
+     */
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    c: GridController<IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
+    ns: import("@ibiz-template/core").Namespace;
+    tableRef: import("vue").Ref<any>;
+    tableData: import("vue").ComputedRef<ControlVO[]>;
+    columnModel: import("vue").ComputedRef<IColumn[]>;
+    onPageChange: (page: number) => void;
+    onPageRefresh: () => void;
+    onPageSizeChange: (size: number) => void;
+    renderNoData: () => VNode | null;
+    calcRowClass: (params: IParams) => string;
+    renderBodyCell: (params: IParams) => JSX.Element;
+    handleRowClick: (event: MouseEvent, data: ControlVO) => Promise<void>;
+    calcColumnWidth: (_columns: IColumn[], bodyWidth: number) => IColumn[];
+    handleDbRowClick: (event: MouseEvent, data: ControlVO) => Promise<void>;
+    renderHeaderCell: (params: IParams) => JSX.Element;
+    renderBatchToolBar: () => VNode | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 表格模型数据
+     */
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    /**
+     * @description 应用上下文对象
+     */
+    context: {
+        type: PropType<import("@ibiz-template/core").IApiContext>;
+        required: true;
+    };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
+    params: {
+        type: PropType<import("@ibiz-template/core").IApiParams>;
+        default: () => {};
+    };
+    /**
+     * @description 部件适配器
+     */
+    provider: {
+        type: PropType<IControlProvider>;
+    };
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否单选
+     */
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否启用行编辑
+     */
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /**
+     * @description 简单模式下传入的数据
+     */
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    params: import("@ibiz-template/core").IApiParams;
+    singleSelect: boolean;
+    mdctrlActiveMode: number;
+    rowEditOpen: boolean;
+    isSimple: boolean;
+    loadDefault: boolean;
+}, {}>;

package/es/control/grid/virtualized-table/virtualized-table.mjs

@@ -0,0 +1,325 @@
+import { isVNode, onUnmounted, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
+import { useControlController, useNamespace, useUIStore, hasEmptyPanelRenderer, IBizCustomRender } from '@ibiz-template/vue3-util';
+import { GridController } from '@ibiz-template/runtime';
+import { useVirtualizedTable } from './virtualized-table.util.mjs';
+import '../../../util/index.mjs';
+import './virtualized-table.css';
+import { usePagination } from '../../../util/pagination/use-pagination.mjs';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const VirtualizedTableControl = /* @__PURE__ */ defineComponent({
+  name: "IBizVirtualizedTableControl",
+  props: {
+    /**
+     * @description 表格模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 应用上下文对象
+     */
+    context: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * @description 部件适配器
+     */
+    provider: {
+      type: Object
+    },
+    /**
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
+     */
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * @description 是否单选
+     */
+    singleSelect: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @description 是否启用行编辑
+     */
+    rowEditOpen: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
+    /**
+     * @description 简单模式下传入的数据
+     */
+    data: {
+      type: Array,
+      required: false
+    },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const c = useControlController((...args) => new GridController(...args));
+    const ns = useNamespace("control-virtualized-table");
+    const {
+      zIndex
+    } = useUIStore();
+    c.state.zIndex = zIndex.increment();
+    const {
+      tableRef,
+      tableData,
+      sortValue,
+      columnModel,
+      isSelected,
+      isAllSelected,
+      handleRowClick,
+      handleSortClick,
+      handleSelectAll,
+      calcColumnWidth,
+      handleDbRowClick,
+      handleHeaderCellClick,
+      handleSelectionChange
+    } = useVirtualizedTable(c, props);
+    const {
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    } = usePagination(c);
+    onUnmounted(() => {
+      zIndex.decrement();
+    });
+    const calcRowClass = (params) => {
+      const {
+        rowData
+      } = params;
+      return "".concat(ns.is("selected", rowData && isSelected(rowData)));
+    };
+    const renderNoData = () => {
+      var _a;
+      const {
+        isLoaded
+      } = c.state;
+      if (isLoaded) {
+        const quickToolbar = (_a = c.model.controls) == null ? void 0 : _a.find((item) => item.name === "".concat(c.model.name, "_quicktoolbar"));
+        if (quickToolbar) {
+          return createVNode(resolveComponent("iBizToolbarControl"), {
+            "modelData": quickToolbar,
+            "context": c.context,
+            "params": c.params,
+            "class": ns.e("quick-toolbar")
+          }, null);
+        }
+        const noDataSlots = {};
+        if (hasEmptyPanelRenderer(c)) {
+          Object.assign(noDataSlots, {
+            customRender: () => createVNode(IBizCustomRender, {
+              "controller": c
+            }, null)
+          });
+        }
+        return createVNode(resolveComponent("iBizNoData"), {
+          "text": c.model.emptyText,
+          "emptyTextLanguageRes": c.model.emptyTextLanguageRes,
+          "hideNoDataImage": c.state.hideNoDataImage
+        }, _isSlot(noDataSlots) ? noDataSlots : {
+          default: () => [noDataSlots]
+        });
+      }
+      return createVNode("div", null, null);
+    };
+    const renderBatchToolBar = () => {
+      var _a;
+      const batchToolbar = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === "".concat(c.model.name, "_batchtoolbar");
+      });
+      if (!batchToolbar || c.state.singleSelect || !c.state.selectedData.length)
+        return;
+      return createVNode("div", {
+        "class": [ns.e("batch-toolbar"), ns.is("show", c.state.selectedData.length > 0)]
+      }, [createVNode("div", {
+        "class": ns.em("batch-toolbar", "content")
+      }, [createVNode("div", {
+        "class": ns.em("batch-toolbar", "text")
+      }, [ibiz.i18n.t("control.common.itemsSelected", {
+        length: c.state.selectedData.length
+      })]), createVNode("div", {
+        "class": ns.em("batch-toolbar", "separator")
+      }, [createTextVNode("|")]), createVNode(resolveComponent("iBizToolbarControl"), {
+        "modelData": batchToolbar,
+        "context": c.context,
+        "params": c.params,
+        "class": ns.b("batch-toolbar-items")
+      }, null)])]);
+    };
+    const renderHeaderCell = (params) => {
+      const {
+        column
+      } = params;
+      const {
+        type,
+        enableSort,
+        key,
+        title,
+        align
+      } = column;
+      const {
+        prop,
+        order
+      } = sortValue.value;
+      if (type === "selection")
+        return createVNode("div", {
+          "class": [ns.e("cell"), ns.e("header-cell"), ns.em("cell", align || "left")]
+        }, [createVNode(resolveComponent("el-checkbox"), {
+          "modelValue": isAllSelected(),
+          "onChange": (val) => handleSelectAll(val),
+          "indeterminate": c.state.selectedData.length > 0 && !isAllSelected()
+        }, null)]);
+      return createVNode("div", {
+        "class": [ns.e("cell"), ns.e("header-cell"), ns.is("sortable", !!enableSort), ns.em("cell", align || "left")],
+        "onClick": (e) => handleHeaderCellClick(e, column)
+      }, [createVNode("span", {
+        "class": ns.em("header-cell", "caption")
+      }, [title]), enableSort && createVNode("span", {
+        "class": ns.e("caret-wrapper")
+      }, [createVNode("i", {
+        "class": [ns.em("caret-wrapper", "asc"), ns.em("caret-wrapper", "sort-caret"), ns.is("active", prop === key && order === "asc")],
+        "onClick": (e) => handleSortClick(e, column, "asc")
+      }, null), createVNode("i", {
+        "class": [ns.em("caret-wrapper", "desc"), ns.em("caret-wrapper", "sort-caret"), ns.is("active", prop === key && order === "desc")],
+        "onClick": (e) => handleSortClick(e, column, "desc")
+      }, null)])]);
+    };
+    const renderBodyCell = (params) => {
+      const {
+        column,
+        rowData
+      } = params;
+      const {
+        type,
+        key,
+        align
+      } = column;
+      if (type === "selection")
+        return createVNode("div", {
+          "class": [ns.e("cell"), ns.e("body-cell"), ns.em("cell", align || "left")],
+          "onClick": (evt) => evt.stopPropagation()
+        }, [createVNode(resolveComponent("el-checkbox"), {
+          "onChange": () => handleSelectionChange(rowData),
+          "modelValue": isSelected(rowData)
+        }, null)]);
+      const controller = c.columns[key];
+      const {
+        columnType
+      } = controller.model;
+      const row = c.findRowState(rowData);
+      return createVNode("div", {
+        "class": [ns.e("cell"), ns.e("body-cell"), ns.em("cell", align || "left")]
+      }, [columnType === "DEFGRIDCOLUMN" ? createVNode(resolveComponent("iBizGridFieldColumn"), {
+        "controller": controller,
+        "row": row
+      }, null) : createVNode(resolveComponent("iBizGridUAColumn"), {
+        "controller": controller,
+        "row": row
+      }, null)]);
+    };
+    return {
+      c,
+      ns,
+      tableRef,
+      tableData,
+      columnModel,
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange,
+      renderNoData,
+      calcRowClass,
+      renderBodyCell,
+      handleRowClick,
+      calcColumnWidth,
+      handleDbRowClick,
+      renderHeaderCell,
+      renderBatchToolBar
+    };
+  },
+  render() {
+    if (!this.c.state.isCreated)
+      return;
+    return createVNode(resolveComponent("iBizControlNavigation"), {
+      "controller": this.c
+    }, {
+      default: () => [createVNode(resolveComponent("iBizControlBase"), {
+        "controller": this.c,
+        "class": [this.ns.b(), this.ns.m(this.c.overflowMode), this.ns.is("dynamic-grid", this.c.state.isAutoGrid), this.ns.is("show-header", !this.c.state.hideHeader), this.ns.is("enable-page", this.c.state.enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup), this.ns.is("single-select", this.c.state.singleSelect), this.ns.is("empty", this.c.state.items.length === 0), this.ns.is("enable-customized", this.c.model.enableCustomized)]
+      }, {
+        default: () => [createVNode(resolveComponent("el-auto-resizer"), null, {
+          default: ({
+            height,
+            width
+          }) => {
+            const columns = this.calcColumnWidth(this.columnModel, width);
+            return createVNode(resolveComponent("el-table-v2"), {
+              "fixed": true,
+              "ref": "tableRef",
+              "width": width,
+              "height": height,
+              "row-height": 54,
+              "columns": columns,
+              "header-height": 54,
+              "data": this.tableData,
+              "class": this.ns.e("table"),
+              "row-class": this.calcRowClass,
+              "row-event-handlers": {
+                onClick: ({
+                  event,
+                  rowData
+                }) => this.handleRowClick(event, rowData),
+                onDblclick: ({
+                  event,
+                  rowData
+                }) => this.handleDbRowClick(event, rowData)
+              }
+            }, {
+              empty: this.renderNoData,
+              cell: this.renderBodyCell,
+              "header-cell": this.renderHeaderCell
+            });
+          }
+        }), this.c.model.enableCustomized && !this.c.state.hideHeader && createVNode("div", {
+          "class": this.ns.e("setting-box")
+        }, [createVNode(resolveComponent("iBizGridSetting"), {
+          "controller": this.c,
+          "columnStates": this.c.state.columnStates
+        }, null)]), this.renderBatchToolBar()]
+      })]
+    });
+  }
+});
+
+export { VirtualizedTableControl };

package/es/control/grid/virtualized-table/virtualized-table.provider.d.ts

@@ -0,0 +1,10 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+/**
+ * @description 虚拟表格适配器
+ * @export
+ * @class VirtualizedTableProvider
+ * @implements {IControlProvider}
+ */
+export declare class VirtualizedTableProvider implements IControlProvider {
+    component: string;
+}

package/es/control/grid/virtualized-table/virtualized-table.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class VirtualizedTableProvider {
+  constructor() {
+    __publicField(this, "component", "IBizVirtualizedTableControl");
+  }
+}
+
+export { VirtualizedTableProvider };

package/es/control/grid/virtualized-table/virtualized-table.util.d.ts

@@ -0,0 +1,95 @@
+import { ComputedRef, Ref } from 'vue';
+import { ControlVO, GridController } from '@ibiz-template/runtime';
+type orderDir = 'asc' | 'desc' | undefined;
+/**
+ * @description 虚拟表格列模型
+ * @export
+ * @interface IColumn
+ */
+export interface IColumn {
+    /**
+     * @description 列唯一标识（列模型代码标识）
+     * @type {string}
+     * @memberof IColumn
+     */
+    key: string;
+    /**
+     * @description 列类型
+     * @type {string}
+     * @memberof IColumn
+     */
+    type: string;
+    /**
+     * @description 列宽
+     * @type {number}
+     * @memberof IColumn
+     */
+    width: number;
+    /**
+     * @description 宽度单位
+     * @type {string}
+     * @memberof IColumn
+     */
+    widthUnit: string;
+    /**
+     * @description 是否隐藏列
+     * @type {boolean}
+     * @memberof IColumn
+     */
+    hidden: boolean;
+    /**
+     * @description 列标题
+     * @type {string}
+     * @memberof IColumn
+     */
+    title?: string;
+    /**
+     * @description 表格单元格内容对齐方式
+     * @type {('left' | 'center' | 'right')}
+     * @memberof IColumn
+     */
+    align?: string;
+    /**
+     * @description 列的类名
+     * @type {string}
+     * @memberof IColumn
+     */
+    class?: string;
+    /**
+     * @description 头部单元格样式
+     * @type {string}
+     * @memberof IColumn
+     */
+    headerClass?: string;
+    /**
+     * @description 固定列位置
+     * @type {('left' | 'right')}
+     * @memberof IColumn
+     */
+    fixed?: 'left' | 'right';
+    /**
+     * @description 设置列是否排序
+     * @type {boolean}
+     * @memberof IColumn
+     */
+    enableSort?: boolean;
+}
+export declare function useVirtualizedTable(c: GridController, props: IData): {
+    tableRef: Ref<any>;
+    tableData: ComputedRef<ControlVO[]>;
+    sortValue: ComputedRef<{
+        prop?: string;
+        order: orderDir;
+    }>;
+    columnModel: ComputedRef<IColumn[]>;
+    isAllSelected(): boolean;
+    isSelected(data: ControlVO): boolean;
+    handleSelectAll(state: boolean): void;
+    handleSelectionChange(data: ControlVO): void;
+    handleSortClick(event: MouseEvent, column: IColumn, newOrder: orderDir): void;
+    calcColumnWidth(_columns: IColumn[], bodyWidth: number): IColumn[];
+    handleRowClick(event: MouseEvent, data: ControlVO): Promise<void>;
+    handleDbRowClick(event: MouseEvent, data: ControlVO): Promise<void>;
+    handleHeaderCellClick(event: MouseEvent, column: IColumn): void;
+};
+export {};