Question

我有一个用v-for渲染的表。我正在尝试为给定的行打开一个子表/更多信息部分，该部分将显示在被单击的行下方。

我尝试用现有的tr添加一个新的tr，以进行渲染，但它可能是错误的，或者显示在外部行的右侧，而不是表的下方和内部

<tbody id="search">
                    <tr v-for="task in displayedData" v-bind:key="task.id" @click="showMoreDetail(task.id)">
                        <tr>
                            <td><input type="checkbox" :checked="isCheckAll" /></td>
                            <td>{{task.id }}</td>                    
                            <td>{{task.name }}</td>
                            <td>{{task.hosts}}</td>
                        </tr>
                        <tr>
                            <td colspan=4>
                                <div>
                                    <p>more info here</p>
                                </div>
                            </td>
                        </tr>
                    </tr>
                </tbody>

例如，上面是表格主体。删除第二个tr，然后将内部的tr扩展到外部的tr，可以得到基本表，但是，当我包含第二个tr时，则“任务”是未定义的。我只是要使用一个简单的布尔值，使用showMoreDetail函数来切换显示更多行。

Answer 1

您可以使用template标签来实现它。

类似这样的东西：

<tbody id="search">
    <template v-for="task in displayedData">
        <tr v-bind:key="task.id" @click="showMoreDetail(task.id)">
            <td><input type="checkbox" :checked="isCheckAll" /></td>
            <td>{{task.id }}</td>                    
            <td>{{task.name }}</td>
            <td>{{task.hosts}}</td>
        </tr>
        <tr v-bind:key="task.id + '_details'" v-if="idDetails == task.id">
            <td colspan=4>
                <div>
                    <p>more info here</p>
                </div>
            </td>
        </tr>
    </template>
</tbody>

<script>
    export default { 
        data() {
            return {
                idDetails: null,
            }
        },
        methods: {
            showMoreDetail(id) {
                this.idDetails = id;
            }
        }
    }
</script>

单击时扩展表格的行，以显示另一个表格

1 个答案: