表格内的嵌套自定义组件呈现在错误的位置？答案

【问题标题】：Nested custom components inside table rendered in the wrong place?表格内的嵌套自定义组件呈现在错误的位置？
【发布时间】：2020-10-12 20:04:04
【问题描述】：

我想渲染一个表格，因为我需要在单元格上工作，所以我通过一个组件来定义它们。

下面是小提琴中的例子：

Vue.component('table-cell', {
    props: {
        'r': 0,
        'c': 0
    }, 
    template: '<td style="border: 1px solid black; width:2em;">{{ c }}</td>'
});

var app = new Vue({
    el: '#app',
    data: {
        rows: 3,
        cols: 3,
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <table>
        <tbody>
            <tr v-for="r in rows">
                <table-cell v-for="c in cols" v-bind:key="c">
            </tr>
        </tbody>
    </table>
</div>

但是生成的代码不是我所期望的：

<div id="app">
    <td></td>
    <td></td>
    <td></td>
    <table>
        <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>
    </table>
</div>

由于我不明白的原因，我的 td 元素是在 tr 之外生成的，而且一切似乎都像我的两个循环没有嵌套一样工作。当我用简单的<td>（不使用组件）更改<table-cell> 时，它按预期工作。

【问题讨论】：

不是你要找的答案，但我想指出，data 属性应该是一个返回对象的函数
这不仅适用于组件，而且不适用于 vue 实例？
两者兼得。见vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

标签： javascript html vue.js html-table

【解决方案1】：

您遇到了一个 HTML 解析边缘案例，该案例在 Vue 文档中的 HTML Template Parsing Caveats 下进行了描述。解决方法是在tables 内的自定义组件上使用is 属性。这是您的代码的固定工作示例：

Vue.component('table-cell', {
    props: {
        r: Number,
        c: Number,
    }, 
    template: '<td>{{r}}, {{c}}</td>',
})

var app = new Vue({
    el: '#app',
    data: {
        rows: 3,
        cols: 3,
    },
})

td {
  border: 1px solid black;
  padding: 5px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tbody>
      <tr v-for="r in rows" :key="r">
        <td is="table-cell" v-for="c in cols" :key="c" :r="r" :c="c">
        </td>
      </tr>
    </tbody>     
  </table>
</div>

【讨论】：