切换buefy表中的详细行

Question

我有一张桌子，上面有细节。每当我单击人字形时，就会显示相应行的详细视图。就我而言，最好只打开一个详细视图。理想的结果是：每当我单击人字形时，就会打开该详细视图，而所有其他视图都将关闭。

在buefy中，详细视图的打开是这样编写的：

<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组件将其关闭？我该怎么做？

Answer 1

我这样做的方法是使用@ details-open事件调用自定义函数：

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

展开一行时，将触发事件。

调用的函数closeAllOtherDetails（）删除defaultOpenedDetails数组的所有元素，除了您刚刚扩展的当前行：

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

这样就可以了。