3

我正在尝试在选项卡内使用ember-tableBootstrap，但显然如果该表包含在最初为 的选项卡中display: none，则表格布局不起作用：所有内容都大小不合适并卡在表格的左上角容器。

我通过制作手动切换的displaydiv 缩小了问题范围，它表现出相同的行为。

我有一些关于如何解决这个问题的想法，但我对其他人的想法很感兴趣。

另外，我应该将此作为错误提交吗？似乎是一个常见的用例。

4

3 回答 3

0

我也有类似的情况，虽然不完全一样。我最初在“light”视图中显示 ember-table 组件，具有一个宽度，但用户可以在该视图和具有更大宽度的“完整”视图之间切换（正如其容器所暗示的那样）。切换到更大的宽度将正确调整容器的大小，但在灯光视图中不可见的 ember-table 部分将仅包含空格，不包含单元格内容或边框，也不包含列标题。就好像它在容器的尺寸改变后从未重新渲染过。

我找到的解决方案是根据外部属性手动强制重新渲染表格，当用户切换此轻/完整模式时我会更改。为此，我扩展了表格组件，如下所示：

export default Ember.Table.EmberTableComponent.extend({

  // exposes a hook to resize (i.e. rerender) the table when it would otherwise
  // not have been detected
  resizeTriggered: function() {
    this.handleWindowResize();
  }.observes('resizeTrigger')
});

由于我使用的是 ember-cli，因此我将上述内容保存在 components/my-table-component.js 下。

完成此操作后，我将在模板中包含该表，如下所示：

{{my-table-component
  columnsBinding="columns"
  contentBinding="content"
  resizeTrigger=resizeTriggerProperty
}}

现在，每次我想确保表重新呈现时，我只需将控制器的 resizeTriggerProperty 更新为任何（新）值。就我而言，我会在操作过程中设置它（例如 MyRouteController）：

actions: {
  triggerResize: function() {
    this.set('resizeTriggerProperty', new Date().getTime());
  }
}
于 2014-09-24T02:16:46.673 回答
0

这可能有点晚了，但我使用的是 Ember Table 0.4.1（最新），我发现 ember 表会在窗口调整大小时重绘，所以我用它来使选项卡在选项卡更改时显示表格：

$(window).resize();

这就是诀窍，每当我更改选项卡时，ember table 都会重新绘制。

于 2015-04-13T10:04:58.960 回答
0

您可以在打开选项卡时调整表格大小。

this.get('tableController').set('_width',820);
于 2013-08-29T17:07:20.583 回答