데이터 테이블에서 기본 슬롯 isOpen 수정 Vuetify 2.0

데이터 테이블에서 기본 슬롯 isOpen 수정 Vuetify 2.0

안녕하세요, 그룹 행을 사용자 지정하기 위해 그룹 헤더 슬롯을 수정했습니다. 다만 기본적으로 Open = 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>

나도 너랑 같은 생각이었어 기본 동작을 바꿀 수 있을 것 같아group-by에서 떠받치다.v-data-table.

GitHub 코드를 자세히 보니 Push Request가 추가되어 있습니다.isOpen을 지지하다.group-headerslot 및 그 사용 예를 나타냅니다.여기 있습니다.

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

보시는 바와 같이 그룹 헤더가 열려 있는지 닫혀 있는지를 슬롯에 통지하는 것은 단순한 반응형 프로포트에 불과합니다.버튼을 추가하여 모든 것을 동시에 열거나 닫는 경우 다음 스택오버플로우 질문을 참조하십시오.

2 데이터 테이블에서 그룹 축소 또는 확장

모든 그룹을 원래 닫는 것을 통지하는 논리적인 장소는v-data-table소품은 아직 구현되지 않았습니다.props소스 코드로부터.

v-data-table 소스 코드

***편집*****

이 문제를 해결할 방법을 고민한 끝에 이 솔루션을 찾았습니다.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)

청크 파일은 ugliify 프로세스로 인해 읽기 어렵습니다.하지만 당신은 단지 그 사람을 찾기만 하면 된다.genGroupedRows그 중간에 기능을 하고 느낌표를 삭제합니다.즉, Vuetify의 소스코드에 디폴트로 닫힌 그룹을 작성하도록 지시하는 것입니다.

이 작업을 통해dev이 경우 vuetify 모듈에서 소스 코드를 변경해야 합니다.동일함수명genGroupedRows.

저도 문제가 발생했기 때문에 컴포넌트 내에서 실행할 수 있는 솔루션을 공유합니다.

작업 예: 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;
 })
   }
...

<v-data-table ref="table" ...></v-data-table>

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

그것은 마법처럼 작동했다.

언급URL : https://stackoverflow.com/questions/61351208/modify-default-slot-isopen-in-data-table-vuetify-2-0