hfn-components 0.6.6 → 0.6.7

package/dist/index.css

@@ -1 +1 @@
-.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.header-text-wrap{line-height:1.5;white-space:pre-line}
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.check_item{align-items:center;cursor:grab}.check_item:active{cursor:grabbing}.ghost{background:#f0f0f0;opacity:.5}.close-icon{cursor:pointer}.close-icon:hover{color:#909399!important}.ht-table-wrapper{display:flex;flex-direction:column;height:100%}.ht-table-wrapper .el-table{flex:1;min-height:0}.ht-table-wrapper .el-table__empty-text{line-height:normal}.ht-table-cell-copy{align-items:center;display:inline-flex;gap:4px;width:100%}.ht-table-cell-text{flex:none;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ht-copy-icon{color:#909399;cursor:pointer;flex-shrink:0;font-size:14px;opacity:0;transition:opacity .2s}.ht-copy-icon:hover{color:#d70c19}.el-table__row:hover .ht-copy-icon{opacity:1}.ht-table-pagination{align-items:center;display:flex;justify-content:flex-end;padding:12px 0}.ht-table-wrapper .el-table__column-filter-trigger .el-icon svg{display:none}.ht-table-wrapper .el-table__column-filter-trigger .el-icon:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23909399' d='M384 523.392V928a32 32 0 0 0 46.336 28.608l192-96A32 32 0 0 0 640 832V523.392l280.768-343.104a32 32 0 1 0-49.536-40.576l-288 352A32 32 0 0 0 576 512v300.224l-128 64V512a32 32 0 0 0-7.232-20.288L195.52 192H704a32 32 0 1 0 0-64H128a32 32 0 0 0-24.768 52.288z'/%3E%3C/svg%3E") no-repeat 50%;background-size:contain;content:"";display:inline-block;height:14px;width:14px}

package/es/components/chart/index.mjs

@@ -1,5 +1,6 @@
 import chart from './src/HtChart.vue.mjs';
 import { withInstall } from '../../utils/common.mjs';
+import '../../constants/chartConfig.mjs';
 export { chartProps } from './src/HtChart.mjs';
 
 const HtChart = withInstall(chart);

package/es/components/htTable/index.d.ts

@@ -20,7 +20,41 @@ export declare const HtTable: import("hfn-components/es/utils").SFCWithInstall<{
             readonly type: BooleanConstructor;
             readonly default: true;
         };
-    }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+        readonly selectable: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly rowKey: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly selectedRows: {
+            readonly type: ArrayConstructor;
+            readonly default: () => never[];
+        };
+        readonly pagination: {
+            readonly type: import("vue").PropType<import("./src/htTable").PaginationConfig>;
+            readonly default: undefined;
+        };
+    }>> & {
+        "onSelection-change"?: ((rows: any[]) => any) | undefined;
+        "onSort-change"?: ((args_0: {
+            field: string;
+            order: "ascending" | "descending" | null;
+        }) => any) | undefined;
+        "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+        "onPage-change"?: ((current: number) => any) | undefined;
+        "onSize-change"?: ((pageSize: number) => any) | undefined;
+    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "selection-change": (rows: any[]) => void;
+        "sort-change": (args_0: {
+            field: string;
+            order: "ascending" | "descending" | null;
+        }) => void;
+        "filter-change": (args_0: Record<string, string[]>) => void;
+        "page-change": (current: number) => void;
+        "size-change": (pageSize: number) => void;
+    }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         readonly dataSource: {
             readonly type: ArrayConstructor;
             readonly default: () => never[];
@@ -41,12 +75,41 @@ export declare const HtTable: import("hfn-components/es/utils").SFCWithInstall<{
             readonly type: BooleanConstructor;
             readonly default: true;
         };
-    }>>, {
+        readonly selectable: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly rowKey: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly selectedRows: {
+            readonly type: ArrayConstructor;
+            readonly default: () => never[];
+        };
+        readonly pagination: {
+            readonly type: import("vue").PropType<import("./src/htTable").PaginationConfig>;
+            readonly default: undefined;
+        };
+    }>> & {
+        "onSelection-change"?: ((rows: any[]) => any) | undefined;
+        "onSort-change"?: ((args_0: {
+            field: string;
+            order: "ascending" | "descending" | null;
+        }) => any) | undefined;
+        "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+        "onPage-change"?: ((current: number) => any) | undefined;
+        "onSize-change"?: ((pageSize: number) => any) | undefined;
+    }, {
         readonly dataSource: unknown[];
         readonly tableColumn: import("./src/htTable").ElTableColumns[];
         readonly loading: boolean;
         readonly headerColor: string;
         readonly resizable: boolean;
+        readonly selectable: boolean;
+        readonly rowKey: string;
+        readonly selectedRows: unknown[];
+        readonly pagination: import("./src/htTable").PaginationConfig;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -75,12 +138,41 @@ export declare const HtTable: import("hfn-components/es/utils").SFCWithInstall<{
             readonly type: BooleanConstructor;
             readonly default: true;
         };
-    }>>, {}, {}, {}, {}, {
+        readonly selectable: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly rowKey: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly selectedRows: {
+            readonly type: ArrayConstructor;
+            readonly default: () => never[];
+        };
+        readonly pagination: {
+            readonly type: import("vue").PropType<import("./src/htTable").PaginationConfig>;
+            readonly default: undefined;
+        };
+    }>> & {
+        "onSelection-change"?: ((rows: any[]) => any) | undefined;
+        "onSort-change"?: ((args_0: {
+            field: string;
+            order: "ascending" | "descending" | null;
+        }) => any) | undefined;
+        "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+        "onPage-change"?: ((current: number) => any) | undefined;
+        "onSize-change"?: ((pageSize: number) => any) | undefined;
+    }, {}, {}, {}, {}, {
         readonly dataSource: unknown[];
         readonly tableColumn: import("./src/htTable").ElTableColumns[];
         readonly loading: boolean;
         readonly headerColor: string;
         readonly resizable: boolean;
+        readonly selectable: boolean;
+        readonly rowKey: string;
+        readonly selectedRows: unknown[];
+        readonly pagination: import("./src/htTable").PaginationConfig;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -106,14 +198,52 @@ export declare const HtTable: import("hfn-components/es/utils").SFCWithInstall<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<import("./src/htTable").PaginationConfig>;
+        readonly default: undefined;
+    };
+}>> & {
+    "onSelection-change"?: ((rows: any[]) => any) | undefined;
+    "onSort-change"?: ((args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => any) | undefined;
+    "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+    "onPage-change"?: ((current: number) => any) | undefined;
+    "onSize-change"?: ((pageSize: number) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection-change": (rows: any[]) => void;
+    "sort-change": (args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => void;
+    "filter-change": (args_0: Record<string, string[]>) => void;
+    "page-change": (current: number) => void;
+    "size-change": (pageSize: number) => void;
+}, string, {
     readonly dataSource: unknown[];
     readonly tableColumn: import("./src/htTable").ElTableColumns[];
     readonly loading: boolean;
     readonly headerColor: string;
     readonly resizable: boolean;
+    readonly selectable: boolean;
+    readonly rowKey: string;
+    readonly selectedRows: unknown[];
+    readonly pagination: import("./src/htTable").PaginationConfig;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: Partial<Record<string, (_: {
+    $slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
         text: any;
         row: any;
     }) => any>>;

package/es/components/htTable/index.mjs

@@ -1,5 +1,6 @@
 import elTable from './src/htTable.vue.mjs';
 import { withInstall } from '../../utils/common.mjs';
+import '../../constants/chartConfig.mjs';
 export { columnDealProps, elTableProps } from './src/htTable.mjs';
 
 const HtTable = withInstall(elTable);

package/es/components/htTable/src/columnDeal.vue.d.ts

@@ -33,8 +33,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => void;
     };
 }>>, {
-    readonly dealType: "basicText4" | "colorText" | "colorPercentage" | "percentage" | "percentage4" | "absPercentage" | "thoundsandText2" | "thoundsandText4" | "notProcessed" | "other" | "customDeal" | "customSlot";
     readonly text: string | number | undefined;
+    readonly dealType: "colorPercentage" | "percentage" | "basicText4" | "notProcessed" | "colorText" | "percentage4" | "absPercentage" | "thousandText2" | "thousandText4" | "other" | "customDeal" | "customSlot";
     readonly dealFunction: Function;
     readonly row: Record<string, any>;
 }, {}>;

package/es/components/htTable/src/columnDeal.vue.mjs

@@ -4,16 +4,23 @@ import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { key: 1 };
-const _hoisted_3 = ["innerHTML"];
-const _hoisted_4 = { key: 3 };
+const _hoisted_3 = { key: 2 };
+const _hoisted_4 = ["innerHTML"];
+const _hoisted_5 = { key: 4 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.dealType === "notProcessed" || _ctx.dealType === "other" ? (openBlock(), createElementBlock(
-    "div",
+  return _ctx.dealType === "notProcessed" ? (openBlock(), createElementBlock(
+    "span",
     _hoisted_1,
-    toDisplayString(_ctx.text),
+    toDisplayString(_ctx.text ?? "-"),
     1
     /* TEXT */
-  )) : _ctx.dealType === "colorText" || _ctx.dealType === "colorPercentage" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+  )) : _ctx.dealType === "other" ? (openBlock(), createElementBlock(
+    "span",
+    _hoisted_2,
+    toDisplayString(_ctx.text ?? "-"),
+    1
+    /* TEXT */
+  )) : _ctx.dealType === "colorText" || _ctx.dealType === "colorPercentage" ? (openBlock(), createElementBlock("span", _hoisted_3, [
     createElementVNode(
       "span",
       {
@@ -23,12 +30,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       5
       /* TEXT, STYLE */
     )
-  ])) : _ctx.dealType === "customDeal" ? (openBlock(), createElementBlock("div", {
-    key: 2,
+  ])) : _ctx.dealType === "customDeal" ? (openBlock(), createElementBlock("span", {
+    key: 3,
     innerHTML: _ctx.dealFunction(_ctx.row, _ctx.text)
-  }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock(
-    "div",
-    _hoisted_4,
+  }, null, 8, _hoisted_4)) : (openBlock(), createElementBlock(
+    "span",
+    _hoisted_5,
     toDisplayString(_ctx.text !== void 0 ? $setup.CLOUMN_DEAL[_ctx.dealType](_ctx.text) : "-"),
     1
     /* TEXT */

package/es/components/htTable/src/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-selection';
+export * from './use-pagination';
+export * from './use-copy';

package/es/components/htTable/src/composables/index.mjs

@@ -0,0 +1,3 @@
+export { useSelection } from './use-selection.mjs';
+export { usePagination } from './use-pagination.mjs';
+export { useCopy } from './use-copy.mjs';

package/es/components/htTable/src/composables/use-copy.d.ts

@@ -0,0 +1,3 @@
+export declare function useCopy(): {
+    handleCopy: (text: string | number | undefined) => Promise<void>;
+};

package/es/components/htTable/src/composables/use-copy.mjs

@@ -0,0 +1,24 @@
+import { ElMessage } from 'element-plus';
+
+function useCopy() {
+  const handleCopy = async (text) => {
+    if (text === void 0 || text === null) return;
+    try {
+      await navigator.clipboard.writeText(String(text));
+      ElMessage.success({ message: "\u590D\u5236\u6210\u529F", offset: window.innerHeight / 3, plain: true });
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = String(text);
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      ElMessage.success({ message: "\u590D\u5236\u6210\u529F", offset: window.innerHeight / 3, plain: true });
+    }
+  };
+  return { handleCopy };
+}
+
+export { useCopy };

package/es/components/htTable/src/composables/use-pagination.d.ts

@@ -0,0 +1,13 @@
+import type { PaginationConfig } from '../htTable';
+interface UsePaginationOptions {
+    pagination: () => PaginationConfig | undefined;
+}
+export declare function usePagination(options: UsePaginationOptions): {
+    currentPage: import("vue").ComputedRef<number>;
+    pageSize: import("vue").ComputedRef<number>;
+    total: import("vue").ComputedRef<number>;
+    getRowIndex: (index: number) => number;
+    handleCurrentChange: (page: number, emit: (event: "page-change", payload: number) => void) => void;
+    handleSizeChange: (size: number, emit: (event: "size-change", payload: number) => void) => void;
+};
+export {};

package/es/components/htTable/src/composables/use-pagination.mjs

@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+
+function usePagination(options) {
+  const { pagination } = options;
+  const currentPage = computed(() => {
+    return pagination()?.current || 1;
+  });
+  const pageSize = computed(() => {
+    return pagination()?.pageSize || 10;
+  });
+  const total = computed(() => {
+    return pagination()?.total || 0;
+  });
+  const getRowIndex = (index) => {
+    return (currentPage.value - 1) * pageSize.value + index + 1;
+  };
+  const handleCurrentChange = (page, emit) => {
+    emit("page-change", page);
+  };
+  const handleSizeChange = (size, emit) => {
+    emit("size-change", size);
+  };
+  return {
+    currentPage,
+    pageSize,
+    total,
+    getRowIndex,
+    handleCurrentChange,
+    handleSizeChange
+  };
+}
+
+export { usePagination };

package/es/components/htTable/src/composables/use-selection.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import type { ElTable } from 'element-plus';
+interface UseSelectionOptions {
+    tableRef: Ref<InstanceType<typeof ElTable> | undefined>;
+    dataSource: () => any[];
+    selectedRows: () => any[];
+    rowKey: () => string;
+}
+export declare function useSelection(options: UseSelectionOptions, onSelectionChange: (rows: any[]) => void): {
+    handleSelectionChange: (rows: any[]) => void;
+};
+export {};

package/es/components/htTable/src/composables/use-selection.mjs

@@ -0,0 +1,58 @@
+import { watch, nextTick } from 'vue';
+
+function useSelection(options, onSelectionChange) {
+  const { tableRef, dataSource, selectedRows, rowKey } = options;
+  const handleSelectionChange = (rows) => {
+    onSelectionChange(rows);
+  };
+  const findRow = (item) => {
+    return dataSource().find((r) => r[rowKey()] === item[rowKey()]);
+  };
+  watch(
+    dataSource,
+    () => {
+      nextTick(() => {
+        if (!rowKey() || !selectedRows().length) return;
+        selectedRows().forEach((item) => {
+          const row = findRow(item);
+          if (row) {
+            tableRef.value?.toggleRowSelection(row, true);
+          }
+        });
+      });
+    },
+    { immediate: true }
+  );
+  watch(
+    selectedRows,
+    (newRows, oldRows) => {
+      nextTick(() => {
+        if (!rowKey()) return;
+        const oldSet = new Set((oldRows || []).map((r) => r[rowKey()]));
+        const newSet = new Set(newRows.map((r) => r[rowKey()]));
+        newRows.forEach((item) => {
+          if (!oldSet.has(item[rowKey()])) {
+            const row = findRow(item);
+            if (row) {
+              tableRef.value?.toggleRowSelection(row, true);
+            }
+          }
+        });
+        (oldRows || []).forEach((item) => {
+          if (!newSet.has(item[rowKey()])) {
+            const row = findRow(item);
+            if (row) {
+              tableRef.value?.toggleRowSelection(row, false);
+            }
+          }
+        });
+      });
+    },
+    { deep: true }
+  );
+  return {
+    handleSelectionChange
+  };
+}
+
+export { useSelection };

package/es/components/htTable/src/htTable.d.ts

@@ -1,12 +1,30 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import type { clounmKyeType, dealKeyType } from 'hfn-components/es/constants';
+interface FilterOption {
+    text: string;
+    value: string;
+}
+export interface PaginationConfig {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    pageSizes?: number[];
+    layout?: string;
+}
 export interface ElTableColumns {
     key: clounmKyeType;
-    dealType: dealKeyType;
+    dataKey?: string;
+    dealType?: dealKeyType;
     dealFunction?: Function;
-    width: string | number;
+    width?: string | number;
     customizeLabel?: string;
     slot?: string;
+    headerSlot?: string;
+    sortable?: boolean | 'custom';
+    filterable?: boolean;
+    filters?: FilterOption[];
+    copyable?: boolean;
+    headerAlign?: 'left' | 'center' | 'right';
 }
 export declare const elTableProps: {
     readonly dataSource: {
@@ -29,6 +47,22 @@ export declare const elTableProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: PropType<PaginationConfig>;
+        readonly default: undefined;
+    };
 };
 export declare const columnDealProps: {
     readonly dealType: {
@@ -50,3 +84,4 @@ export declare const columnDealProps: {
 };
 export type ElTableProps = ExtractPropTypes<typeof elTableProps>;
 export type ColumnDealProps = ExtractPropTypes<typeof columnDealProps>;
+export {};

package/es/components/htTable/src/htTable.mjs

@@ -19,6 +19,28 @@ const elTableProps = {
     type: Boolean,
     default: true
     // 默认允许手动拉伸列宽
+  },
+  // 多选相关
+  selectable: {
+    type: Boolean,
+    default: false
+    // 是否显示多选列
+  },
+  rowKey: {
+    type: String,
+    default: ""
+    // 行数据唯一标识字段
+  },
+  selectedRows: {
+    type: Array,
+    default: () => []
+    // 外部传入要选中的行
+  },
+  // 分页相关
+  pagination: {
+    type: Object,
+    default: void 0
+    // 不传则不显示分页
   }
 };
 const columnDealProps = {

package/es/components/htTable/src/htTable.vue.d.ts

@@ -1,4 +1,4 @@
-declare function __VLS_template(): Partial<Record<string, (_: {
+declare function __VLS_template(): Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {
     text: any;
     row: any;
 }) => any>>;
@@ -23,7 +23,32 @@ declare const __VLS_component: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<import("./htTable").PaginationConfig>;
+        readonly default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selection-change": (rows: any[]) => void;
+    "sort-change": (args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => void;
+    "filter-change": (args_0: Record<string, string[]>) => void;
+    "page-change": (current: number) => void;
+    "size-change": (pageSize: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly dataSource: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
@@ -44,12 +69,41 @@ declare const __VLS_component: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-}>>, {
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rowKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly selectedRows: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<import("./htTable").PaginationConfig>;
+        readonly default: undefined;
+    };
+}>> & {
+    "onSelection-change"?: ((rows: any[]) => any) | undefined;
+    "onSort-change"?: ((args_0: {
+        field: string;
+        order: "ascending" | "descending" | null;
+    }) => any) | undefined;
+    "onFilter-change"?: ((args_0: Record<string, string[]>) => any) | undefined;
+    "onPage-change"?: ((current: number) => any) | undefined;
+    "onSize-change"?: ((pageSize: number) => any) | undefined;
+}, {
     readonly dataSource: unknown[];
     readonly tableColumn: import("./htTable").ElTableColumns[];
     readonly loading: boolean;
     readonly headerColor: string;
     readonly resizable: boolean;
+    readonly selectable: boolean;
+    readonly rowKey: string;
+    readonly selectedRows: unknown[];
+    readonly pagination: import("./htTable").PaginationConfig;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;