修改数据表Vuetify 2.0中的默认slot isOpen答案

【问题标题】：Modify default slot isOpen in data table Vuetify 2.0修改数据表Vuetify 2.0中的默认slot isOpen
【发布时间】：2020-04-21 19:04:27
【问题描述】：

下午好，我修改了组头槽以自定义组行，只是我想默认设置值 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>

【问题讨论】：

标签： javascript vue.js datatable vuejs2 vuetify.js

【解决方案1】：

@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;
})

它就像一个魅力。

【讨论】：

【解决方案2】：

由于我也遇到了问题，所以分享一下我的解决方法，可以在组件内完成：

工作示例：https://codepen.io/joke1/pen/bGEPdYL

...
mounted () {
    let table = this.$refs.table;
    let keys = Object.keys(table.$vnode.componentInstance.openCache);
     keys.forEach(x => {
    table.$vnode.componentInstance.openCache[x] = false;
 })
   }
...

&lt;v-data-table ref="table" ...&gt;&lt;/v-data-table&gt;

【讨论】：

【解决方案3】：

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

深入查看 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>

如您所见，它只是一个反应性道具，用于通知插槽组标头是打开还是关闭。如果您想添加一个按钮以同时打开或关闭所有按钮，这个另一个 stackoverflow 问题将向您展示如何：

Collapse or expand Groups in vuetify 2 data-table

在v-data-table 属性处通知您希望所有最初关闭的组的逻辑位置，但它尚未实现，正如您在源代码中的props 中看到的那样。

v-data-table source code

****编辑****

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

在您的 dist/js 文件夹中的 chunk-vendors.[hash].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。

【讨论】：