5

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

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

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

<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>

预先感谢您的帮助。

4

1 回答 1

7

经过大量“谷歌搜索”后，我认为这是不可能的。恕我直言，您最好的选择是复制 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 改变某些东西，但我认为现在没有更好的解决方案......

例子

于 2019-12-17T18:52:36.687 回答