javascript - 修改数据表 Vuetify 2.0 中的默认槽 isOpen

Question

下午好，我修改了group header slot来自定义group row，只是我想默认设置值isOpen = false，我找不到办法做到这一点，我很感激你的帮助。

<template v-if="group_by" v-slot:group.header={group,items,headers,isOpen,toggle}>
    <td v-for="header in headers" @click="toggle(items[0].category)">
        <template v-if="header.group_header">
            <template v-if="link_row">
                <strong><a :href=setInvoiceLink(group)>{{group}}</a> ({{getQuantity(group)}})</strong>
            </template>
            <template v-else>
                <strong>{{group}} ({{getQuantity(group)}})</strong>
            </template>
            <strong style="color:blue" v-if="group_extra_title"> - {{getExtraTitle(group,group_extra_title)}}</strong>
        </template>
        <template v-if="header.sum">
            <strong>{{MoneyFormat(getSuma(header.value,group))}}</strong>
        </template>
        <template v-if="header.value == 'data-table-select'">
            <v-checkbox 
                :disabled="enable_if"
                :input-value="check_checkbox(group)"
                @change="selectAllInvoiceAction(group,$event)" 
                ></v-checkbox>
        </template>
    </td>
</template>

Answer 1

我和你想的一样，我可以从 v-data-table 的 group-by prop 更改默认行为。

深入查看 GitHub 代码，我看到了将 isOpen 属性添加到 group-header 插槽的推送请求及其用法示例。在这里:

<template>
  <v-container>
    <v-data-table :items="items" :headers="headers" group-by="type">
      <template #group.header="{ isOpen, toggle }">
        <v-btn @click="toggle" icon>
          <v-icon>
            {{ isOpen ? '$minus' : '$plus' }}
          </v-icon>
        </v-btn>
      </template>
    </v-data-table>
  </v-container>
</template>

如您所见，它只是一个响应式 prop，用于通知插槽组 header 是打开还是关闭。如果你想添加一个按钮来同时打开或关闭所有按钮，这个另一个 stackoverflow 问题告诉你如何:

Collapse or expand Groups in vuetify 2 data-table

通知您希望最初关闭所有组的合乎逻辑的位置是 v-data-table Prop ，但它尚未实现，如您在 中所见props 来自源代码。

v-data-table source code

****编辑****

在思考如何解决这个问题之后，我想到了这个解决方案，它适用于您的 build 代码。

在您的 chunk-vendors.[hash].js 文件中，从您的 dist/js 文件夹中删除 ! 之前的代码0(零)在最后。

genGroupedRows:function(t,e){var n=this;return t.map((function(t){return n.openCache.hasOwnProperty(t.name)||n.$set(n.openCache,t.name,!0)

什么会看起来像这样:

genGroupedRows:function(t,e){var n=this;return t.map((function(t){return n.openCache.hasOwnProperty(t.name)||n.$set(n.openCache,t.name,0)

由于 uglify 过程，chunk 文件很难读取。但是你只需要找到它中间的genGroupedRows函数，去掉感叹号就可以了。换句话说，您只是对 Vuetify 的源代码说要创建默认关闭的组。

您也可以让它在您的 dev 上运行，但在这种情况下，您需要更改 vuetify 模块的源代码。相同的函数名称 genGroupedRows。