仅在满足条件时才使用插槽的回退内容

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 更改某些内容时随时中断，但我认为现在没有更好的解决方案......

例子