javascript - Vuetify中展开的v-data-table折叠时触发方法
问题描述
我试图构造一个v-data-table
并在观察expanded.sync
值时观察到非常奇怪的行为。第 1 层的expanded.sync
值看起来正常,但第 2 层expanded.sync
有 3 个连续相同的记录。
我打算观察这个值,在折叠展开的项目时做一些事情。是否有任何解决方案可以检测展开的项目何时折叠?
顶层代码
<template>
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
:expanded.sync="itemExpanded"
show-expand>
>
<template v-slot:top>
<v-toolbar height="38" falt color="#cddde1">
<v-toolbar-title dense> Test </v-toolbar-title>
</v-toolbar>
</template>
<template v-slot:expanded-item="{headers}">
<td :colspan="headers.length">
<Show2></Show2>
</td>
</template>
</v-data-table>
</template>
<script>
import Show2 from "./ShowTest2.vue";
export default {
name: "Show1",
components: {
Show2
},
data: () => ({
itemExpanded:[],
desserts: [
{
name: 'Show 1 - item 1',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Show 1 - item 2',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
],
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
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: "details", value: "data-table-expand" },
],
}),
watch: {
itemExpanded(newVal,val){
console.log('layer 1', newVal);
},
},
};
</script>
第二层代码
<template>
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
:expanded.sync="itemExpanded2"
show-expand>
>
<template v-slot:top>
<v-toolbar>
<v-toolbar-title dense> Test2</v-toolbar-title>
</v-toolbar>
</template>
<template v-slot:expanded-item="{headers}">
<td :colspan="headers.length">
</td>
</template>
</v-data-table>
</template>
<script>
export default {
name: "Show2",
data: () => ({
itemExpanded2:[],
desserts: [
{
name: 'Show 2 - item 1',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Show 2 - item 2',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
],
headers: [
{text: 'Dessert (100g serving)',align: 'start', 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: "details", value: "data-table-expand" },
],
}),
watch: {
itemExpanded2(newVal,val){
console.log('layer2', newVal);
},
},
};
</script>
Console.log 每一层的结果是一层展开 + 一层折叠。
layer 1 [__ob__: Observer]
ShowTest.vue?cc9a:66 layer 1 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [{…}, __ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]
ShowTest2.vue?5475:56 layer2 [__ob__: Observer]
非常感谢 !
解决方案
而不是使用 awatch
您应该侦听item-expanded
为此目的提供的事件。
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
:expanded.sync="itemExpanded"
show-expand
@item-expanded="onExpand"
>
methods: {
onExpand({ item, value }) {
console.log(item, value);
}
}
此事件返回一个具有item
andvalue
属性的对象。是该item
行的数据,value
是该行现在是否展开。
推荐阅读
- laravel - 使用 AWS 负载均衡器的 Laravel Passport Auth 无效令牌
- git - VimDiff as Git MergeTool:如何使用一个命令解决所有来自 LOCAL、BASE 或 REMOTE 更改的合并冲突?
- android - Visual Studio Android SDK
- tensorflow - 双向 LSTM 的 Lambda 警告
- angular - 如何以角度 10 显示具有特定主题标签的 Instagram 帖子?
- azure - 发生两个事件时触发 Azure Function | 在 Azure 中合并事件
- date - 更改页面底部 showLastUpdateTime 的日期格式
- lark-parser - 如何在语法中添加一点上下文?
- python - Discord.py 错误
- c# - SignalR dotnet 3.1 webapi 托管在 IIS 8(启用 WebSocket)上仅工作几分钟