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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现动态表格提交参数动态生成控件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue antd Form表单的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue如何实现拖动图片进行排序Vue.Draggable，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
element-ui中table组件的toggleRowSelection()方法使用
这篇文章主要介绍了element-ui中table组件的toggleRowSelection()方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了Vue响应式系统的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了从零开始在NPM上发布一个Vue组件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Vue3全局属性app.config.globalProperties的实现
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
vue3 element-plus 实现表格数据更改功能详细步骤
这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧2021-06-06
Vue中使用定时器(setInterval、setTimeout)的两种方式
js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout，这篇文章主要介绍了Vue中使用定时器 （setInterval、setTimeout）的两种方式,需要的朋友可以参考下2023-03-03
最新评论