如何一次扩展此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#
答案 0 :(得分:6)
此功能有一个open-issue,请务必遵循并在解决该问题时得到通知。
临时解决方案如下:
添加对表的引用:
<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);
}
},
答案 1 :(得分:1)
您应该改为扩展该组件,并这样设置值。
MyVDataTable.vue
<script>
import VDataTable from 'vuetify/src/components/VDataTable'
export default {
extends: VDataTable,
props: ['deserts'],
mounted () {
for (let i = 0; i < this.desserts.length; i += 1) {
const item = this.desserts[i];
this.$set(this.expanded, item.name, true);
}
}
}
然后,您将用这个VTable替换它。
答案 2 :(得分:0)
对我来说,上述和其他在Google上找到的解决方案均无法正常工作。所以我创建了另一种方法。
在通常添加@click扩展功能的行中,必须添加自定义指令。
例如v-open
传递你的道具。
<tr @click="props.expanded = !props.expanded" v-open="props">
然后在组件内部
directives: {
open: {
// directive definition
bind: function (el,binding) {
//only the first row
if( binding.value.index === 0){
binding.value.expanded = true
}
//or all rows
//binding.value.expanded = true
}
}
},
答案 3 :(得分:0)
在Veutify v2.1.13
只需单击一下,即可将数据从expanded
复制到desserts
。
methods: {
expandAll: function() {
console.log("All expanded.");
this.$data.expanded = this.$data.desserts;
},
collapseAll: function() {
console.log("All collapsed.");
this.$data.expanded = [];
}
},