我正在尝试找出在表格中呈现子行的最佳方式。
我正在开发本质上是 table + Accordion 的东西。也就是说,当您单击表格以显示该条目的更多详细信息时,该表格会添加更多行。
我的表位于 Researcher Groups 组件中,该组件有一个子组件:“app-researcher-group-entry (ResearcherGroupEntry)”。
我使用的是 Vue-Material,但如果我使用普通的 .
无论如何,我的结构是这样的:
// ResearcherGroups.vue
<template>
<md-table>
<md-table-row>
<md-table-head></md-table-head>
<md-table-head>Researcher</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head></md-table-head>
<md-table-head></md-table-head>
</md-table-row>
<app-researcher-group-entry v-for="(group, index) in researcherGroups" :key="group.label" :groupData="group" :indexValue="index"></app-researcher-group-entry>
</md-table>
</template>
在 ResearcherGroupEntry.vue 中:
<template>
<md-table-row>
<md-table-cell>
<md-button class="md-icon-button md-primary" @click="toggleExpansion">
<md-icon v-if="expanded">keyboard_arrow_down</md-icon>
<md-icon v-else>keyboard_arrow_right</md-icon>
</md-button>
<md-button @click="toggleExpansion" class="index-icon md-icon-button md-raised md-primary">{{indexValue + 1}}</md-button>
</md-table-cell>
<md-table-cell>{{groupData.label}}</md-table-cell>
<md-table-cell>Group</md-table-cell>
<md-table-cell>
<md-button @click="openTab" class="md-primary">
<md-icon>add_box</md-icon>
Add Client / Client Type
</md-button>
</md-table-cell>
<md-table-cell>
<md-button class="md-primary">
<md-icon>settings</md-icon>
Settings
</md-button>
</md-table-cell>
<app-add-client-to-group-tab :indexValue="indexValue" :groupData="groupData" :closeTab="closeTab" :addClientToGroupTab="addClientToGroupTab"></app-add-client-to-group-tab>
</md-table-row>
</template>
这就是问题所在。我希望能够从我们的模型中像这样扩展客户端:
如果我可以将另一个添加到 ResearcherGroupEntry 组件中,这将非常容易。不幸的是,用 div 或 span 标签包装在这里不起作用(它会弄乱表格)。
如果我不使用 Vue Material,我可能会考虑对这个组件使用 JSX,因为这样我就可以简单地在父级中使用 .map 来创建一个基于这两个变量的组件数组。我也许仍然可以使用 v-for 指令来做到这一点,但我不确定。我可能需要做的是根据 props 创建一个疯狂的伪数组,合并父项和子项,但那是 UUUUUGLY 代码。
最佳答案
这里的关键是行组件不呈现它自己的子行。您可以使用 <template>
提供无实体的标签 v-for
和 v-if
wrapper 。做你的v-for
在模板中,以便您可以输出行 tr
还有一些可选的子行 tr
秒。简单示例:
new Vue({
el: '#app',
data: {
rows: [{
id: 1,
name: 'one',
subrows: ['a', 'b', 'c']
},
{
id: 2,
name: 'two',
subrows: ['d', 'e', 'f']
}
],
expanded: {}
},
methods: {
expand(id) {
this.$set(this.expanded, id, true);
}
},
components: {
aRow: {
template: '<tr><td>{{name}}</td><td><button @click="expand">Expand</button></td></tr>',
props: ['name', 'id'],
methods: {
expand() {
this.$emit('expand', this.id);
}
}
},
subRow: {
template: '<tr><td colspan=2>{{value}}</td></tr>',
props: ['value']
}
}
});
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<table id="app" border=1>
<tbody>
<template v-for="r in rows">
<a-row :id="r.id" :name="r.name" @expand="expand"></a-row>
<template v-if="r.id in expanded">
<sub-row v-for="s in r.subrows" :value="s"></sub-row>
</template>
</template>
</tbody>
</table>
关于vue.js - Vue - 当只允许一个根组件时,如何在表格中呈现子行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48917561/