IT俱乐部 JavaScript Vue3中Slot插槽透传,二次封装Arco的table组件详解

Vue3中Slot插槽透传,二次封装Arco的table组件详解

Vue3中Slot插槽透传,二次封装Arco的table组件

Vue3 插槽透传

需求是这样, 对acro的table表格进行二次封装。

封装成一个 组件。要求二次封装的组件可以将slot透传给原生的table组件。

如下这样,将SearchTable中的插槽透传给

1
2
3
4
5
{{ record }} - {{ rowIndex }} - {{ column }}
 
{{ record }} - {{ rowIndex }}- {{ column }}
 
{{ record }} - {{ rowIndex }}- {{ column }}

一共有下面几个字段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 中传递的。
  • 然后我们在透传给我们的自己的插槽。
1
:name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"
1
2
3
4
import {
  useSlots,
} from 'vue';
const slots = useSlots();

2. 父组件使用

1
2
3
4
5
{{ record }} - {{ rowIndex }} - {{ column }}
 
{{ record }} - {{ rowIndex }}- {{ column }}
 
{{ record }} - {{ rowIndex }}- {{ column }}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/15164.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部