vuejs2 - 切换 buefy 表中的详细行

Question

我有一个详细的表格。每当我单击 V 形标记时，都会显示相应行的详细 View 。在我的情况下，只打开一个详细 View 会好得多。期望的结果是:每当我单击 V 形标志时，该详细 View 就会打开，而其他所有 View 都会关闭。

在buefy中，详细 View 的打开是这样编程的:

<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 并告诉子组件关闭它，当再次按下按钮时？我该怎么做？

Answer 1

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

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

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

以及被调用的函数 closeAllOtherDetails() 删除 的所有元素defaultOpenedDetails 数组，除了您刚刚展开的当前行:

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

这就是诀窍。简单的!