vue ant 设计如何创建带槽的可重用表组件

Question

I try to create reusable table component with Ant Design Vue and use it throught the project. Sometimes I need show custom columns with icons an so on, so I want send them in this case like a slots.

I have my table component ATable

 <template>
  <a-table
    :columns="scheme"
    :data-source="props.data"
    :loading="isLoading"
    :pagination="pagination"
    :row-key="(record:any) => record.name"
    @change="handleTableChange"
    :scroll="{ x: 1100 }">
<template v-slot:bodyCell="{ column, record }">
  <template v-for="(_, name) in $slots" :key="name">
    <slot v-bind="{ column, record }" :name="name"></slot>
  </template>
</template>

And component where I insert this table

  <ATable
    :data="dataList"
    :loading="isLoading"
    :scheme="scheme"
    :pagination="pagination"
    @set-query="setQuery" >
      <template v-if="column.key === 'test'">
        <a
          class="hover:underline"
          :href="record.test.path"
          target="_blank">
          {{ record.environment.name }}
        </a>
  </template>
 </ATable>

My question is how I should paste my special rows in ATable if I don`t have access to column and record here (cause it is inside ATable bodyCell)?

Answer 1

   <ATable
:data="dataList"
:loading="isLoading"
:scheme="scheme"
:pagination="pagination"
@set-query="setQuery" >
<template #test="{ column, record }">
  <div v-if="column.key === 'environment'" class="text-caption">
    <a
      class="hover:underline"
      :href="record.environment.path"
      target="_blank">
      {{ record.test.name }}
    </a>
  </div>
</template>
</ATable>