MTable 组件使用文档

概述

MTable 是基于 Element Plus 封装的表格组件，提供以下特性：

• 支持自定义列配置（多级表头、slot 渲染）
• 自动过滤 undefined 属性，安全透传给 ElTable
• 支持 Element Plus ElTable 所有属性透传

Props

| 参数 | 类型 | 必填 | 默认值 | 描述 | |------------|------|------|--------|------| | data | TableRow[] | 否 | [] | 表格数据源 | | columns | TableColumnConfig[] | 否 | [] | 列配置数组，每列可配置 label、prop、slot、children 等 | | autoHeight | boolean | 否 | false | 是否自适应父容器高度 |

列配置 columns

columns 是数组，支持ElTableColumn 所有属性透传：

| 属性 | 类型 | 必填 | 默认值 | 描述 | |------|------|------|--------|------| | label | string | 是 | - | 列标题 | | prop | string | 是 | - | 对应数据字段 | | slot | string | 否 | - | 指定使用的命名插槽 | | children | TableColumnConfig[] | 否 | - | 子列，用于多级表头 |

插槽说明

如果列配置里指定了 slot，可以用命名插槽自定义渲染：

| 插槽名 | 参数 | 描述 | |--------|------|------| | 任意 slot 名 | { row } | row 为当前行数据，插槽内可自定义渲染 |

示例

<MTable :data="tableData" :columns="columns">
    <template #name="attr">
        <MTableColumn v-bind="attr">
            <template #default="{ row }">
                <ElButton link type="primary" size="small">
                    编辑
                </ElButton>
            </template>
        </MTableColumn>
    </template>
</MTable>