最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Modify default slot isOpen in data table Vuetify 2.0 - Stack Overflow

programmeradmin1浏览0评论

Good afternoon, I modified the group header slot to customize the group row, only I would like to set the value isOpen = false by default and I can't find a way to do it, I would appreciate your help.

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

Good afternoon, I modified the group header slot to customize the group row, only I would like to set the value isOpen = false by default and I can't find a way to do it, I would appreciate your help.

<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>
Share Improve this question asked Apr 21, 2020 at 19:04 AlmicAlmic 772 silver badges7 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

I thought the same thing than you, that I could change the default behavior from group-by prop from v-data-table.

Looking deeper in the GitHub code I saw the Push Request that added the isOpen prop to group-header slot and an example of its usage. Here it is:

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

As you can see it is just a reactive prop to inform the slot if the group header is open or closed. If you want to add a button to open or close all at the same time, this another stackoverflow question show you how:

Collapse or expand Groups in vuetify 2 data-table

The logical place to inform that you want all the groups originally closed would be at the v-data-table props, but it isn't implemented yet as you can see at the props from the source code.

v-data-table source code

****EDIT****

After thinking about how to solve this issue I came to this solution that will work on your build code.

On your chunk-vendors.[hash].jsfile from your dist/js folder remove the ! from this code before the 0 (zero) at the end.

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)

What will make look like this:

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)

The chunk file is hard to read because of the uglify process. But you just need to find the genGroupedRows function in the middle of it, and remove the exclamation point. In other words, you are just saying to the source code from Vuetify to create groups closed by default.

You can make it work on your dev too, but in this case you would need to change the source code from vuetify module. Same function name genGroupedRows.

Since I also encountered the problem, I share my solution, which can be done within the ponent:

Working example: https://codepen.io/joke1/pen/bGEPdYL

...
mounted () {
    let table = this.$refs.table;
    let keys = Object.keys(table.$vnode.ponentInstance.openCache);
     keys.forEach(x => {
    table.$vnode.ponentInstance.openCache[x] = false;
 })
   }
...
<v-data-table ref="table" ...></v-data-table>

The solution provided by @jk1 worked perfectly for me. Additionally, my requirement was, to keep the first group "open" and so I could easily achieve this by removing (popping) the last entry from the keys array.

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

It worked like a charm.

发布评论

评论列表(0)

  1. 暂无评论