Vue.js 阻止重复表行在 IE 中不起作用答案

【问题标题】：Vue.js block repeat table rows doesn't work in IEVue.js 阻止重复表行在 IE 中不起作用
【发布时间】：2017-08-16 01:30:50
【问题描述】：

我想使用 vue.js 的模板标签重复添加表格行，但它在 IE11 中不起作用。这是代码。

<table border="1">
  <tr>
    <td rowspan="2">ID</td>
    <td colspan="2">Name</td>
  </tr>
  <tr>
    <td>Height</td>
    <td>Weight</td>
  </tr>
<template v-repeat="items">
  <tr>
    <td rowspan="2">{{id}}</td>
    <td colspan="2">{{name}}</td>
  </tr>
  <tr>
    <td>{{height}}</td>
    <td>{{weight}}</td>
  </tr>
</template>
</table>

有什么帮助吗？

【问题讨论】：

标签： javascript html-table vue.js internet-explorer-11

【解决方案1】：

请参阅http://vuejs.org/guide/components.html#Using_Components 以及该部分末尾的警告：

table元素对里面可以出现的元素有限制它，因此自定义元素将被吊出并且无法正确呈现。在那些情况你可以使用组件指令语法：

<tr v-component="my-component"></tr>.

【讨论】：

【解决方案2】：

我找到了将<template> 标记更改为<tbody> 标记的解决方案。但是一个表中会有多个<tbody>标签，我希望这是这种情况下的最佳解决方案。

【讨论】：

【解决方案3】：

长话短说，这是 IE 中的 HTML 限制，如果你想兼容，你必须改变你的 HTML 结构。

我在这里发现了与您类似的问题：https://github.com/vuejs/vue/issues/2404

Vue 在编译之前将模板渲染为真正的 html，因此无论你如何定义它，同样的 html 限制适用于 Vue 模板。

IE 不支持内部元素，如 , ..

【讨论】：