Как отобразить данные через гармошку - PullRequest
Новая
       10

Как отобразить данные через гармошку

0 голосов
/ 01 марта 2019

Я столкнулся с некоторыми проблемами при создании аккордеонного стола.Я создал компонент Accordion и компонент Table.Несмотря на то, что они независимы друг от друга, они прекрасно работают, но я не могу заставить любой стол казаться гармоничным

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

Итак, суть в том: как я могу сделать так, чтобы датированные данные появились в аккордеоне?Например, когда вы щелкаете по одному из заголовков, и он появляется вместо текста?

Большое спасибо

1 Ответ

0 голосов
/ 04 марта 2019

Решено!В случае (если люди сталкиваются с той же проблемой, что и я), вот код (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' }
]
}
}
}

(я использовал случайные значения) Надеюсь, это поможет некоторым из вас

...