在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

关于此功能有一个未解决的问题，请确保遵循它并在解决该问题时得到通知。

@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);
    }
},

码笔

Answer 2

在 Veutify v2.1.13 中

只需单击即可将数据复制到expandedfrom 。desserts

  methods: {
    expandAll: function() {
      console.log("All expanded.");
      this.$data.expanded = this.$data.desserts;
    },
    collapseAll: function() {
      console.log("All collapsed.");
      this.$data.expanded = [];
    }
  },

代码笔