html - 用于工作台行的 polymer 铁选择器

Question

我想使用 <iron-selector>选择我的表的行，但它似乎表现得很奇怪。

这(显然)有效:

<iron-selector selected="0">
  <div>Item 0</div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</iron-selector>

但是如果我想在表中有可选择的行，而不是表中的 div:

<table>          
  <tr>
    <td>Item 0</td><td>bar</td><td>flan</td>
  </tr>
  <iron-selector selected="0">
    <div>
        <tr>
        <td>item 1</td><td>bard</td><td>fladn</td>
        </tr>
    </div>
    <div>
      <tr>
        <td>item 2</td><td>bard</td><td>fladn</td>
      </tr>
    </div>
   </iron-selector>
  </table>

或没有:

<table>      
 <iron-selector selected="0">
  <tr><td>Item 0</td></tr>
  <tr><td>Item 1</td></tr>
  <tr><td>Item 2</td></tr>
  <tr><td>Item 3</td></tr>
</iron-selector>   

有效。我应该只用 div 制作一张 table 吗？谢谢。

Answer 1

您在这里所做的是无效的 HTML。您不能将 iron-selector 或 div 作为 table 元素的子元素。

您可以像您所说的那样使用多个 div 元素制作表格，或者您可以创建自己的 Polymer 元素来扩展 tbody 并使用与 铁选择器。 Here是扩展原生元素的教程。 iron-selector 的文档会告诉你它实现的行为。

下面是扩展 tbody 元素并实现与 iron-selector 元素使用的相同行为的示例:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-selector/iron-selectable.html">

<dom-module id="selectable-table">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: "selectable-table",
      extends: "tbody",
      behaviors: [
        Polymer.IronSelectableBehavior
      ]
    });
  </script>
</dom-module>

然后您可以通过执行以下操作来使用它:

<table>
  <tbody is="selectable-table">
    <tr>
      <td>
        item 1
      </td>
    </tr>
    <tr>
      <td>
        item 2
      </td>
    </tr>
    <tr>
      <td>
        item 3
      </td>
    </tr>
  </tbody>
</table>

这将为您提供以下输出(添加了样式以显示选择了哪个项目):