时间戳

首页 > 解决方案 > 自定义元素如何拥有多个组件

html-table - 自定义元素如何拥有多个组件

问题描述

我想创建一个<table>，其中多个自定义元素可以有多个<tr>组件。
我尝试使用containerless，但元素在<table>.

<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
  </tbody>
</table>

自定义元素看起来像

<template>
  <tr>
    <td>${line.position}</td>
    <td>${line.name}</td>
  </tr>
  <tr if.to-view="detailsVisible">
    <td colspan="2">${line.complicatedDescription}</td>
  </tr>
</template>

如何<tr>在一个 aurelia CustomElement 中获取包含详细信息的表格行作为另一个元素？

标签： html-tableaurelia

解决方案

这是 html 规范的限制。一个<table>元素不能包含除<tbody>,<tr>等以外的元素。

您可以使用as-element来克服此限制：

<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>

这告诉模板编译器这<tr>实际上是一个order-line自定义元素，并对其进行处理。同时，它“愚弄”浏览器认为这只是一个普通的<tr>

推荐阅读