V-data-table 通过 v-slot:body 控制扩展项 [英] V-data-table controlling expanded items via v-slot:body
问题描述
vuetify 2.0 v-data-tables 的文档没有指定如何通过 v-slot:body 控制扩展项.我有一个表，我需要用 body v-slot 指定，并想使用扩展功能.
预期行为是通过单击表格中一列中的按钮，该行会在下方展开.
我正在使用 v-slot:body，因为我需要完全自定义列内容.我正在从 vuetify 1.5 迁移代码，其中 props.expanded 启用了此功能.
代码笔:https://codepen.io/thokkane/pen/PooemJP
<v-数据表:headers="headers":items="沙漠":expanded.sync="扩展":single-expand="singleExpand"项目键=名称"隐藏默认页脚><template v-slot:body="{ items }"><tr v-for="item in items" :key="item.name"><td><v-btn @click="expanded.includes(item.name) ? Expanded = [] : extended.push(item.name)">Expand</v-btn></td></tr></tbody></模板><template v-slot:expanded-item="{ headers, item }"><span>item.name</span></模板></v-data-table></模板><脚本>导出默认{数据 () {返回 {扩展:[]，singleExpand:假，标题: [{ text: 'Dessert (100g service)', align: 'left', sortable: false, value: 'name' },{文本:'卡路里'，值:'卡路里'}，{ text: 'Fat (g)', value: 'fat' },{ text: 'Carbs (g)', value: 'carbs' },{文本:'蛋白质(g)'，值:'蛋白质'}，{ text: '铁 (%)', 值: '铁' },{文本:''，值:'数据表扩展'}，],甜点:[{name: '冷冻酸奶',卡路里:159，脂肪:6.0，碳水化合物:24，蛋白质:4.0，铁:1%"，},{name: '冰淇淋三明治',卡路里:237，脂肪:9.0，碳水化合物:37，蛋白质:4.3，铁:1%"，},{name: 'Eclair',卡路里:262，脂肪:16.0，碳水化合物:23，蛋白质:6.0，铁:7%"，},],}},} 解决方案 当您将 v-slot:body 与 v-slot:expanded-item 一起使用时，您正在覆盖 v-slot:expanded-item 中的更改.这是因为 expanded-item 插槽位于 body 插槽内.如果您打算使用 body 进行自定义，很遗憾您必须自定义里面的所有内容.
想象一个这样的结构:
<div slot="item">...</div><div slot="expanded-item">...</div>等等...<div>所以在这种情况下
和任何里面的东西.因此，v-slot:body 道具不包括项目特定的属性和事件，如 select()、isSelected、expand()、isExpanded 等.我建议您改用 v-slot:item.您可以完成相同的事情，而无需用更少的代码自定义所有内容.
这样的事情应该可以工作:
<tr><td><v-btn @click="expand(!isExpanded)">展开</v-btn></td><td class="d-block d-sm-table-cell" v-for="Object.keys(item)中的字段">{{项目[字段]}}</td></tr></模板><template v-slot:expanded-item="{ headers, item }"><td :colspan="headers.length">扩展内容</td></模板>
如果您想访问 JavaScript 中的扩展项，请不要忘记将 :expanded.sync="expanded" 添加到 item-key="" 属性.
The documentation on vuetify 2.0 v-data-tables doesn't specify how to control the expanded items via the v-slot:body. I have a table i need to specify with the body v-slot and would like to use the expand feature.
Expected behavior is by clicking the button in one column in the table, the row expands below.
I'm using the v-slot:body as i will need to fully customize the column content. I'm migrating the code from vuetify 1.5 where props.expanded enabled this functionality.
Codepen: https://codepen.io/thokkane/pen/PooemJP
<template>
<v-data-table
:headers="headers"
:items="deserts"
:expanded.sync="expanded"
:single-expand="singleExpand"
item-key="name"
hide-default-footer
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item in items" :key="item.name">
<td>
<v-btn @click="expanded.includes(item.name) ? expanded = [] : expanded.push(item.name)">Expand</v-btn>
</td>
</tr>
</tbody>
</template>
<template v-slot:expanded-item="{ headers, item }">
<span>item.name</span>
</template>
</v-data-table>
</template>
<script>
export default {
data () {
return {
expanded: [],
singleExpand: false,
headers: [
{ text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
{ text: '', value: 'data-table-expand' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
],
}
},
}
</script>
解决方案 When you use v-slot:body together with v-slot:expanded-item, you are overriding your changes inside v-slot:expanded-item. This is because expanded-item slot is inside the body slot. If you are going to use body for customization, you unfortunately have to customize everything inside.
Imagine a structure like this:
<div slot="body">
<div slot="item">...</div>
<div slot="expanded-item">...</div>
etc...
<div>
So in this case <template v-slot:body> will replace <div slot="body"> and anything inside. Therefore usage of <template v-slot:expanded-item> will not work with <template v-slot:body>. Besides v-slot:body props does not include item-specific properties and events like select(), isSelected, expand(), isExpanded etc.
I would recommend you to use v-slot:item instead. You can accomplish same thing without needing to customize everything with less code.
Something like this should work:
<template v-slot:item="{ item, expand, isExpanded }">
<tr>
<td>
<v-btn @click="expand(!isExpanded)">Expand</v-btn>
</td>
<td class="d-block d-sm-table-cell" v-for="field in Object.keys(item)">
{{item[field]}}
</td>
</tr>
</template>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">Expanded Content</td>
</template>
If you want to have access to expanded items in JavaScript, don't forget to add :expanded.sync="expanded" to <v-data-table> . To open unique item on click you need to set item-key="" property on <v-data-table>.
这篇关于V-data-table 通过 v-slot:body 控制扩展项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆