Vue - 当只允许一个根组件时，如何在 table 中呈现子行？

Question

我正在尝试找出在 table 中呈现子行的最佳方式。

我正在开发本质上是 table+手风琴的东西。也就是说，当您单击 table 以显示该条目的更多详细信息时，它会添加更多行。

我的 table 位于 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 标签包装在这里不起作用（它会弄乱 table）。

如果我没有使用 Vue Material，我可能会考虑为这个组件使用 JSX，因为这样我就可以简单地在父级中使用 .map 来创建一个基于这两个变量的组件数组。我也许仍然可以使用 v-for 指令来做到这一点，但我不确定。我可能需要做的是从 props 创建一个疯狂的伪数组，合并父子数组，但那是 UUUUUGLY 代码。

Answer 1

这里的关键是行组件不呈现它自己的 sub-rows。您可以使用 <template> 标签来提供 entity-less v-for 和 v-if 包装器。在模板中执行 v-for，这样您就可以输出行 tr 以及一些可选的 sub-row 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 - 当只允许一个根组件时，如何在 table 中呈现子行？

Vue - How do you render sub-rows in a table when you are only allowed one root component?

html-table

vue.js

vue-component

vuejs2

vue-material