Question

我想重复使用带有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>

任何帮助？

Answer 1

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

table元素限制了哪些元素可以出现在里面   它，所以自定义元素将被提升并且无法正确呈现。在   那些情况下你可以使用组件指令语法：

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

Answer 2

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

Answer 3

简而言之，这是IE中的HTML限制，如果您想要兼容性，则必须更改HTML结构。

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

Vue在编译模板之前将模板渲染为真实的html，因此无论您如何定义Vue模板，相同的html限制都适用。

IE不支持像..，
这样的内部元素

Vue.js块重复表行在IE中不起作用

3 个答案: