Javascript 我可以使用<；tr>；a内的标签<；tr>；在Vue.js中？_Javascript_Vue.js_Html Table_Vuejs2

Javascript 我可以使用<；tr>；a内的标签<；tr>；在Vue.js中？

javascript vue.js vuejs2

Javascript 我可以使用<；tr>；a内的标签<；tr>；在Vue.js中？,javascript,vue.js,html-table,vuejs2,Javascript,Vue.js,Html Table,Vuejs2,下面的代码在vue.js中创建了一个动态表 <template> <tr class="left-align" v-for="(item,index) in itemList" :key="index.id"> <td>{{item.items}}</td> </tr> <tr class="left-align&quo

下面的代码在vue.js中创建了一个动态表

<template>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>GAP</td>
    </tr>
</template>


{{item.items}
{{item.items}}（未来）
缺口

但是这个的输出不是我期望的。结果如下：

我怎样才能达到预期的产出？因为如果我尝试将它们包装在一个标签中，比如：

<tr>
    <tr>
        <td>
        </td>
    </tr>

    <tr>
        <td>
        </td>
    </tr>
</tr>

它说：

分析错误：x-invalid-end-tag

在HTML中，据我所知，不允许在

tr

中编写

tr

。不过，你应该能够通过一张桌子实现你想要的

<template>
  <td>
    <table>

<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>


{{item.items}
{{item.items}}（未来）
缺口

预期产出应为：

<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>

处理此类错误的一个好方法是使用。您的HTML不应该抛出任何错误或警告。尝试复制/粘贴此项，例如：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>


sd
福
酒吧
在HTML中，据我所知，不允许在tr
中编写tr
。不过，你应该能够通过一张桌子实现你想要的
<template>
  <td>
    <table>

<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>


{{item.items}
{{item.items}}（未来）
缺口

预期产出应为：
<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>



处理此类错误的一个好方法是使用。您的HTML不应该抛出任何错误或警告。尝试复制/粘贴此项，例如：
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>


sd
福
酒吧
您可以使用tbody
（或仅使用模板
标记）包装tr
s，并且只使用一个v-for
：
 <tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
 </tbody>


{{item.items}
{{item.items}}（未来）
缺口
您可以使用tbody
（或仅使用模板
标记）包装tr
s，并且只使用一个v-for
：
 <tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
 </tbody>


{{item.items}
{{item.items}}（未来）
缺口
td元素的@HugoCox-End标记是可选的。td元素的@HugoCox-End标记是可选的。你的意思是我应该使用
标记而不是
标记？@ramedju我的意思是你不应该直接在另一个
下使用
。我将进行编辑以增加清晰度。根据您的编辑，输出仍然与以前相同。我看不到您的图像。我不知道你想要什么。你说你有一个错误，我的回答解释了原因：）是的，这解决了错误，但输出仍然是一样的。。你可以看到，你的意思是我应该使用
标记而不是
标记？@ramedju我的意思是你不应该直接在另一个
下使用
。我将进行编辑以增加清晰度。根据您的编辑，输出仍然与以前相同。我看不到您的图像。我不知道你想要什么。你说你有一个错误，我的回答解释了原因：）是的，这解决了错误，但输出仍然是一样的。。你可以看到它，感谢这项更简单更干净的工作：）但我现在的问题是，我的标题不见了。哈哈！直接在
下使用
在HTML中无效。我现在看到了。这似乎不可行，因为它在一行中添加了新表（一行显示所有数据，而其他行没有数据），并且我的标题扩展到了最右侧。@ramedju我建议删除父级tr
（如果有）并在表中添加tbody
。请参阅，这是一项更简单、更干净的工作：）但现在我的问题是，我的标题不见了。哈哈！直接在
下使用
在HTML中无效。我现在看到了。这似乎不可行，因为它在一行中添加了新表（一行显示所有数据，而其他行没有数据），并且我的标题扩展到了最右侧。@ramedju我建议删除父级tr
（如果有）并在表中添加tbody
。看见