切换buefy表

Question

我有一个详细的buefy表。每当我点击雪佛龙时，相应行的详细视图就会显示出来。在我的情况下，只打开一个详细视图会好得多。期望的结果是：每当我点击雪佛龙时，该详细视图就会打开，而其他所有视图都会关闭。

在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]
}

可以解决问题。