Vuetify Data-table 点击时展开所有行，而不仅仅是选定的行

Question

我有项目的数据 table，我只想展开选定的行以显示额外信息，但它最终会展开所有现有的行项目。

编辑抱歉我想在不使用下拉图标的情况下单展开

这是我的代码：

    <v-data-table
            v-if="selectedItem"
            dense
            :headers="headers"
            :items="itemsList"
            item-key="name"
            class="elevation-1"
            single-expand
            mobile-breakpoint="0"
          >

            <template v-slot:item="row">
              <tr
                @click="
                  () => {
                    row.expand(!row.isExpanded);
                  }
                "
              >
                <td>{{ row.item.date}}</td>
                <td>{{ row.item.firstName}}</td>
                <td>{{ row.item.lastName}}</td>
                <td>{{ row.item.email? `Yes` : `No` }}</td>
                <td><v-icon small> mdi-pencil </v-icon></td>
              </tr>
            </template>

            <template v-slot:expanded-item="{ headers, item }">
              <td class="pa-4" :colspan="headers.length">
                <tr v-if="item.date">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Issued Date: </span>
                    {{ item.date}}
                  </h4>
                </tr>
                <tr v-if="item.firstName">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> First Name: </span>
                    {{ item.firstName}}
                  </h4>
                </tr>
                <tr v-if="item.lastName">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Last Name: </span>
                    {{ item.lastName}}
                  </h4>
                </tr>
                <tr v-if="item.email">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Email: </span>
                    {{ item.email}}
                  </h4>
                </tr>
              </td>
            </template>

Answer 1

你可以使用vuetify提供的demo 在网站上 https://vuetifyjs.com/en/components/data-tables/#expandable-rows

变量：展开=[] 这是模板

<template> 
 <v-data-table :headers="dessertHeaders" 
:items="desserts" :single-expand="false" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1" > 
    <template v-slot:top>
     <v-toolbar flat> 
    <v-toolbar-title>Expandable Table</v-toolbar-title> <v-spacer></v-spacer> 
    <v-switch v-model="singleExpand" label="Single expand" class="mt-2" ></v-switch> </v-toolbar> 
    </template>
     <template v-slot:expanded-item="{ headers, item }">
     <td :colspan="headers.length"> More info about {{ item.name }} </td> 
    </template>
     </v-data-table>
     </template>

如果你想在不使用展开图标的情况下展开行，你可以使用这个

<v-data-table @click:row="expandRow">
 ... 
</v-data-table>



    expandRow(item, event) { 
    if(event.isExpanded) 
    { var index = this.expanded.findIndex(i => i === item); 
    this.expanded.splice(index, 1) } 
else 
    { this.expanded.push(item); } }

Vuetify Data-table 点击时展开所有行，而不仅仅是选定的行

Vuetify Data-table expanding all rows on click instead of just the selected row

html

javascript

vue.js

vuetify.js