MTable 表格组件文档
组件概述
MTable 是基于 Ant Design Table 封装的增强型表格组件,内置主题支持和默认配置优化,简化了表格的使用方式。
组件特性
- 主题集成:通过
CompThemeProvider支持主题定制 - 自动映射:自动将
columns.key映射为dataIndex - 默认主键:默认使用
id作为rowKey - 类型安全:完整继承 Ant Design Table 的所有类型定义
组件属性 (IMTableProps)
继承 Ant Design 的 TableProps 所有属性,包括:
| 常用属性 | 类型 | 默认值 | 描述 |
| ---------- | --------------- | ---------------------- | ------------ | ---------- | -------- |
| columns | ColumnsType[] | - | 表格列配置 |
| dataSource | any[] | [] | 表格数据 |
| rowKey | string | (record) => string | "id" | 行唯一标识 |
| pagination | boolean | TablePaginationConfig | - | 分页配置 |
| loading | boolean | false | 加载状态 |
| bordered | boolean | false | 是否显示边框 |
| size | 'large' | 'middle' | 'small' | 'middle' | 表格尺寸 |
完整属性请参考 Ant Design Table API
使用示例
基本用法
<MTable
columns={[
{ key: 'name', title: '姓名' },
{ key: 'age', title: '年龄' },
{ key: 'address', title: '地址' },
]}
dataSource={[
{ id: 1, name: '张三', age: 28, address: '北京' },
{ id: 2, name: '李四', age: 32, address: '上海' },
]}
/>