Vue.js Vuetify数据表行不展开

我正在构建一个vuetify

，最右边的列上有按钮图标。当数据行悬停时，按钮图标出现。我希望数据行在单击该行时展开，但它不起作用

当前代码笔实现

代码创建一个

，如下所示：

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

有关{{item.name}的详细信息

---

我希望有vuetify经验的人能帮助我在单击时扩展数据表行。谢谢

您应该这样更改代码：

{{item.name}
{{item.carries}}
{{item.fat}
{{item.carbs}
{{item.protein}}
{{item.iron}
.....

只需像下面这样更改代码块，问题就解决了

{{item.name}
{{item.carries}}
{{item.fat}
{{item.carbs}
{{item.protein}}
{{item.iron}
mdi铅笔
mdi删除

嘿，因为要展开行，您可以尝试vuetify expansionpanel

看起来像这样

<template v-slot:item="{index, item}">           
   <v-expansion-panels>
    <v-expansion-panel>
     <v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
       <v-simple-table>
        <template v-slot:default>
         <thead>
          <tr>
           <td>Calories</td>
           <td>Fat (g)</td>
           <td>Carbs (g)</td>
           <td>Protein (g)</td>
           <td>Iron (%)</td>
           </tr>
          </thead>
          <tbody>
           <tr @mouseover="toolsIndex=index" @mouseleave="toolsIndex=null">
            <td @click="expandRow(index)">{{ item.calories }}</td>
            <td @click="expandRow(index)">{{ item.fat }}</td>
            <td @click="expandRow(index)">{{ item.carbs }}</td>
            <td @click="expandRow(index)">{{ item.protein }}</td>
            <td @click="expandRow(index)">{{ item.iron }}</td>
            <td>
             <v-icon
                  v-show="index==toolsIndex"
                  small
                  class="mr-2"
                  @click.stop="dialog = true"
                  >mdi-pencil</v-icon
                >
                <v-icon
                  v-show="index==toolsIndex"
                  small
                  @click.stop="dialog = true"
                  >mdi-delete</v-icon
                >
             </td>
            </tr>
          </tbody>
         </template>
        </v-simple-table>
       </template>
      </v-data-table>
     </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>         
          </template>

{{item.name}
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
铁（%）
{{item.carries}}
{{item.fat}
{{item.carbs}
{{item.protein}}
{{item.iron}
mdi铅笔
mdi删除

很好的建议。我将查看扩展面板。如果没有

模板v-slot:item

，我如何制作？仅使用

v-data-table

或与

模板v-slot:extended item

一起使用。谢谢你，Md。这非常有用。没有

模板v-slot:item

我如何制作？仅使用

v-data-table

或使用

模板v-slot:expanded item

。感谢大家的帮助。是更新的数据表。如果没有

模板v-slot:item

，我如何制作？仅使用

v-data-table

或与

模板v-slot:expanded item

一起使用。您可以不使用

模板v-slot:item

而只使用

模板v-slot:expanded item

-查看文档中的示例（）没有

v-slot:item

？您是否在Vuetify文档中的示例中看到

v-slot:item

？

<template v-slot:item="{index, item}">           
   <v-expansion-panels>
    <v-expansion-panel>
     <v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
       <v-simple-table>
        <template v-slot:default>
         <thead>
          <tr>
           <td>Calories</td>
           <td>Fat (g)</td>
           <td>Carbs (g)</td>
           <td>Protein (g)</td>
           <td>Iron (%)</td>
           </tr>
          </thead>
          <tbody>
           <tr @mouseover="toolsIndex=index" @mouseleave="toolsIndex=null">
            <td @click="expandRow(index)">{{ item.calories }}</td>
            <td @click="expandRow(index)">{{ item.fat }}</td>
            <td @click="expandRow(index)">{{ item.carbs }}</td>
            <td @click="expandRow(index)">{{ item.protein }}</td>
            <td @click="expandRow(index)">{{ item.iron }}</td>
            <td>
             <v-icon
                  v-show="index==toolsIndex"
                  small
                  class="mr-2"
                  @click.stop="dialog = true"
                  >mdi-pencil</v-icon
                >
                <v-icon
                  v-show="index==toolsIndex"
                  small
                  @click.stop="dialog = true"
                  >mdi-delete</v-icon
                >
             </td>
            </tr>
          </tbody>
         </template>
        </v-simple-table>
       </template>
      </v-data-table>
     </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>         
          </template>