使用 Vuejs 的 Table 组件的插槽内容分发

Question

我想创建一个 table 组件，通过 colgroup 和 col 标签分发样式列，让使用该组件的人可以覆盖 tbody 内容的呈现方式。我在 Vuejs 中使用 named slot 但它不起作用（ colgroup 和 table body content 插槽似乎无法替换与用户的内容）这里是代码。

HTML

<body>

  <div id='app'>
    <simple-table>
      <colgroup slot='colstyle'>
        <col style='background-color: yellow;'>
      </colgroup>
      <h2 slot='above-table'>
    Above Table Content Modified
    </h2>
      <tbody slot='tbody-content'>
        <tr>
          <td>override 1</td>
          <td>override 2</td>
          <td>override 3</td>
          <tr>
      </tbody>
    </simple-table>
  </div>


  <script id='simple-table' type='x-template'>
    <slot name='above-table'>
      Default Above Table Content
    </slot>
    <table>
      <slot name='colstyle'>
        <colgroup>
          <col span='2' style='background-color: red;'>
        </colgroup>
      </slot>
      <thead>
        <tr>
          <th>First</th>
          <th>Second</th>
          <th>Third</th>
        </tr>
      </thead>
      <slot name='tbody-content'>
        <tbody>
          <tr>
            <td>xxx</td>
            <td>yyy</td>
            <td>zzz</td>
          </tr>
        </tbody>
      </slot>
    </table>
  </script>
</body>

Javascript

Vue.component('simple-table', {
  template: '#simple-table'
});

var app = new Vue({
  el: "body"
});

on jsfiddle

有没有更好的解决办法。先谢谢了。

Answer 1

我想问题出在 html 的工作原理上。在 Vuejs guide 中，表示

Some HTML elements, for example <table>, has restrictions on what elements can appear inside it

这就是他们创建特殊 is 属性的原因。但请注意，在您的情况下，您不能使用

    <colgroup is='colstyle'>
      <col span='2' style='background-color: red;'>
    </colgroup>

因为colstyle是插槽的名称，不是自定义组件。所以我要做的是为这些插槽创建小的自定义组件，并通过 is 属性

添加它们

使用 Vuejs 的 Table 组件的插槽内容分发

Slot Content Distribution of Table Component using Vuejs

vue.js

HTML

Javascript