如何在Vue动态表格嵌套插槽中获取slotProps并渲染自定义按钮？

问题描述 #

拆分Table与Col为独立组件，将Col作为Table的插槽使用时，最后一个Col内的自定义插槽按钮无法渲染，且无法通过slotProps获取行数据content。

解决方案 #

1. 修正DynamicTable的插槽识别逻辑

修改DynamicTable的JS代码，正确捕获Col组件内部的自定义插槽：

const slots = useSlots()?.default || [];
const body = ref([])

slots.forEach(slot => {
  // 获取Col组件内部的content插槽
  const contentSlot = slot.type.slots?.content;
  body.value.push({
    slot: contentSlot,
    name: slot.props?.td,
  })
})

2. 调整DynamicTable的模板渲染方式

将原来的<slot>调用改为用<component>渲染捕获到的插槽，并传递行数据：

<slot></slot>

<div v-for="content in contents" :key="content.id">
   <div v-for="(td, idx) in body" :key="idx">
      <!-- 渲染自定义插槽并传递content数据 -->
      <component v-if="td.slot" :is="td.slot" :content="content"></component>
      <!-- 渲染动态列数据 -->
      <span v-else>{{ content[td.name] }}</span>
   </div>
</div>

3. 主文件与Col组件保持原有写法不变

主文件中Col的用法无需修改：

<DynamicTable :contents="contents">
  <Col th="name" td="name"/>
  <Col th="information" td="information"/>

  <Col>
    <template #content="slotProps">
      <button @click="getData(slotProps.content)">click me</button>
    </template>
  </Col>
</DynamicTable>

Col组件的render返回null的写法保持不变，不影响插槽传递。

修改说明 #

• 原逻辑错误地将Col组件的children当作插槽内容，实际上需要通过slot.type.slots获取Col内部定义的插槽。
• 使用<component>渲染捕获到的插槽，能正确传递content数据到自定义插槽的slotProps中，实现按钮渲染与数据获取。

内容的提问来源于stack exchange，提问作者yvl