vue table 显示数据 v-for v-if答案

【问题标题】：vue table show data v-for v-ifvue table 显示数据 v-for v-if
【发布时间】：2020-12-01 03:21:13
【问题描述】：

这是我的 HTML 代码

<table id="showdata">
  <tr>
    <th>Room1</th>
  <th>Room2</th>
    <th>Room3</th>
  </tr>
  <tr v-if="detail.room === 'Room1'" v-for="detail in roomDetail">
    <td>{{detail.time}}</td>
    <td>{{detail.name}}</td>
    <td>{{detail.status}}</td>
    <td>{{detail.room}}</td>
  </tr>
</table>

我希望在这样的表格中填写数据：

ROOM1                 ROOM2                 ROOM3             
12.00 Anna  Y Room1   09.00 Bob   Y Room2   08.00 Anna N Room3
14.00 Harry N Room1   10.00 Anna  Y Room2                      
                      13.00 Harry N Room2

我想在同一行显示一个新房间。我该怎么办？

【问题讨论】：

你已经展示了你所期望的，但你实际上得到了什么？
你需要一个表中的表作为开始（虽然，你可以使用 grid 或 flex 完全不使用表，但这不是重要的事情）

标签： javascript html vue.js

【解决方案1】：

你需要一个表中的一个表

类似的东西

<table id="showdata">
    <tr>
        <th>Room1</th>
        <th>Room2</th>
        <th>Room3</th>
    </tr>
    <tr>
        <td v-for="(x, key) in ['Room1', 'Room2', 'Room3']" :key="key" >
            <table>
                <tr v-for="(detail, key) in roomDetail.filter(({ room }) => room === x)" :key="key" >
                    <td>{{ detail.time }}</td>
                    <td>{{ detail.name }}</td>
                    <td>{{ detail.status }}</td>
                    <td>{{ detail.room }}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

您可能还需要以下 CSS

td {
    vertical-align: top;
}

【讨论】：