从自定义表格槽中去除 THEAD、TBODY、TR HTML 元素 [英] Stripped out THEAD, TBODY, TR HTML elements from a Custom Table slot
问题描述
我正在尝试学习 VueJS.我还处于初级阶段，所以请原谅任何误解.
我有一个 .vue 文件，它呈现一个自定义表格元素.
<table v-bind:class="classes"><插槽></插槽></模板><脚本>导出默认{数据() {返回 {样式:{分隔符:'分隔符'，固体:'bg'，bg: 'bg'}};},道具: {类型:{默认值:'分隔符'}，主题:{ 默认:'主要'}},计算:{类:函数(){return `table m-table m-table--head-${this.styles[this.type]}-${this.theme}`;}}}在我尝试创建模板的 HTML 文件中，它看起来像这样:
<头><tr>第 1 列第 1 列</tr></thead><tr><td>值1</td></tr></tbody></自定义表>但是当页面渲染时，
如果我调用$vm0.$slots.defaults[0].elm，我得到的只是text，没有HTML，没有<thead> 等
我在网上搜索了 vuejs2 从插槽中剥离 html 并找不到任何与 为什么 相关的内容.
我知道我的 .vue 文件目前可能并不完美，我只是想了解基础知识.
感谢任何帮助，指出我为什么要删除 HTML(或其他可能的内容)的正确方向.
解决方案 这是由于 HTML 中的一个限制:table children (like <thead>, <tr> 等)只能出现在 中，即使对于自定义元素也是如此.使用自定义表的官方解决方法是使用 HTML 属性 is，Vue 支持:
<头><tr>第 1 列第 1 列</tr></thead><tr><td>值1</td></tr></tbody>
见 vue.js: <component :is="comp-name"/> 和有什么区别?和
?I'm trying to learn VueJS. I'm still at the beginner level, so please excuse any misunderstandings.
I have a .vue file, which renders a custom table element.
<template>
<table v-bind:class="classes">
<slot></slot>
</table>
</template>
<script>
export default {
data() {
return {
styles: {
separator: 'separator',
solid: 'bg',
bg: 'bg'
}
};
},
props: {
type: { default: 'separator' },
theme: { default: 'primary' }
},
computed: {
classes: function () {
return `table m-table m-table--head-${this.styles[this.type]}-${this.theme}`;
}
}
}
</script>
In my HTML file that is trying to create the template, it looks like this:
<custom-table type="solid" theme="primary">
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
</tr>
</tbody>
</custom-table>
But when the page renders, all the html in the <slot> is stripped out, leaving only the text:
If I call $vm0.$slots.defaults[0].elm, all i get is the text, no HTML, no <thead> etc.
I've searched online, for vuejs2 stripping out html from slots and can't find anything relating to why it's happening.
I understand that my .vue file might not be perfect at the moment, I'm just trying to get the basics.
Any help, pointing me in the right direction as to why it's stripping out the HTML (or what else might be) is appreciated.
解决方案 It is due to a restriction in HTML: table children (like <thead>, <tr>, etc.) can only appear within a <table>, even for a Custom Element.
The official workaround to use a custom table is to use the HTML attribute is, which is supported by Vue:
<table is="custom-table" type="solid" theme="primary">
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
</tr>
</tbody>
</table>
See vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?
这篇关于从自定义表格槽中去除 THEAD、TBODY、TR HTML 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆