Vuetify 数据表 - 手动显示可扩展行 [英] Vuetify data table - manually display expandable rows

问题描述

我在 v-data 表中有一堆动态列，我需要遍历和查询这些列以显示正确的信息.它看起来有点像这样(取自这里的答案:Vuetify根据项目类型格式化单元格)

I have a bunch of dynamic columns in a v-data table which I need to loop through and interrogate in order to display the correct info. It looks a bit like this (taken from the answer here: 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 模板，以便能够捕获可扩展行列并将其正确呈现到屏幕上.

Since I need the v-if statement, all other types default to the v-else. However, the v-else is not suitable for when a type is an expandable row. It will display a blank value for that column. So I created a v-else-if template to be able to capture the expandable row column and correctly render it to the screen.

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

The problem is that I don't know what to put in the template to indicate it's a column with expandable rows (https://vuetifyjs.com/en/components/data-tables/#expandable-rows). In other words it does not render the carat icon that shrinks/expands the subtable, nor does it render the clickable actions. How would I modify the v-else-if template to correctly render its contents?

推荐答案

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

I came up with a workaround using computed properties.

代替使用

v-for="header in headers"

我将其更改为已过滤的计算标题.

I changed it to a computed headers which is filtered.

<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');
 }
}

这篇关于Vuetify 数据表 - 手动显示可扩展行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！