快速开始

XTable 是基于 Element Plus el-table 的声明式二次封装表格组件。

特性

• 列配置驱动渲染，无需手写一堆 <el-table-column>
• 单元格支持 3 种渲染方式：动态组件 / 自定义插槽 / formatter
• 多级表头、自定义表头插槽
• 内置静态分页 / 远程分页（自动注入 page / pageSize）
• 远程数据加载（fetchFn）
• 类型安全：XTableProps 继承 EP TableProps、ColumnConfig 继承 TableColumnCtx、API 继承 EP TableInstance
• 事件代理：通过 api.event['xxx'] = fn 注册（kebab-case / camelCase 均可）
• 可注册自定义组件作为单元格渲染器

安装

确保你的项目已安装 element-plus，然后将 XTable 组件引入到你的项目中：

# 确保已安装 element-plus
pnpm add element-plus

基础用法

<template>
  <XTable :columns="columns" :data="data" border stripe />
</template>

<script setup lang="ts">
import { XTable, type ColumnConfig } from '@/components/XTable'

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

const columns: ColumnConfig<User>[] = [
  { prop: 'id', label: 'ID', width: 80, align: 'center' },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, align: 'center' },
]

const data: User[] = [
  { id: 1, name: '张三', age: 28 },
  { id: 2, name: '李四', age: 32 },
]
</script>

所有 EP el-table 原生属性（border / stripe / height / row-key 等）可直接写在 <XTable> 上。