为每个表格行创建一个 Ember.js 组件会导致宽度发生变化？答案

【问题标题】：Creating an Ember.js component for each table row causes the width to change?为每个表格行创建一个 Ember.js 组件会导致宽度发生变化？
【发布时间】：2016-05-20 01:33:35
【问题描述】：

在我的 Ember.js 应用程序中，我在 Hanldebars 模板中有一个标准的 HTML 表格，如下所示：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john.d@gmail.com</td>
            <td>111-111-1111</td>
        </tr>
        <tr colspan="3">
            <td><!-- Loads of other markup  --></td>
        </tr>
    </tbody>
</table>

这很好用，但是我必须将每个表格行变成一个组件，以便添加一些逻辑等。我现在没有直接添加行，而是：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        {{#each people as |person|}}
            {{table-row person=person}}
        {{/each}}
    </tbody>
</table>

如您所见，我现在有一个名为 table-row 的组件，其中包含来自上述 HTML 的整个第一个和第二个（带有 colspan="3"）<tr> 元素。问题是，当我将它作为组件插入时，Ember 将两行包装在 <div> 中，这会导致这些行尴尬地显示出来。它不占用桌子的宽度和桌头。我该如何解决这个问题？

【问题讨论】：

标签： javascript ember.js ember-components

【解决方案1】：

在您的组件定义中，覆盖 tagName 属性。

以下示例代码来自我的 data-grid-row 组件：

export default Ember.Component.extend({
  tagName:'',

  ...
});

如果你不覆盖这个tagName，则会为你创建一个div。

看看the resource from Ember Guide

【讨论】：