Vuetify VDataTable 一个 VDataTableServer，当某个项目展开时其他项目必须折叠

Question

我正在尝试折叠其他行以显示在最后展开的行上获取的数据，但我不知道如何做到这一点。我尝试了 isExpanded 和toggleExpand 道具，但仍然无法正常工作。

在 ExpandeFn 函数中，我获取用户个人资料数据，但 @update:expanded 返回一组扩展项目。我想获取最后扩展的用户数据或所有扩展区域显示相同的配置文件或返回错误。

<VDataTableServer
        :items="users"
        item-value="_id"
        :headers="headers"
        :loading="loading.table"
        no-data-text="Nothing found"
        show-expand
        @update:expanded="expandeFn"
      >
        <template #item.username="{ item }">
          <div class="d-flex align-center">
            <div
              class="d-flex flex-column"
            >
              <h6 class="text-body-1 font-weight-medium">
                {{
                  item.raw.username
                }}
              </h6>
            </div>
          </div>
        </template>

        <template #expanded-row="{ columns }">
          <tr :colspan="columns.length">
            <td :colspan="columns.length">
              <VRow style="padding-top: 1rem; padding-bottom: 1rem">
                <VCol
                  v-for="category in categories"
                  :key="category"
                  cols="12"
                  lg="4"
                >
                  <VCard
                    :title="category?.interestName"
                    style="background-color: #020b15; border-radius: 1rem"
                  >
                    <template #append>
                      <div v-if="category" class="d-flex gap-1 flex-wrap">
                        {{ category?.count ? category?.count : 0 }}
                      </div>
                    </template>
                  </VCard>
                </VCol>
              </VRow>
            </td>
          </tr>
        </template>
      </VDataTableServer>

我需要折叠所有其他行，但不需要折叠最后一行

Answer 1

定义一个数组以绑定到

expanded

属性。现在您可以使用

update:expanded

从数组中删除先前扩展的行的所有条目：

<v-data-table-server
    :expanded="expanded"
    @update:expanded="newExpanded => expanded = newExpanded.slice(-1)"
  ...

现在除了最后一个展开的行之外的所有行都将被折叠。如有必要，您可以由此构建更复杂的展开/折叠逻辑。

这是在游乐场