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>
复制代码

效果图:

打完收工!

 

posted @   慵懒的小景  阅读(13792)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
TOP 底部
点击右上角即可分享
微信分享提示