vuetify.js - 在 VuetifyJS/VueJS 中一次性展开所有数据表条目

Question

如何一次展开这个 VuetifyJS/VueJS 数据表示例的 所有 条目，而不是一次展开一个？

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      item-key="name"
      expand
    >
      <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td> 
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
    </v-data-table>
  </v-app>
</div>

以下是单个展开的示例:

https://codepen.io/anon/pen/yEWNxE?&editors=101#

Answer 1

有一个关于此功能的 open-issue，请务必关注它并在解决时收到通知。

@zikeji 的 临时解决方案如下:

添加对表的引用:

<v-data-table ref="dTable">

组件加载时手动展开行:

mounted() {
    for (let i = 0; i < this.desserts.length; i += 1) {
        const item = this.desserts[i];
        this.$set(this.$refs.dTable.expanded, item.name, true);
    }
},

Codepen