Quasar QTable行级插槽中如何复用单元格级插槽内容？

Quasar QTable提供多级插槽：整体内容区（body）、行、列、单元格。现在需要在行级插槽的模板中，恢复单元格的插槽解析逻辑，让预先定义的单元格级插槽内容生效。

比如实现展开行功能时，必须使用<template v-slot:body="props">自定义行结构，但此时模板里直接写{{ col.value }}不会自动解析已定义的单元格插槽。我们可以通过<template v-slot:body-cell-[name]="props">单独格式化特定单元格，示例代码如下：

<template v-slot:body-cell-calories="props">
  <q-td :props="props"> <strong>{{ props.row.calories }}</strong></q-td>
</template>

想知道是否可以同时使用这两种方式，在body插槽的自定义模板中自动解析已定义的单元格插槽？之前尝试重新定义命名插槽但未成功，代码如下：

<q-tr :props="props">
  <q-td auto-width>
    <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
  </q-td>
  <slot #[`body-cell-${ col.name }`] v-bind=[col]>
    <q-td
      v-for="col in props.cols"
      :key="col.name"
      :props="props"
      >
        {{ col.value }}
    </q-td>
  </slot>
</q-tr>

可以实现，核心是在自定义body插槽的行模板中，遍历每一列时动态调用对应的单元格命名插槽，没有定义插槽的列则渲染默认内容。

修正后的代码示例：

<template v-slot:body="props">
  <q-tr :props="props">
    <!-- 展开按钮列 -->
    <q-td auto-width>
      <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
    </q-td>

    <!-- 遍历所有列，动态调用单元格插槽 -->
    <template v-for="col in props.cols" :key="col.name">
      <!-- 尝试调用已定义的body-cell-xxx插槽 -->
      <slot
        :name="`body-cell-${col.name}`"
        v-bind="{ ...props, col }"
      >
        <!-- 插槽未定义时的默认渲染 -->
        <q-td :props="props">
          {{ col.value }}
        </q-td>
      </slot>
    </template>
  </q-tr>

  <!-- 展开行内容（按需添加） -->
  <q-tr v-if="props.expand" :props="props">
    <q-td :colspan="props.cols.length + 1">
      展开的行内容：{{ props.row }}
    </q-td>
  </q-tr>
</template>

<!-- 预定义的单元格插槽依然生效 -->
<template v-slot:body-cell-calories="props">
  <q-td :props="props">
    <strong>{{ props.row.calories }}</strong>
  </q-td>
</template>

关键说明： #

• 遍历props.cols时，通过:name="body-cell-${col.name}"动态匹配预定义的单元格插槽
• 用v-bind="{ ...props, col }"把row、col等必要的作用域数据传递给单元格插槽，确保插槽能正常获取数据
• 插槽内部的<q-td>是默认降级内容，当没有对应单元格插槽时会渲染这个默认结构

这样既保留了自定义body插槽的行结构（比如添加展开按钮），又能让预定义的body-cell-xxx插槽正常生效。

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