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: '狀態(tài)',
      dataIndex: 'status',
      slotName: 'status',
    },
  ];

步驟

首先我們先明白原組件的使用。

arco 中的table組件, 當定義了插槽就渲染插槽。當沒有定義的時候就正常顯示table表格中的數(shù)據(jù)。

因為我們要對table組件進行二次封裝,所以我們要將table中的插槽透傳出去。下面是實現(xiàn)原理。

1. 知道父組件傳遞了一個slot

這里我們要用一個vue3中的API，useSlots(), 我們要用這個api來判斷父組件是否傳遞了插槽。

從slots中獲取父組件傳的插槽信息,如果沒有則就使用 arco 中默認的。即正常展示。當自定義了插槽, 就選擇插槽的內(nèi)容。
插槽的參數(shù)傳遞是 v-slot:[key]="{ record, rowIndex, column }" 這里的參數(shù)是 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>