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


Vue3 插槽透传

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

1. <SearchTable>

复制代码

组件。要求二次封装的组件可以将slot透传给原生的table组件。
如下这样，将

1. SearchTable

复制代码

中的插槽透传给

1. <a-table>

复制代码

1.       <SearchTable
   
2.         :search-model="searchModel"
   
3.         :table-cols="cols"
   
4.         :table-data="tableData"
   
5.         :pagination="pagination"
   
6.         @search="searchTableAction"
   
7.       >
   
8.         <template #channelCode="{ record, rowIndex, column }">
   
9.           {{ record }} - {{ rowIndex }} - {{ column }}
   
10.         </template>
    
11.         <template #channelName="{ record, rowIndex, column }">
    
12.           {{ record }} - {{ rowIndex }}- {{ column }}
    
13.         </template>
    
14.         <template #status="{ record, rowIndex, column }">
    
15.           {{ record }} - {{ rowIndex }}- {{ column }}
    
16.         </template>
    
17.       </SearchTable>

复制代码

一共有下面几个字段：

1. const cols = [
   
2.     {
   
3.       title: '渠道编码',
   
4.       dataIndex: 'channelCode',
   
5.       slotName: 'channelCode',
   
6.     },
   
7.     {
   
8.       title: '渠道名称',
   
9.       dataIndex: 'channelName',
   
10.       slotName: 'channelName',
    
11.     },
    
12.     {
    
13.       title: '状态',
    
14.       dataIndex: 'status',
    
15.       slotName: 'status',
    
16.     },
    
17.   ];

复制代码

步骤

首先我们先明白原组件的使用。

1. arco

复制代码

中的table组件, 当定义了插槽就渲染插槽。当没有定义的时候就正常显示table表格中的数据。
因为我们要对table组件进行二次封装,所以我们要将table中的插槽透传出去。下面是实现原理。

1. 知道父组件传递了一个slot

这里我们要用一个vue3中的API，

1. useSlots()

复制代码

, 我们要用这个api来判断父组件是否传递了插槽。

• 从slots中获取父组件传的插槽信息,如果没有则就使用
  1. arco

  复制代码
  中默认的。即正常展示。当自定义了插槽, 就选择插槽的内容。
  
• 插槽的参数传递是
  1. v-slot:[key]="{ record, rowIndex, column }"

  复制代码
  这里的参数是
  1. arco

  复制代码
  中传递的。
  
• 然后我们在透传给我们的自己的插槽。
  

1. :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"

复制代码

1. <template>
   
2.         <a-table
   
3.           row-key="id"
   
4.           :loading="loading"
   
5.           :pagination="pagination"
   
6.           :columns="(cloneColumns as TableColumnData[])"
   
7.           :data="tableData"
   
8.           :bordered="false"
   
9.           :size="size"
   
10.           @page-change="onPageChange"
    
11.         >
    
12.           <!--          key 就是 slotName-->
    
13.           <template
    
14.             v-for="(item, key, i) in slots"
    
15.             :key="i"
    
16.             v-slot:[key]="{ record, rowIndex, column }"
    
17.           >
    
18.             <slot
    
19.               :name="key"
    
20.               v-bind="{ rowIndex: rowIndex, record: record, column: column }"
    
21.             ></slot>
    
22.           </template>
    
23.         </a-table>
    
24. </template>
    
25. <script lang="ts" setup>
    
26.   import {
    
27.     useSlots,
    
28.   } from 'vue';
    
29.   const slots = useSlots();
    
30. </script>  

复制代码

2. 父组件使用

1.      <SearchTable
   
2.         :search-model="searchModel"
   
3.         :table-cols="cols"
   
4.         :table-data="tableData"
   
5.         :pagination="pagination"
   
6.         @search="searchTableAction"
   
7.       >
   
8.         <template #channelCode="{ record, rowIndex, column }">
   
9.           {{ record }} - {{ rowIndex }} - {{ column }}
   
10.         </template>
    
11.         <template #channelName="{ record, rowIndex, column }">
    
12.           {{ record }} - {{ rowIndex }}- {{ column }}
    
13.         </template>
    
14.         <template #status="{ record, rowIndex, column }">
    
15.           {{ record }} - {{ rowIndex }}- {{ column }}
    
16.         </template>
    
17.       </SearchTable>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/3399097fh.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！