IE 11 中的 VueJS - <tr> 的模板包装器不起作用，适用于 Edge 和 Chrome

Question

这是在 IE 11 中使用 Vue 2.5.16。假设datasetapp.data 中有一个数组，以下在 Chrome 中工作正常（并且代码已简化）：

...
<tbody>
<template v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</template>
</tbody>
...

但是，在 IE 11 中，它不起作用，而且控制台错误中没有行号和字符号（我花了一些时间才弄清楚）。它只是用红色说：

[object Error] {description: "'datarow' is undefined" ..

如果我删除template标签并只将v-for重复放在第一个tr并删除第二个，它会起作用..但我真的很想拥有第二个。

我认为这是 IE 11 中的 DOM 问题差异，并且 IE 11 将template标签提升到表格外，但不知道是否有任何非标准标签可以工作，或者如果可以，哪个可以工作。我该如何解决这个问题？

Answer 1

我找到的解决这个问题的方法是tbody在适当的位置放置多个元素而不是template. tbodyIE 11 中允许使用多个标签，而无需 IE 将其移出表，从而使tr标签不知道引用的循环变量。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

这有两个可能的副作用：

• 你的 tbody 可能已经通过 CSS 设置了样式——我的是在引导程序中——所以外观将与预期不同，通常带有额外的边框。您可能需要使用!important或至少使用您自己的 CSS 来克服这个问题。

• 至少对于 IE 11，加载时间似乎变慢了，但我还没有测试过。

结果代码：

<table>
<tbody v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
<tbody>
    <!-- not posted above but I used another template/tr for the case of no records found; substituted with just another tbody -->
</tbody>
</table>