Vuetify data-table 行不展开

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 经验的人可以帮助我让数据 table 行在单击时展开。谢谢！

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

Answer 2

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

<template v-slot:item="{index, item, isExpanded, expand}">
            <tr @mouseover="toolsIndex=index" 
                @click="expand(!isExpanded)"
                @mouseleave="toolsIndex=null">
              <td @click="expandRow(index)">{{ item.name }}</td>
              <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>
          </template>

Answer 3

嘿，因为你想扩展你的行，也许你可以试试 vuetify 扩展面板？

云看起来像这样

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

Vuetify data-table 行不展开

Vuetify data-table row does not expand

vue.js

vuetify.js

v-data-table