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>

效果图:

打完收工!

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM