使用 Vuejs 对 Table 组件进行 Slot 内容分发答案

【问题标题】：Slot Content Distribution of Table Component using Vuejs使用 Vuejs 对 Table 组件进行 Slot 内容分发
【发布时间】：2016-05-10 22:16:26
【问题描述】：

我想创建一个表格组件，通过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

有没有更好的解决方案。提前致谢。

【问题讨论】：

标签： vue.js

【解决方案1】：

我想问题在于 html 是如何工作的。在Vuejs guide 中说

某些 HTML 元素，例如 <table>，对内容有限制元素可以出现在里面

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

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

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

【讨论】：

谢谢。我没有注意到 Vuejs 指南。最后我通过你的回答得到了一些解决方法。 colgroup 也可以工作 jsfiddle.net/0xgj83up 。如果这些云是使用插槽完成的。恕我直言，它会更干净简单。