跳转至

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: '上海' },
    ]}
/>