Vue3中Slot插槽透传,二次封装Arco的table组件详解
更新时间：2025年04月18日 14:22:42 作者：西魏陶渊明
这篇文章主要介绍了Vue3中Slot插槽透传,二次封装Arco的table组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue3中Slot插槽透传,二次封装Arco的table组件
Vue3 插槽透传
需求是这样, 对acro的table表格进行二次封装。
封装成一个 <SearchTable> 组件。要求二次封装的组件可以将slot透传给原生的table组件。
如下这样，将SearchTable中的插槽透传给 <a-table>
<SearchTable
:search-model="searchModel"
:table-cols="cols"
:table-data="tableData"
:pagination="pagination"
@search="searchTableAction"
>
<template #channelCode="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }} - {{ column }}
</template>
<template #channelName="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }}- {{ column }}
</template>
<template #status="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }}- {{ column }}
</template>
</SearchTable>一共有下面几个字段：
const cols = [
{
title: '渠道编码',
dataIndex: 'channelCode',
slotName: 'channelCode',
},
{
title: '渠道名称',
dataIndex: 'channelName',
slotName: 'channelName',
},
{
title: '状态',
dataIndex: 'status',
slotName: 'status',
},
];步骤
首先我们先明白原组件的使用。
arco 中的table组件, 当定义了插槽就渲染插槽。当没有定义的时候就正常显示table表格中的数据。
因为我们要对table组件进行二次封装,所以我们要将table中的插槽透传出去。下面是实现原理。
1. 知道父组件传递了一个slot
这里我们要用一个vue3中的API，useSlots(), 我们要用这个api来判断父组件是否传递了插槽。
- 从slots中获取父组件传的插槽信息,如果没有则就使用
arco中默认的。即正常展示。当自定义了插槽, 就选择插槽的内容。 - 插槽的参数传递是
v-slot:[key]="{ record, rowIndex, column }"这里的参数是arco中传递的。 - 然后我们在透传给我们的自己的插槽。
:name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"<template>
<a-table
row-key="id"
:loading="loading"
:pagination="pagination"
:columns="(cloneColumns as TableColumnData[])"
:data="tableData"
:bordered="false"
:size="size"
@page-change="onPageChange"
>
<!-- key 就是 slotName-->
<template
v-for="(item, key, i) in slots"
:key="i"
v-slot:[key]="{ record, rowIndex, column }"
>
<slot
:name="key"
v-bind="{ rowIndex: rowIndex, record: record, column: column }"
></slot>
</template>
</a-table>
</template>
<script lang="ts" setup>
import {
useSlots,
} from 'vue';
const slots = useSlots();
</script> 2. 父组件使用
<SearchTable
:search-model="searchModel"
:table-cols="cols"
:table-data="tableData"
:pagination="pagination"
@search="searchTableAction"
>
<template #channelCode="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }} - {{ column }}
</template>
<template #channelName="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }}- {{ column }}
</template>
<template #status="{ record, rowIndex, column }">
{{ record }} - {{ rowIndex }}- {{ column }}
</template>
</SearchTable>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下2022-12-12
前端vue2+js+springboot实现excle导入优化解决方案
这篇文章主要介绍了前端vue2+js+springboot实现excle导入优化的相关资料,前端优化包括使用ElementUI组件和封装的JS解析函数,后端重点在于多线程处理,通过定义线程安全技术及数据分片实现高效导入,需要的朋友可以参考下2025-11-11
这篇文章主要介绍了vue-rx的初步使用教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue使用v-model收集各种表单数据、过滤器的示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
vue中的v-show,v-if,v-bind的使用示例详解
这篇文章主要介绍了vue中的v-show,v-if,v-bind的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
vue+openlayers+nodejs+postgis实现轨迹运动效果
使用postgres（postgis）数据库以及nodejs作为后台,vue和openlayers做前端,openlayers使用http请求通过nodejs从postgres数据库获取数据,这篇文章主要介绍了vue+openlayers+nodejs+postgis实现轨迹运动,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了Vue实现省市区三级联动el-select组件的方法，文中的示例代码讲解详细，具有一定的借鉴价值，需要的的可以参考一下2023-02-02
本文主要介绍了element合并表格行的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了vue+Element实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了如何使用Vue3实现列表无限滚动的效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-07-07
最新评论