Vuetify 可扩展表扩展具有相同名称的所有行答案

【问题标题】：Vuetify expandable table expanding all rows with the same nameVuetify 可扩展表扩展具有相同名称的所有行
【发布时间】：2020-10-04 20:36:14
【问题描述】：

在 Vuetify 中可扩展表的基本代码笔中，我注意到当表中两个条目的名称相同时，单击行展开也会展开具有相同名称条目的另一行。有没有办法避免这种情况？

这是重现的问题：https://codepen.io/entropy283/pen/eYJdmLp?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdata-tables%2F (clicking on the first row expands the second row as well)

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

这是因为name 是数据表上的项目键。使用不同的item-key...

<v-data-table
  :headers="headers"
  :items="desserts"
  :single-expand="singleExpand"
  :expanded.sync="expanded"
  item-key="id"
  show-expand
  class="elevation-1"
>
...
</v-data-table>

演示：https://codeply.com/p/VJn8sEMr45

【讨论】：