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

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

1 个答案: