类型优化

src/components/common-table/common-table-column.vue

@@ -1,23 +1,7 @@
 <script setup>
-/**
- * 表格列配置信息，对应el-table-column数据
- * @typedef {Object} CommonTableColumn
- * @property {string} label 标签头
- * @property {string} labelKey 国际化
- * @property {string} property 数据属性
- * @property {string} width 宽度
- * @property {boolean} isOperation 是否是操作列
- * @property {string} slot 自定义插槽
- * @property [ButtonProps] buttons 自定义按钮
- * @property {Object} attrs 其他属性
- * @property {Object} linkAttrs 链接配置
- * @method click 点击事件
- * @method formatter 格式化
- */
 /**
  * 配置信息
- * @property {CommonTableColumn[]} columns 表格显示列配置
- * @buttonSize {''|'large'|'small'|'default'}
+ * @type {CommonTableColumnProps}
  */
 const props = defineProps({
   /**

src/components/common-table/index.vue

@@ -2,10 +2,6 @@
 import CommonTableColumn from '@/components/common-table/common-table-column.vue'
 import { computed, ref } from 'vue'
 
-/**
- * @typedef {TableProps} CommonTableProps
- * @property {[CommonTableColumn]} columns
- */
 /**
  * @type CommonTableProps
  */
@@ -60,6 +56,9 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  /**
+   * @type {CommonPage}
+   */
   page: {
     type: Object,
     default: null

src/components/common-table/public.d.ts

@@ -0,0 +1,74 @@
+import {ButtonProps, TableProps} from "element-plus";
+import {CommonPage} from "../public";
+import {PaginationProps} from "element-plus/es/components/pagination/src/pagination";
+
+/**
+ * 表格列定义
+ */
+export interface CommonTableColumn {
+    // 表格头
+    label: string;
+    // 表格头国际化key
+    labelKey: string;
+    // 属性名
+    property: string;
+    // 属性名，同property
+    prop: string;
+    // 宽度
+    width: string;
+    // 是否是可操作列
+    isOperation: boolean;
+    // 自定义插槽名称，用于自定义显示数据
+    slot: string;
+    // 自定义按钮
+    buttons: Array<ButtonProps>
+    // 可选属性
+    attrs: any;
+    // 链接可选属性
+    linkAttrs: any;
+    // 点击事件
+    click: (data: any) => any;
+    // 格式化函数
+    formatter: (data: any, scope: any) => string;
+}
+
+/**
+ * 表格配置
+ */
+export interface CommonTableProps extends TableProps<any> {
+    /** 列配置 */
+    columns: Array<CommonTableColumn>;
+    /** 显示数据 */
+    data: Array<any>;
+    /** 高亮当前行 */
+    highlightCurrentRow: boolean;
+    /** stripe */
+    stripe: boolean;
+    /** 边框配置 */
+    border: boolean;
+    /** 自定义按钮配置 */
+    buttons?: Array<ButtonProps>;
+    /** buttons插槽 */
+    buttonsSlot?: string;
+    /** 默认的按钮大小 */
+    buttonSize?: string;
+    /** 按钮列配置 */
+    buttonsColumnAttrs?: {
+        [key: string]: any
+    };
+    /** 分页配置 */
+    page?: CommonPage;
+    /** 分页对齐 */
+    pageAlign?: 'left' | 'center' | 'right';
+    /** 其他分页配置项 */
+    pageAttrs?: PaginationProps;
+    /**loading状态*/
+    loading?: boolean;
+    /**loading显示消息*/
+    loadingText?: string;
+}
+
+export interface CommonTableColumnProps {
+    column: CommonTableColumn,
+    buttonSize: '' | 'small' | 'large' | 'default'
+}