使用 Vuejs 对 Table 组件进行 Slot 内容分发
Posted
技术标签:
【中文标题】使用 Vuejs 对 Table 组件进行 Slot 内容分发【英文标题】：Slot Content Distribution of Table Component using Vuejs 【发布时间】：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
有没有更好的解决方案。 提前致谢。
【问题讨论】：
【参考方案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 。如果这些云是使用插槽完成的。恕我直言，它会更干净简单。以上是关于使用 Vuejs 对 Table 组件进行 Slot 内容分发的主要内容，如果未能解决你的问题，请参考以下文章
如何使用使用 promise 的方法对 vuejs 组件更新进行单元测试