当前位置: 首页 > news >正文

Vue在页面输出JSON对象,测试接口可复制使用

效果图:

数据处理前:

 数据处理后:

代码实现: 

HTML:

<el-table height="600" :data="tableData" border style="width: 100%" tooltip-effect="dark" size="mini"><el-table-column fixed prop="date" label="序号" align="center" width="50"></el-table-column><el-table-column prop="username" label="登录名" align="center" width="150"></el-table-column><el-table-column prop="name" label="姓名" align="center" width="150"></el-table-column><el-table-column prop="requestAddress" label="请求地址" align="center" width="350"></el-table-column><el-table-column prop="enteringGinseng" label="入参"><template slot-scope="{row}"><template v-if="Array.isArray(row.enteringGinseng)"><div>{{`{`}}</div><div class="text_json" v-for="(item,index) in row.enteringGinseng" :key="index">{{item?`${item},`:''}}</div><div>{{`}`}}</div></template><template v-else>{{row.enteringGinseng}}</template></template></el-table-column><el-table-column prop="requestTime" label="请求时间" align="center" width="200"></el-table-column><el-table-column label="操作" align="center" width="150"><template slot-scope="scope"><el-button type="text" size="small">删除</el-button></template></el-table-column>
</el-table>

js:

this.tableData.forEach(n => {n.enteringGinseng = this.setObjorStr(n.enteringGinseng)
})
setObjorStr(obj) {let arr = [] //返回一个数组let row = '' //组成数组的参数let objStr = '' //转化key对应的Value是对象{}的情况let arrObj = '' //转化key对应的Value是数组[]里面是对象{}的情况for (let i in obj) {if (typeof obj[i] === 'object') { // 变量是对象类型if (Array.isArray(obj[i])) { // 变量是数组类型obj[i].forEach(_ => {if (typeof _ === 'object') {if (Array.isArray(_)) {_ = JSON.stringify(_)} else {arrObj = this.setObjorStr(_)_ = `{${arrObj}}`}}})row = `${i} : ${obj[i]}`} else {objStr = this.setObjorStr(obj[i])row = `${i} : {${objStr}}`}} else {row = `${i} : ${JSON.stringify(obj[i])}`}arr.push(row)}return arr
},

http://www.lryc.cn/news/119946.html

相关文章:

  • 【STM32】FreeRTOS开启后,不再进入主函数的while(1)
  • Python+Selenium+Unittest 之selenium11--WebDriver操作方法1-常用操作
  • 气液固三相线识别—Langmuir部分复现
  • Redis——常见数据结构与单线程模型
  • 大数据-玩转数据-Flink-Transform
  • Java泛型集合简明教程
  • Prometheus-RabbitMQ Exporter
  • flink读取kafka数据存储iceberg
  • 文章二:分支管理策略 - 分支玩转:Git分支管理实战
  • JS dom元素和鼠标位置之间的一系列属性快速参考
  • 【剑指 Offer 39】数组中超过一半的数字
  • list.stream.filter,List<List>转换为List
  • 手机里视频太大怎么压缩?压缩教程分享
  • Spring-Cloud-Loadblancer详细分析_3
  • 使用 VScode 开发 ROS 的Python程序(简例)
  • 2022年03月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • HarmonyOS/OpenHarmony应用开发-ArkTSAPI系统能力SystemCapability列表
  • 【01】基础知识:typescript安装及使用,开发工具vscode配置
  • 用C++实现的RTS游戏的路径查找算法(A*、JPS、Wall-tracing)
  • helm 制作应用的离线安装包
  • RN实现混合式开发-内嵌html
  • 2000-2022年全国各地级市绿色金融指数数据
  • MachineLearningWu_13/P60-P64_Tensorflow
  • centos7实现负载均衡
  • Django笔记之数据库函数之日期函数
  • 系统架构师---开发方法---敏捷开发
  • 数据中心液冷技术:规模扩张的新里程碑
  • 页面静态化(模板引擎Freemarker)
  • 详细记录Pycharm配置已安装好的Conda虚拟环境
  • photoshop生成器引入到electron项目(electron与photoshop建立通信)