小编edw*_*ard的帖子

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

我尝试构建 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 …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2 vuetify.js

4
推荐指数
1
解决办法
3420
查看次数

标签 统计

javascript ×1

vue-component ×1

vue.js ×1

vuejs2 ×1

vuetify.js ×1