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

Question

在 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)

Answer 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