Question

我正在尝试使用包含一些表格单元格的Polymer创建自定义元素。我想将它包含在表格行中。我遇到的问题是自定义元素标签打破了表格的格式（因为表格行期望直接包含表格单元格元素而不是通过子元素）。

有没有办法做我想做的事？

Answer 1

我只是从等式中移除<tr>来解决这个问题。

<table>
  <thead>
    <th>Name</th>
    <th>Date</th>
  </thead>
  <tbody>
    <template is="dom-repeat" items="[[items]]">
      <custom-component item="{{item}}"></custom-component>
    </template>
  </tbody>
</table>

自定义组件的模板如下所示：

<template>
  <td>{{item.name}}</td>
  <td>{{item.date}}</td>
</template>

然后我使用它为组件中的自定义组件添加样式，说：

custom-component {
  display: table-row;
}

Answer 2

这不受支持，因为浏览器不支持它。你可以做的是不使用表，而是使用CSS来显示像table-cell，

这样的元素

另见https://developer.mozilla.org/de/docs/Web/CSS/display

display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

如果你想让你的自定义元素只包含<td></td>的{{1}}（但不是全部），那么这可能适用于你

<tr>

然后像

一样使用它

<dom-module is="custom-tr">
  <template>
    <style>
      :host { display: table-row; }
      .td, ::content .td { display: table-cell; }
    <div class="td">a</div>
    <div class="td">b</div>
    <content></content>
    <div class="td">e</div>
    <div class="td">f</div>
  </template>
</dom-module>

包含表格单元格的Polymer自定义元素

2 个答案: