从自定义表格槽中删除了 THEAD、TBODY、TR HTML 元素

Posted 2023-02-22

【中文标题】从自定义表格槽中删除了 THEAD、TBODY、TR HTML 元素

【英文标题】：Stripped out THEAD, TBODY, TR HTML elements from a Custom Table slot

【发布时间】：2018-12-09 04:40:26

【问题描述】：

我正在尝试学习 VueJS。我还处于初级水平，所以请原谅任何误解。

我有一个.vue 文件，它呈现一个自定义表格元素。

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

在我试图创建模板的 html 文件中，它看起来像这样：

<custom-table type="solid" theme="primary">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
        </tr>
    </tbody>
</custom-table>

但是当页面渲染时，<slot>中的所有html都被剥离掉了，只剩下文字了：

如果我调用$vm0.$slots.defaults[0].elm，我得到的只是text，没有HTML，没有<thead> 等等。

我在网上搜索了vuejs2 stripping out html from slots，但找不到任何与为什么发生这种情况有关的信息。

我知道我的.vue 文件目前可能并不完美，我只是想了解一些基础知识。

感谢任何帮助，指出我为什么要剥离 HTML（或其他可能的内容）的正确方向。

【问题讨论】：

在这里推测，但您可能会遇到 <thead> 和 <tbody> 元素作为无效内容被吊出，因为期望它们是包装它们的 <table>。请参阅DOM Parsing Caveats 上的此部分。

好声音，我会试试它的建议 :) 谢谢！

@DigitalDrifter 答案已经发布，但您提供的链接也是一个有用的答案。如果您想将其发布为答案，我会很高兴地支持它:)

别担心，很高兴你把它整理好了。

【参考方案1】：

这是由于 HTML 中的限制：子表（如 <thead>、<tr> 等）只能出现在 <table> 中，即使对于自定义元素也是如此。

使用自定义表格的官方解决方法是使用HTML属性is，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>

见vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?

【讨论】：

这就是我们现在正在做的而不是标记重复项吗？

@Derek：不一定。如果我只是添加指向具有类似内容的答案的链接，我理解您的困惑。在这种情况下，我认为虽然该答案也与该问题相关，但这些问题并不相同。我无法通过快速搜索找到合适的等效问题，尽管这是一个众所周知的警告（如果您有的话，我很乐意找到一个？）。此外，据观察，在前端许多人（希望这里不是 OP）拒绝不完全符合他们情况的重复问题。我记得 Meta 上有一篇关于它的帖子，但找不到。

很公平，只是检查一下。感谢您的解释。有些元数据有时会自相矛盾。