在 Vue 中具有内容分发的表.js未正确呈现

Table with content distribution in Vue.js not being rendered properly

本文关键字：js Vue      更新时间：2023-09-26

我正在尝试创建一个几乎只是一个表的组件，并使用内容分发在其中添加元素。

但是由于某种原因，我的插槽元素在桌子之前呈现，所以我可能做错了什么。

下面是根应用模板：

<div id="app">
  <my-comp>
    <row-comp></row-comp>
    <row-comp></row-comp>
  </my-comp>
</div>

这些是我的组件声明：

new Vue({
  el: '#app',
  components: {
    'my-comp': {
      template: ''
        <table> '
          <thead> '
          <tr> '
            <th>header</th> '
          </tr> '
        </thead> '
        <tbody> '
          <tr> '
            <td>parent row</td> '
          <tr> '
          <slot></slot> '
        </tbody> '
      </table>'
    },
    'row-comp': {
      template: '<tr><td>content</td></tr>'
    }
  }
})

这是jsfiddle：https://jsfiddle.net/vxc0o3mf/

谢谢。

<table>不能包含除<tr>和其他特定于表的元素之外的任何元素，因此在呈现时，<slot>会立即移出表。 这是一件很难解决的事情，基本上您必须使用带有 is="component" 属性的合法表元素来添加组件：

<div id="app">
  <table>
    <thead is="header-comp"></thead>
    <tr is="row-comp"></tr>
  </table>
</div>

然后：

new Vue({
    el: '#app',
  components: {
    'row-comp': {
        template: '<tr><td>content</td></tr>'
    },
    'header-comp': {
      template:'<thead><tr><th>header</th></tr></thead>'
    }
  }
})

小提琴：https://jsfiddle.net/vxc0o3mf/2/

我知道这没有您正在寻找的完整功能，但您不能将<slot>与表格一起使用:(

相关文章：