Vue之循环遍历Json数据,填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码:
1 async getData(id) { 2 const res = await this.$store.api.newReq('/xxx/xxx/xxx/' + id).get(); 3 if (res.code === 0) { 4 5 this.data = res.data; 6 } 7 },
下面是定义变量:
1 data: { 2 base: {}, 3 baseList:[], 4 },
下面是table的表格展示:
1 <table class="el-table el-table--fit el-table--border table-detail"> 2 <thead> 3 <tr> 4 <th>ID</th> 5 <th>文章id</th> 6 <th>分类名称</th> 7 <th>分类等级</th> 8 <th>创建时间</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr v-for="cm in data.categoryMapList"> 13 <td v-text="cm.id"></td> 14 <td v-text="cm.docId"></td> 15 <td v-text="cm.categoryName"></td> 16 <td v-text="cm.categoryLevel"></td> 17 <td v-text="cm.createTime"></td> 18 </tr> 19 </tbody> 20 </table>
效果图:
打完收工!
知无不言,言无不尽。
本文来自博客园,作者:慵懒的小景,转载请注明原文链接:https://www.cnblogs.com/ailanlan/p/12068808.html
否则会进行维权,谢谢合作。