vue.js - Vuetify 数据表行不展开

Question

我正在构建一个 vuetify <v-data-table>最右边的列上有按钮图标。当鼠标悬停在数据行上时，会出现按钮图标。我希望在单击数据行时展开该行，但它不起作用。

当前的 codepen 实现 here

代码创建一个 <v-data-table>如下:

<v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
      :items-per-page="5"
      :expanded.sync="expanded"
>

这是扩展行的插槽:

<template v-slot:expanded-item="{ headers, item }">
        <td :colspan="headers.length">More info about {{ item.name }}</td>
</template>

我希望有 vuetify 经验的人可以帮助我让数据表行在单击时展开。谢谢!

Answer 1

您应该像这样更改代码:

 <template v-slot:item="{index, item, isExpanded, expand}">
            <tr 
               @mouseover="toolsIndex=index" 
               @mouseleave="toolsIndex=null" 
               @click="expand(!isExpanded)"
            >
              <td>{{ item.name }}</td>
              <td>{{ item.calories }}</td>
              <td>{{ item.fat }}</td>
              <td>{{ item.carbs }}</td>
              <td>{{ item.protein }}</td>
              <td>{{ item.iron }}</td>
              .....