Question

下午好，我修改了组标题插槽以自定义组行，只有默认情况下我想将值isOpen = false设置为我，但我找不到解决方法，感谢您的帮助。 / p>

<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

我认为与您相同，我可以将group-by的默认行为更改为v-data-table。

更深入地研究GitHub代码，我看到了将isOpen道具添加到group-header插槽的Push Request及其用法示例。在这里：

<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>

如您所见，通知组头是打开还是关闭只是一个反应性的道具。如果您想添加一个按钮来同时打开或关闭所有按钮，则另一个stackoverflow问题向您展示如何：

Collapse or expand Groups in vuetify 2 data-table

告知您希望所有组最初关闭的逻辑位置是在v-data-table道具处，但是尚未实现，如您在源代码的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过程，很难读取块文件。但是，您只需要在其中的genGroupedRows函数中找到并删除感叹号即可。换句话说，您只是在说Vuetify的源代码来创建默认情况下关闭的组。

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

Answer 2

@jk1 提供的解决方案非常适合我。此外，我的要求是，保持第一组“打开”，因此我可以通过从键数组中删除（弹出）最后一个条目来轻松实现这一点。

let table = this.$refs.table;
let keys = Object.keys(table.$vnode.componentInstance.openCache);
keys.pop() //remove last element so that first group stays open
keys.forEach(x => {
    table.$vnode.componentInstance.openCache[x] = false;
})

它就像一个魅力。

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

2 个答案: