뷰피 테이블에서 상세 행 전환

뷰피 테이블에서 상세 행 전환

나는 디테일이 있는 푸에프 테이블이 있다.쉐브론을 클릭할 때마다 해당 행의 상세 뷰가 나타난다.내 경우에는 한 가지 세부적인 전망만 열어두는 것이 훨씬 나을 것이다.원하는 결과는 다음과 같다.내가 쉐브론을 클릭할 때마다 그 상세 뷰가 열리고 다른 모든 뷰가 닫힌다.

부피에서 상세 뷰의 개방은 다음과 같이 프로그램된다.

<td v-if="detailed">
    <a role="button" @click.stop="toggleDetails(row)">
    <b-icon
       icon="chevron-right"
       both
       :class="{'is-expanded': isVisibleDetailRow(row)}"/>
    </a>
 </td>

...
props: {
    ...
    detailed: Boolean
    ...
}

...
methods: {
    ...
    toggleDetails(obj) {
        const found = this.isVisibleDetailRow(obj)

        if (found) {
            this.closeDetailRow(obj)
            this.$emit('details-close', obj)
        } else {
            this.openDetailRow(obj)
            this.$emit('details-open', obj)
        }

        // Syncs the detailed rows with the parent component
        this.$emit('update:openedDetailed', this.visibleDetailRows)
    },
    openDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        this.visibleDetailRows.push(index)
    },

    closeDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        const i = this.visibleDetailRows.indexOf(index)
        this.visibleDetailRows.splice(i, 1)
    },

    isVisibleDetailRow(obj) {
        const index = this.handleDetailKey(obj)
        const result = this.visibleDetailRows.indexOf(index) >= 0
        return result
    },
    ...
}

부모에게 update_event가 전송된 것을 알았다.버튼을 다시 눌렀을 때 VisibleDetailRows를 저장하고 Child 구성 요소에 닫으라고 지시해야 하는가?내가 그걸 어떻게 하겠어?

내가 한 방법은 @details-open 이벤트를 사용해서 사용자 정의 함수를 부르는 것이었다.

    <b-table
    :data="data"
    :opened-detailed="defaultOpenedDetails"
    detailed
    detail-key="id"
    @details-open="(row, index) => closeAllOtherDetails(row, index)"
>

행을 확장하면 이벤트가 트리거된다.

그리고 closeAllOtherDetails() 함수는 방금 확장한 현재 행을 제외한 기본 OpenedDetails 어레이의 모든 요소를 삭제한다.

closeAllOtherDetails(row, index) {
  this.defaultOpenedDetails = [row.id]
}

그게 요령이다.간단해!

참조URL: https://stackoverflow.com/questions/48844202/toggle-detailed-row-in-buefy-table