类型定义

导入

// 组件入口
import {
  XTable,                              // 组件
  useXTableApi,                        // API hook
  tableComponentRegistry,              // 组件注册表
  ColumnType,                          // 列类型常量 { Selection, Index, Expand }
  type ColumnConfig,                   // 列配置类型
  type XTableProps,                    // 组件 Props
  type XTableApi,                      // API 实例类型
  type XTableEvents,                   // 事件类型
  type FetchFn,                        // 远程获取函数类型
  type FetchResult,                    // 远程获取结果类型
  type PaginationConfig,               // 分页配置类型
  type ColumnSlotProps,                // 插槽 props 类型
} from '@/components/XTable'

泛型用法

XTable 是泛型组件，模板中可直接使用 <XTable<User>>，但通常在 columns 类型中通过 ColumnConfig<User> 即可让所有类型推断生效：

interface User {
  id: number
  name: string
  status: number
}

const columns: ColumnConfig<User>[] = [
  { prop: 'id', label: 'ID' },
  { prop: 'name', label: '姓名' },
  { prop: 'status', label: '状态' },
]

FetchFn 类型

type FetchFn<T> = (params: Record<string, any>) => Promise<FetchResult<T>>

type FetchResult<T> = {
  data: T[]
  total: number
}

XTableApi 类型

继承 EP TableInstance 全部方法，并扩展：

interface XTableApi<T> extends TableInstance {
  event: XTableEvents<T>
  getData(): T[]
  setData(data: T[]): void
  fetchData(params?: Record<string, any>): Promise<void>
  getQueryParams(): Record<string, any>
  setQueryParams(params: Record<string, any>): void
  readonly loading: boolean
  readonly total: number
  setPage(page: number): void
  setPageSize(size: number): void
  getPagination(): { page: number; pageSize: number }
  resetPagination(): void
}

ColumnSlotProps 类型

interface ColumnSlotProps<T> {
  row?: T           // 单元格插槽有值；表头插槽为 undefined
  column: ColumnConfig<T>
  $index: number
}