BootstrapVue b-table#row-details插槽过滤关联子任务问题咨询

解决方案 #

你遇到的问题核心是没有对传递给子b-table的数据源做过滤，且v-if的使用位置和逻辑错误：原有代码中的v-if写在子表格标签上，既没有对应作用域的subtask变量，也无法实现对子项的筛选，只会控制整个表格的显示隐藏。

最简修改方式 #

直接修改行详情插槽中b-table的items绑定逻辑，对subtasks数组做实时过滤即可，不需要额外加v-if：

<template #row-details="row">
    <b-card>
        <b-table 
            :items="subtasks.filter(subtask => subtask.subtaskof === row.item.id)" 
            outlined 
            :fields="fields" 
            thead-class="d-none" 
            responsive="sm"
        >
            <!-- 可选：无子任务时的空状态提示 -->
            <template #empty>
                <p class="text-muted m-2">当前任务暂无子任务</p>
            </template>
        </b-table>
    </b-card>
</template>

可复用优化方案 #

如果多个地方需要用到子任务过滤逻辑，可以把过滤逻辑抽到methods中，模板代码更整洁：

1. 先在组件的methods中添加方法：

methods: {
    // 其他原有方法保留，新增以下方法
    getTaskSubtasks (taskId) {
        return this.subtasks.filter(subtask => subtask.subtaskof === taskId)
    }
}

2. 模板中绑定该方法即可：

<b-table 
    :items="getTaskSubtasks(row.item.id)" 
    outlined 
    :fields="fields" 
    thead-class="d-none" 
    responsive="sm"
>

两种方案都可以实现仅展示和当前任务ID匹配的子任务，你可以根据自己的代码复杂度选择。

内容的提问来源于stack exchange，提问作者eddbreuer