思路：
使用一个组件完成数据表格显示
template:` <table> <thead> <tr> <slot name="header"></slot> </tr> </thead> <tbody> <tr v-for="item in arr"> <slot :item="item" name="tbody"> </slot> </tr> </tbody> </table> `
注意：
自定义solt模板进行数据插入
组件和slot模板使用name属性区分表头和表体
在组件中设置:item准备数据的传递
代码如下：
<body> <div id="app"> {{msg}} <my-com :data="stus" class="style"> <template #thead class="thead"> <th>编号</th> <th>姓名</th> <th>年龄</th> </template> <template #body="{item}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </template> </my-com> <my-com :data="teas"> <template #thead> <th>编号</th> <th>姓名</th> <th>薪资</th> <th>年龄</th> </template> <template #body={item}> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.salary}}</td> <td>{{item.age}}</td> </template> </my-com> <my-com :data="cours"> <template #thead> <th>编号</th> <th>名称</th> <th>描述</th> </template> <template #body="{item}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.desc}}</td> </template> </my-com> </div> <script> let myCom={ data() { return {} }, props:["data"], template:` <table> <thead> <tr> <slot name="thead"></slot> </tr> </thead> <tbody> <tr v-for=‘(item,index) in data‘ :key="index"> <slot :item=‘item‘ name="body"></slot> </tr> </tbody> </table> ` } Vue.component("my-com",myCom); new Vue({ el:"#app", data:{ msg:"hello", stus:[{ id:1001, name:"lisi", age:13 },{ id:1002, name:"lisi2", age:15 },{ id:1003, name:"lisi3", age:14 }], teas:[{ id:101, name:"terry", salary:10001, age:50 },{ id:102, name:"terry1", salary:10101, age:51 },{ id:101, name:"terry2", salary:10003, age:53 }, { id:104, name:"terry6", salary:10005, age:54 }], cours:[{ id:1, name:"HTML", desc:"超文本" },{ id:2, name:"CSS", desc:"层叠样式表" }] }, }) </script> </body>
神奇的是，这样渲染出来的效果，最后是一个表格，我们可以用对其加入css样式来改变样式。
除此之外，我应该多去浏览器控制台看看节点信息与出错信息。节点信息能够很好地体现页面结构，出错信息则至关重要，在你不知道哪里出了问题的时候，看控制台是最好的办法。
还有就是掌握测试思维，慢慢培养逻辑感。
原文：https://www.cnblogs.com/yangnansuper/p/13709524.html