这个问题卡了我一下午， 一直找不到答案， 然后用谷歌浏览器，解决一分钟就解决了，
就用 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>