Vuetify 中展开的 v-data-table 折叠时触发方法

Question

我尝试构建 av-data-table并在观察expanded.sync值时观察到非常奇怪的行为。第1层expanded.sync值看起来正常，但第2层expanded.sync有3个连续相同的记录。

\n

我打算观察这个值，在折叠展开的项目时做一些事情。有没有什么解决方案可以检测展开的项目何时折叠？

\n

顶层代码

\n

<template>\n  <v-data-table\n    :headers="headers"\n    :items="desserts"\n    item-key="name"\n    :expanded.sync="itemExpanded"\n    show-expand>\n  >\n    <template v-slot:top>\n      <v-toolbar height="38" falt color="#cddde1">\n        <v-toolbar-title dense> Test </v-toolbar-title>\n      </v-toolbar>\n    </template>\n      <template v-slot:expanded-item="{headers}">\n        <td :colspan="headers.length">\n          <Show2></Show2>\n        </td> \n      </template>\n  </v-data-table>\n</template>\n<script>\nimport Show2 from "./ShowTest2.vue";\nexport default {\n  name: "Show1",\n   components: {\n      Show2\n  },\n   data: () => ({\n     itemExpanded:[],\n    desserts: [\n      {\n        name: 'Show 1 - item 1',\n        calories: 237,\n        fat: 9.0,\n        carbs: 37,\n        protein: 4.3,\n        iron: '1%',\n      },\n      {\n        name: 'Show 1 - item 2',\n        calories: 262,\n        fat: 16.0,\n        carbs: 23,\n        protein: 6.0,\n        iron: '7%',\n      },\n    \n    ],\n    headers: [\n      {\n        text: 'Dessert (100g serving)',\n        align: 'start',\n        sortable: false,\n        value: 'name',\n      },\n      { text: 'Calories', value: 'calories' },\n      { text: 'Fat (g)', value: 'fat' },\n      { text: 'Carbs (g)', value: 'carbs' },\n      { text: 'Protein (g)', value: 'protein' },\n      { text: 'Iron (%)', value: 'iron' },\n      { text: "details", value: "data-table-expand"  },\n    ],\n  }),\n  watch: {\n     itemExpanded(newVal,val){\n      console.log('layer 1', newVal);\n    },\n  },\n};\n</script>\n

\n

第二层代码

\n

<template>\n  <v-data-table\n    :headers="headers"\n    :items="desserts"\n    item-key="name"\n    :expanded.sync="itemExpanded2"\n    show-expand>\n  >\n    <template v-slot:top>\n      <v-toolbar>\n        <v-toolbar-title dense> Test2</v-toolbar-title>\n      </v-toolbar>\n    </template>\n      <template v-slot:expanded-item="{headers}">\n        <td :colspan="headers.length">\n            \n        </td> \n      </template>\n  </v-data-table>\n</template>\n<script>\nexport default {\n  name: "Show2",\n   data: () => ({\n     itemExpanded2:[],\n    desserts: [\n      {\n        name: 'Show 2 - item 1',\n        calories: 159,\n        fat: 6.0,\n        carbs: 24,\n        protein: 4.0,\n        iron: '1%',\n      },\n      {\n        name: 'Show 2 - item 2',\n        calories: 262,\n        fat: 16.0,\n        carbs: 23,\n        protein: 6.0,\n        iron: '7%',\n      },\n    ],\n    headers: [\n      {text: 'Dessert (100g serving)',align: 'start', sortable: false, value: 'name',},\n      { text: 'Calories', value: 'calories' },\n      { text: 'Fat (g)', value: 'fat' },\n      { text: 'Carbs (g)', value: 'carbs' },\n      { text: 'Protein (g)', value: 'protein' },\n      { text: 'Iron (%)', value: 'iron' },\n      { text: "details", value: "data-table-expand"  },\n    ],\n  }),\n  watch: {\n     itemExpanded2(newVal,val){\n       console.log('layer2', newVal);\n    },\n  },\n};\n</script>\n

\n

Console.log 每层结果一次展开+一次折叠。

\n

layer 1 [__ob__: Observer]\nShowTest.vue?cc9a:66 layer 1 [{\xe2\x80\xa6}, __ob__: Observer]\nShowTest2.vue?5475:56 layer2 [{\xe2\x80\xa6}, __ob__: Observer]\nShowTest2.vue?5475:56 layer2 [{\xe2\x80\xa6}, __ob__: Observer]\nShowTest2.vue?5475:56 layer2 [{\xe2\x80\xa6}, __ob__: Observer]\nShowTest2.vue?5475:56 layer2 [__ob__: Observer]\nShowTest2.vue?5475:56 layer2 [__ob__: Observer]\nShowTest2.vue?5475:56 layer2 [__ob__: Observer]\n

\n

非常感谢 ！

\n

Answer 1

watch您应该监听item-expanded为此目的提供的事件，而不是使用 a 。

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

此事件返回一个带有itemandvalue属性的对象。是该item行的数据，value是该行现在是否扩展。