Question

我想创建一个表格组件，通过colgroup和col标签分发样式列，让使用该组件的人可以覆盖tbody内容的呈现方式。我在Vuejs中使用了named slot，但它不起作用（ colgroup 和表体内容插槽似乎不会替换用户的内容）这里代码。< / p>

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，说

某些HTML元素（例如<table>）对内容有所限制元素可以出现在其中

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

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

因为 colstyle 是广告位的名称，而不是自定义组件。那么我要做的就是为这些插槽创建小型自定义组件，并通过is属性

添加它们

使用Vuejs的表组件的槽内容分布

HTML

的Javascript

1 个答案: