2

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

当前的codepen实现在这里

代码创建<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 经验的人可以帮助我在单击时扩展数据表行。谢谢！

4

3 回答 3

2

您应该像这样更改代码：

 <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>
              .....
于 2020-07-03T08:51:52.197 回答
2

嘿，因为你想扩展你的行也许你可以试试 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>
于 2020-07-03T10:14:35.147 回答
1

只需更改您的代码块，如下所示，问题在这里解决

<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>
于 2020-07-03T09:52:34.453 回答