Question

我在创建手风琴表时遇到了一些麻烦。我创建了一个手风琴组件和一个表组件。尽管彼此独立，但效果很好，但我无法在手风琴中出现任何桌子。

//js part of accordion component

import Table from "../Table/index.vue"
export default {
name: 'accordion',
components: { Table },
mounted () {
},
data(){
return {
  items: [
  { id: "mc", title: "Medical Checkup", text: this.components.Table },
  { id: "ac", title: "Application connected", text: 
this.components.Table },
  { id: "p", title: "Programs", text: this.components.Table },
  { id: "pl", title: "Pain list", text: this.components.Table }
]
}
}
}

//html part of accordion component 

<div>
<div ref="list" class="list">
<transition-group class="flip-list" name="flip-list" ref="tg1" 
tag="div">
<div v-for="(item,index) in items" :key="item.id" class="item">
<slot name="item" :class="{active:item.isOpen}" :item="item" 
:index="index">
<v-expansion-panel id="exp1">
<v-expansion-panel-content>  
<div slot="header" class="drop-target handle2">
<span>{{item.title}}</span> 
</div>
<v-card>
<v-card-text>
<div slot="item">{{Table}}</div>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</slot>
</div>
</transition-group>
</div>
</div>

因此，重点是：如何使数据表出现在手风琴中？就像当您单击一个标题时，它出现而不是一些文本一样？

非常感谢

Answer 1

已解决！如果（如果人们遇到与我相同的问题），则代码如下（html / js）。

//html goes here

<div id="app">
<v-app id="inspire">
<v-data-table :headers="mainHeaders"
:items="mainItems"
item-key="title"
hide-actions
expand
class="elevation-1">
<template slot="items" scope="props">
<tr @click="props.expanded = !props.expanded">
<td class="text-xs">{{ props.item.title }}</td>
</tr>
</template>
<template slot="expand" scope="props">
<v-data-table :headers="subHeaders"
:items="subItems"
item-key="pain"
hide-actions
class="elevation-10">
<template slot="items" scope="props">
<td class="text-xs">{{ props.item.pain }}</td>
<td class="text-xs">{{ props.item.type }}</td>
</template>
</v-data-table>
</template>
</v-data-table>  </v-app>
</div>

//js goes here

export default {
name: 'accordion-table',
mounted () {
},
data () {
return {
mainHeaders: [
{ text: 'Medical informations', value: 'title' }
],
mainItems: [
{ title: 'Medical Checkup' },
{ title: 'Application connected' },
{ title: 'Programs' },
{ title: 'Pain List' }
],
subHeaders: [
{ text: 'Pain', value: 'pain' },
{ text: 'Type', value: 'type' }
],
subItems: [
{ pain: 'Knee', type: '1' },
{ pain: 'Ankle', type: '2' },
{ pain: 'Back', type: '3' },
{ pain: 'Neck', type: '4' }
]
}
}
}

（我使用了随机值）希望对您有所帮助

如何通过手风琴显示数据表

1 个答案: