Vuetify 数据表 - 手动显示可扩展行答案

【问题标题】：Vuetify data table - manually display expandable rowsVuetify 数据表 - 手动显示可扩展行
【发布时间】：2021-04-18 17:33:46
【问题描述】：

我在 v-data 表中有一堆动态列，我需要循环并查询这些列以显示正确的信息。看起来有点像这样（取自这里的答案：Vuetify format cell based on item type）

<v-data-table :item="items" ... >
 <template v-for="header in headers" v-slot:[`item.${header.value}`]="{ item } ">
   <template v-if="header.type === 'foo'">
     <span style="color: red;">{{ item[header.value] }}</span>
   </template>
   <template v-else-if="header.value === 'data-table-expand'">
     ???
   </template>
   <template v-else>
     {{ item[header.value] }}
   </template>
 </template>
</v-data-table>

由于我需要 v-if 语句，所有其他类型默认为 v-else。但是，当类型是可扩展行时，v-else 不适合。它将显示该列的空白值。所以我创建了一个 v-else-if 模板，以便能够捕获可扩展的行列并将其正确呈现到屏幕上。

问题是我不知道在模板中放入什么来表明它是一个具有可扩展行的列 (https://vuetifyjs.com/en/components/data-tables/#expandable-rows)。换句话说，它不会呈现缩小/扩展子表的克拉图标，也不会呈现可点击的动作。如何修改 v-else-if 模板以正确呈现其内容？

【问题讨论】：

您在寻找chevron-down吗？
不，我正在寻找在点击时呈现图标及其所有功能的代码

标签： vue.js vuetify.js

【解决方案1】：

我想出了一个使用计算属性的解决方法。

而不是使用

v-for="header in headers"

我将其更改为经过过滤的计算标题。

<template v-for="header in headersIWant" v-slot:[`item.${header.value}`]="{ item } ">
  <span style="color: red;">{{ item[header.value] }}</span>
</template>
...
computed: {
 headersIWant() {
  return this.headers.filter(x => x.type === 'foo');
 }
}

【讨论】：