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>

效果图：

打完收工！