仅在满足条件时才使用插槽的后备内容

Question

我想知道是否有办法做我在下面描述的事情：

假设我们有一个带有插槽的组件，并且已经定义了一个后备内容。

在其他地方使用这个组件时，我希望有以下行为：

<TheComponent>
  <template v-slot:name="{ data }">
    <fallback v-if="condition(data)"/>
  </template>
</TheComponent>

我想fallback 标签（或类似标签）不存在（至少，我没有找到它......）。所以我想我想错了，但我找不到解决问题的方法。

问题是我无法更改 TheComponent，因为它是由外部库提供的，我不想重新创建内容。

如果它可以提供帮助，事实上，我正在尝试隐藏展开按钮以防止在 Vuetify data-table 中展开一行，具体取决于该行在展开部分中是否有要显示的内容。所以我想写一些类似的东西：

<v-data-table :items="items" show-expand ...>
  <template v-slot:item.data-table-expand="{ item }">
    <!-- Here I want the default behavior only if my item respects some condition -->
    <fallback v-if="condition(item)"/>
    <!-- Otherwise, I don't want to display the button that expands the row -->
  </template>
</v-data-table>

提前感谢您的帮助。

Answer 1

经过大量“谷歌搜索”后，我认为这是不可能的。恕我直言，您最好的选择是复制 Vuetify 生成的默认插槽内容并将其置于您自己的条件下（在我的示例中为v-if="item.description"）：

    <v-data-table :headers="headers" :items="people" show-expand>
      <template v-slot:expanded-item="{ item, headers }">
        <td :colspan="headers.length">{{ item.description }}</td>
      </template>
      <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
        <v-icon
          v-if="item.description"
          :class="['v-data-table__expand-icon', { 'v-data-table__expand-icon--active': isExpanded }]"
          @click.stop="expand(!isExpanded)"
        >$expand</v-icon>
      </template>
    </v-data-table>

我知道这个解决方案很脆弱，并且随时可能在 Vuetify 更改某些内容时中断，但我认为现在没有更好的解决方案......

Example