Vue3中Slot插槽透?jìng)?二次封裝Arco的table組件詳解

更新時(shí)間：2025年04月18日 14:22:42 作者：西魏陶淵明

這篇文章主要介紹了Vue3中Slot插槽透?jìng)?二次封裝Arco的table組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3中Slot插槽透?jìng)?二次封裝Arco的table組件

Vue3 插槽透?jìng)?/h3>

需求是這樣, 對(duì)acro的table表格進(jìn)行二次封裝。

封裝成一個(gè) <SearchTable> 組件。要求二次封裝的組件可以將slot透?jìng)鹘o原生的table組件。

如下這樣，將SearchTable中的插槽透?jìng)鹘o <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>

一共有下面幾個(gè)字段：

 const cols = [
    {
      title: '渠道編碼',
      dataIndex: 'channelCode',
      slotName: 'channelCode',
    },
    {
      title: '渠道名稱',
      dataIndex: 'channelName',
      slotName: 'channelName',
    },
    {
      title: '狀態(tài)',
      dataIndex: 'status',
      slotName: 'status',
    },
  ];

步驟

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

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

因?yàn)槲覀円獙?duì)table組件進(jìn)行二次封裝,所以我們要將table中的插槽透?jìng)鞒鋈?。下面是?shí)現(xiàn)原理。

1. 知道父組件傳遞了一個(gè)slot

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

從slots中獲取父組件傳的插槽信息,如果沒(méi)有則就使用 arco 中默認(rèn)的。即正常展示。當(dāng)自定義了插槽, 就選擇插槽的內(nèi)容。
插槽的參數(shù)傳遞是 v-slot:[key]="{ record, rowIndex, column }" 這里的參數(shù)是 arco 中傳遞的。
然后我們?cè)谕競(jìng)鹘o我們的自己的插槽。

: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>