javascript - 是否有 IE11 兼容的解决方法让 Vue 在 for 循环中为每个项目呈现多个表行？

Question

我想在 v-for 循环中为每个项目呈现多个表格行，而不用将元素包装在另一个元素中，例如<tbody> .

例如

<table>
  <tbody>
    <tr></tr>
    <!-- v-for="item in items" -->
      <tr></tr>
      <tr></tr>
    <!-- /v-for -->
  </tbody>
</table>

我已经使用 <template> 在 Chrome 中实现了这个功能作为根元素，如下所示，但是这种方法在 Internet Explorer 11 中不起作用。

<table>
  <tbody>
    <tr></tr>
    <template v-for="item in items">
      <tr></tr>
      <tr></tr>
    </template>
  </tbody>
</table>

这里有更详细的例子 https://plnkr.co/edit/wfsFvbifAwq7ycZv?p=info

我正在寻找一种方法来实现相同的结果，但要以一种适用于 IE11 的方式进行。

Vue JS 模板需要有一个根元素，推荐的方法似乎是将表行包装在 <tbody> 中。但在我的例子中，行已经在 tbody 中，不允许嵌套 tbody。

我知道我的示例中的用户体验不是很好，但我不能轻易更改它，所以除非没有其他选择，否则我不会采纳更改页面布局的建议。

Answer 1

Linus Borg 在 Vue 论坛上的回答

https://forum.vuejs.org/t/is-there-an-ie11-compatible-workaround-to-get-vue-to-render-multiple-table-rows-per-item-in-a-for-loop/61814/2

如果直接在 HTML 页面中定义模板元素，则该方法在 IE 中不起作用。

如果我使用字符串模板或元素来包装模板，它会起作用，即:

<script type="x-template" id="table-template">
  <table>
    <tbody>
      <template v-for="item in items">
       <!-- ... -->
      </template>
    </tbody>
  </table>
</script>
new Vue({
   //...
  template: '#table-template'
})

谢谢林纳斯 <3