前端应用_Vue_(一行代码解决)transition-group在table表格中失效的问题(一行代码解决)

最新推荐文章于 2023-09-24 17:52:47 发布

上海_彭彭

最新推荐文章于 2023-09-24 17:52:47 发布

阅读量1.9k

点赞数 5

分类专栏： Vue.js 文章标签： vue table transition-group 失效

本文链接：https://blog.csdn.net/qq_34979346/article/details/99318874

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

这个问题卡了我一下午，一直找不到答案，然后用谷歌浏览器，解决一分钟就解决了，

就用 table transition-group 搜索里面前三都是答案，

我本人立帖为证以后查问题，不在百度直接去谷歌浏览 . 如若违反判定跑步4公里.

在看的朋友如有我的毛病，请及时改正.

我之前是这么写的：

 <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            </thead>
            < transition-group" >
            <tr  v-for="item,index in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td style="color: #0e9aef"><a href="#">删除</a></td>
            </tr>
            </transition-group>
        </table>

官方文档的解释：解析 DOM 模板时的注意事项原来，在table里使用的时候，生成的真实元素之所以会脱离table标签，并插到了table标签前，是因为这个组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。这里官方文档给出了一个解决办法：特殊特性 is ：
在这里插入图片描述

结果很明显就是用is 摆脱默认行为，以至于不让他往外偏离.

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(200px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }
        td:hover{
            background-color: #1dc5a3;
            transition: all 1s ease;

        }


    </style>
</head>
<body>
<div id="pp" >
    <div class="panel panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">添加宠物</h3>
            </div>
        <div class="panel-body form-inline">
              <label>id:</label>
        <input type="text" v-model="id"  class="form-control">
         <label>name:</label>
        <input type="text" v-model="name" class="form-control">
        <input type="button" value="添加" @click="add" class="btn btn-primary">

        </div>

    </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody is="transition-group"  appear>
            <tr  v-for="item,index in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td style="color: #0e9aef"><a href="#">删除</a></td>
            </tr>
            </tbody>
        </table>


</div>
<div>

    <script>
          var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    id:'',
                    name:'',

                   list:[{id:1,name:"小狗",ctime:new Date()},{id:2,name:"小猫",ctime:new Date()},{id:3,name:"金鱼",ctime:new Date()},{id:4,name:"大闸蟹",ctime:new Date()}]

                },
                methods: {
                    add: function () {
                        this.list.push({id:this.id,ctime:new Date(),name: this.name})
                        this.name=this.id=''
                    }

                }
            }
        )
    </script>
</div>
</body>
</html>

上海_彭彭

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端应用_Vue_(一行代码解决)transition-group在table表格中失效的问题(一行代码解决)

这个问题卡了我一下午，一直找不到答案，然后用谷歌浏览器，解决一分钟就解决了，就用 table transition-group 搜索里面前三都是答案，我本人立帖为证以后查问题，不在百度直接去谷歌浏览 . 如若违反判定跑步4公里.在看的朋友如有我的毛病，请及时改正.我之前是这么写的： <table class="table table-bordered table-hov...
复制链接

扫一扫