antdv table二次封装（slots动态渲染的问题）

Antdv Table的二次封装与Slots动态渲染实践

最新推荐文章于 2025-10-17 04:59:55 发布

原创

最新推荐文章于 2025-10-17 04:59:55 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #tablet

本文介绍了如何对Ant Design Vue的Table组件进行二次封装，特别是在使用Slots进行动态渲染时遇到的问题及解决方案。通过封装a-table，实现了更灵活的组件复用和定制化需求。

组件自己封装的an-table

<an-table
    :loading="context.loading"
    :table-columns="pipeColumn"
    :table-data="context.dataSource"
    :scroll="{ y: 550 }"
    :rowClassName="
        (record, index) => (index % 2 === 0 ? 'table-striped' : null)
    "
>
    <template #reuse="{ text }">
        <div class="align-right">
            <span class="text">{
 
 { text }}</span>
            <span class="unit">m³</span>
        </div>
    </template>
    <template #use="{ text }">
        <span class="text">{
 
 { text }}</span>
        <span class="unit">m³</span>
    </template>
</an-table>

封装调用的a-table

<a-table
    row-key="id"
    :pagination="false"
    :loading="tableLoading"
    :columns="tableColumns"
    :data-source="tableData"
    :scroll="scroll"
    :rowClassName="rowClassName"
>
    // 循环调用外层的slots 模板 &nb