vue 组件的小问题 --- <table>><tbody>><tr> 在页面中显示错乱的问题解决

chituo2005

于 2019-03-20 18:57:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3520255/blog/3025328

博客主要讲述了在Vue中，将<row>子组件放到tbody标签里页面会出现错乱，<row>未包裹在table中的问题。解决方法是在tr中加入is=\row\，告诉浏览器tr就是row，以此解决具体小bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

is 解决多个具体小 bug

<table> tbody > tr 必须是这么写的。但是在 Vue中你写一个<row>的子组件之后放到 tbody 标签里面之后会在页面出现错乱，<row> 并没有包裹在table中，那么我们应该怎么办呢？方法就是在正常写 <tr is="row"></tr> 在 tr中加入 is="row" 告诉浏览器 tr 就是 row .

<div id="app">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <!-- <ul>
                    <li is="row"></li>
                </ul> -->

            </tbody>
        </table>
    </div>
	
	Vue.component('row', {
            template: '<tr><td>this is a row</td></tr>'
        })
        var vm = new Vue({
            el: "#app"
        })
		```
类似的问题还有  ul> li  , ol> li , select> option 等一些同样的问题参考上述解决方案

转载于:https://my.oschina.net/u/3520255/blog/3025328