无法在vuetify3中制作可扩展的v数据表？

Question

我正在尝试在 vue3 和 vuetify3 中制作一个可扩展的 v-data-table。正常的数据表工作得很好。但是，当我尝试可扩展的 v-data-table 时。它不显示任何内容，但加载分页中显示的数据。

<script setup>
import { ref } from 'vue'
import currencyHelpers from '../lib/currencyHelpers';

const info = ref([]);
const currencies = ref([]);
const headers = [
  { title: 'Name', value: 'currencydefinition.fullyqualifiedname' },
  { title: 'ID', value: 'currencydefinition.currencyid' },
  { title: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
  { title: 'ID import fee', value: 'currencydefinition.idimportfees' },
  { title: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
  { title: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
  { title: 'Options', value: 'currencydefinition.options' }
];
const expanded = ref([]);

(async () => {
  info.value = await currencyHelpers.getInfo();
  currencies.value = await currencyHelpers.listCurrencies();
})();

const toggleExpansion = (item) => {
  expandedRow.value = expandedRow.value === item ? null : item;
};

</script>

<template>
    <h1>Currencies</h1>
    {{ info.VRSCversion }}
    <v-hover v-slot="{ isHovering, props }">
    <v-container variant="outlined" v-bind="props" :class="`elevation-${isHovering ? 24 : 6}`" class="mx-auto pa-6 transition-swing overflow-x-auto">
       <v-data-table 
       :items="currencies" 
       :headers="headers" 
       @click:row="toggleExpansion"
       v-model:expanded="expanded"
       show-expand>
        <!-- Your expanded card content here -->
        <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>Expandable Table</v-toolbar-title>
      </v-toolbar>
    </template>
        <v-expand-transition>
          <template v-slot:expanded-row="{ currencies, headers }">
          <tr>
        <td :colspan="currencies.length">
          More info about {{ headers.title }}
        </td>
      </tr>
    </template>
        </v-expand-transition>
    </v-data-table>

    </v-container>
    </v-hover>

</template>

<style scoped></style>

发生类似的事情，如下面的屏幕截图所示：

Answer 1

我在您的代码中注意到一些问题：

1. 您在

   expandedRow.value

   方法中使用

   toggleExpansion

   ，但

   expandedRow

   未定义。相反，您应该使用

   expanded

   。

2. 在展开的行模板中，您尝试访问

   headers.title

   ，这是不正确的。您应该迭代

   headers

   数组来显示标题。

   <template>
     <h1>Currencies</h1>
     <v-container variant="outlined" class="mx-auto pa-6 transition-swing overflow-x-auto">
       <v-data-table 
         :items="currencies" 
         :headers="headers" 
         @click:row="toggleExpansion"
         v-model:expanded="expanded"
         show-expand
       >
         <!-- expanded card content -->
         <template v-slot:top>
           <v-toolbar flat>
             <v-toolbar-title>Expandable Table</v-toolbar-title>
           </v-toolbar>
         </template>
   
         <v-expand-transition>
           <template v-slot:expanded-row="{ item }">
             <tr>
               <td :colspan="headers.length">
                 More info about {{ item.currencydefinition.fullyqualifiedname }}
               </td>
             </tr>
           </template>
         </v-expand-transition>
       </v-data-table>
     </v-container>
   </template>
   
   <script setup>
   import { ref } from 'vue'
   import currencyHelpers from '../lib/currencyHelpers';
   
   const info = ref([]);
   const currencies = ref([]);
   const headers = [
     { text: 'Name', value: 'currencydefinition.fullyqualifiedname' },
     { text: 'ID', value: 'currencydefinition.currencyid' },
     { text: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
     { text: 'ID import fee', value: 'currencydefinition.idimportfees' },
     { text: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
     { text: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
     { text: 'Options', value: 'currencydefinition.options' }
   ];
   const expanded = ref([]);
   
   (async () => {
     info.value = await currencyHelpers.getInfo();
     currencies.value = await currencyHelpers.listCurrencies();
   })();
   
   const toggleExpansion = (item) => {
     expanded.value = expanded.value === item ? null : item;
   };
   </script>