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

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