【数据动态填充到element表格;将带有标签的数据展示为文本格式】

一:数据动态填充到element表格;
二:将带有标签的数据展示为文本格式;
在这里插入图片描述
1、

<el-row><el-col :span="24"><el-tabs type="border-card"><el-tab-pane label="返回值"><el-table:data="reponseList"stripeborder:max-height="300"style="width: 100%; margin: 15px 0;"><el-table-column label="序号" width="55" align="center"><template slot-scope="scope"><span>{{ scope.$index +1 }}</span></template></el-table-column><el-table-column v-for="(item,index) in list" :key="index" :prop="item" :label="item" align="center" show-overflow-tooltip /></el-table></el-tab-pane></el-tabs></el-col></el-row>

2、data

data() {return {reponseList: []//获取的整个数组列表 eg: [{bandWidths:'1',createTime:'2',delays:'3',}{bandWidths:'1',createTime:'2',delays:'3',}...]list:[],          //reponseList的element,eg: ['bandWidths', 'updateTime', 'delays',] 用作表头的值}}

3、methods

handleCall() {// 服务类型为1:http请求时,传值serviceNo,param,headerif (this.form.serviceType === '1') {const url = 'service/execute'const header = { service_key: this.apiHeader.service_key, secret_key: this.apiHeader.secretKey }const data = {}data.serviceNo = this.form.serviceNodata.param = this.form.httpService.paramdata.header = this.form.httpService.headerpostApiCall(url, header, data).then(response => {// 如果返回值存在output,生成数组并动态遍历到表格if(response?.output){this.apiExecuting = truethis.reponseList = response.output.historythis.reponseList.forEach(element => {this.list = Object.keys(element)             // 获取表头值:element的key值});this.$message.success('返回数据成功')} else {// 否则返回值生成文本this.apiExecuting = truethis.reponseText = response.replace(/<[^>]+>/g, '')        //将所有标签替换this.$message.success('返回数据成功')}})// 服务类型为2:webservice请求时,传值serviceNo} else if (this.form.serviceType === '2') {const url = 'service/execute'const header = { service_key: this.apiHeader.service_key, secret_key: this.apiHeader.secretKey }const data = {}data.serviceNo = this.form.serviceNopostApiCall(url, header, data).then(response => {this.apiExecuting = truethis.reponseText = response.replace(/<[^>]+>/g, '')this.$message.success('返回数据成功')})}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/13473.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于OpenCV solvePnP函数估计头部姿势

人脸识别 文章目录 人脸识别一、姿势估计概述1、概述2、姿态估计3、在数学上表示相机运动4、姿势估计需要什么5、姿势估计算法6、Levenberg-Marquardt 优化 二、solvePnP函数1、函数原型2、参数详解 三、OpenCV源码1、源码路径 四、效果图像示例参考链接 一、姿势估计概述 1、…

Go语言学习笔记(狂神说)

Go语言学习笔记&#xff08;狂神说&#xff09; 视频地址&#xff1a;https://www.bilibili.com/video/BV1ae41157o9 1、聊聊Go语言的历史 聊聊Go语言的历史-KuangStudy-文章 2、Go语言能做什么 下面列举的是原生使用Go语言进行开发的部分项目。 Docker Docker 是一种操作…

【机器学习】西瓜书学习心得及课后习题参考答案—第4章决策树

这一章学起来较为简单&#xff0c;也比较好理解。 4.1基本流程——介绍了决策树的一个基本的流程。叶结点对应于决策结果&#xff0c;其他每个结点则对应于一个属性测试&#xff1b;每个结点包含的样本集合根据属性测试的结果被划分到子结点中&#xff1b;根结点包含样本全集&a…

Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面

theme: cyanosis 1. 前言 很多朋友可能在布局过程中、或者组件使用过程中&#xff0c;会遇到诸如颜色、尺寸、约束、定位等问题&#xff0c;可能会让你抓耳挠腮。俗话说&#xff0c;磨刀不误砍柴工&#xff0c;会使用工具是非常重要的&#xff0c;其实 Flutter 提供了强大的调试…

10分钟实现任务调度平台搭建

日常项目中&#xff0c;会有很多需要定时执行的任务&#xff0c;而这些任务的变化比较多&#xff0c;可能随时都要调整&#xff0c;那么对调度的灵活性要求比较高。我们传统的Spring Task或者Quartz&#xff0c;可以实现定时任务调度&#xff0c;但是内置在代码里&#xff0c;修…

JA64 1+2+3+...n

一、题目 求123...n_牛客题霸_牛客网 二、代码 1.使用静态成员变量构造函数 class SUM {private:static int _i;static int _ret;public:SUM(){_ret _ret _i;_i;}static int GetRet(){return _ret;} }; int SUM::_i1; int SUM::_ret0;class Solution { public:int Sum_So…

【java的类型数据】——八大类型数据

文章目录 前言字面常量字面常量的分类: 数据类型和变量变量的包装类和范围范围整型变量byteintshortlong 浮点型变量双精度浮点型double单精度浮点型float 字符型变量char布尔型变量 boolean 类型转换自动类型转换&#xff08;隐式&#xff09;强制类型转换&#xff08;显式&am…

一个字符驱动示例 -- 微秒级别周期 反转GPIO

仅作为自我记录的一个demo 本次GPIO以微妙级别频率的反转实验有以下几个启示&#xff1a; 一开始在应用层做延时&#xff0c;来实现2微妙周期&#xff0c;占空比50%的GPIO反转&#xff0c;发现波形的频率一直上不去&#xff0c;只能在25hz徘徊&#xff0c;后来索性去掉延时&am…

flink写入到kafka 大坑解析。

1.kafka能不能发送null消息&#xff1f; 能&#xff01; 2 flink能不能发送null消息到kafka&#xff1f; 不能&#xff01; public static void main(String[] args) throws Exception {StreamExecutionEnvironment env StreamExecutionEnvironment.getExecutionEnvironment(…

JavaWeb+jsp+Tomcat的叮当书城项目

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88123111?spm1001.2014.3001.5503 技术&#xff1a;ssm jsp JDK1.8 MySQL5.7 Tomcat8.3 源码数据库课程设计 功能&#xff1a;管理员与普通用户和超级管理员三个角色&#xff0c;管理员可…

浅谈 Spring AOP 思想

Spring AOP AOP 切面编程普通代理类JDK动态代理Cglib动态代理AOPAOP术语AOP切面编程的优势Advice通知类型&#xff08;5种&#xff09;通知的执行顺序 Order切入点表达式表达式execution注解annotation Spring事务管理Transactional 及 Transactional 的两个属性Transactional …

常用直线模组的类型

目前&#xff0c;直线模组的应用非常广泛&#xff0c;而且直线模组的种类也有很多可以满足每个行业的应用要求&#xff0c;那么常见的直线模组类型有哪些&#xff0c;大家知道吗&#xff1f; 1、全封闭滚珠丝杆直线模组&#xff1a; 在半封闭式的基础上增加了不锈钢带防尘结构…

[Angular] Import TranslateModule in Angular 16

1.Background Angular 更新至V16版后&#xff0c;支援 standalone&#xff0c;故移除了 NgModule&#xff0c;而TranslateModule 又要在AppModule中 import&#xff0c;那该如何做呢&#xff1f; 2.NPM packages installation npm install ngx-translate/core npm install n…

BUUCTF——reverse3 适合新手的关于base64加密算法代码的分析

作为一个逆向小白&#xff0c;学了点加密算法就来BUU找点乐子&#xff0c;前7题蛮简单的&#xff0c;然后做到了reverse3&#xff0c;典型的base64加密算法&#xff0c;让我折腾了好久&#xff0c;写篇博客记录一下 顺便说下很多博客并没有对这里的加密算法进行代码上的分析&a…

分享VMware Workstation Pro ESXI7创建虚拟机和配置硬盘空间(分享自己的学习历程意在帮助有需要的小伙伴)

背景&#xff1a;因公司项目需求改用VMware Workstation Pro&#xff0c;已经使用1个月目前除了中途出现过一次问题被解决后一直稳定运行至今&#xff0c; 1:这里贴出拿出现的问题提示及解决方法的链接&#xff1a;解决vmWare ESXI 7.3报错; 2:如果你是第一次接触VMware Work…

Echarts 文字太长用省略号代替

xAxis: [{type: category,data: [materialUserEchartsDate.value[0] ? materialUserEchartsDate.value[0].name : ,materialUserEchartsDate.value[1] ? materialUserEchartsDate.value[1].name : ,materialUserEchartsDate.value[2] ? materialUserEchartsDate.value[2].na…

二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom

要实现这个效果&#xff0c;我们先看一下目前的页面展示&#xff1a; 左边有一个图例&#xff0c;我们可以方法缩小地图&#xff0c;右边是动态的marker标记&#xff0c;到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list&#xf…

【广州华锐互动】无人值守变电站AR虚拟测控平台

无人值守变电站AR虚拟测控平台是一种基于增强现实技术的电力设备巡检系统&#xff0c;它可以利用增强现实技术将虚拟信息叠加在真实场景中&#xff0c;帮助巡检人员更加高效地完成巡检任务。这种系统的出现&#xff0c;不仅提高了巡检效率和准确性&#xff0c;还降低了巡检成本…

企业级敏捷转型探索与实践︱极狐Gitlab战略运营部PMO郝韫

极狐Gitlab战略运营部PMO郝韫先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;企业级敏捷转型探索与实践。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; 打造持续创新、快速成长的敏捷组织…

python调用百度ai将图片/pdf识别为表格excel

python调用百度ai将图片识别为表格excel 表格文字识别(异步接口)图片转excel 表格文字识别V2图片/pdf转excel通用 表格文字识别(异步接口) 图片转excel 百度ai官方文档&#xff1a;https://ai.baidu.com/ai-doc/OCR/Ik3h7y238 使用的是表格文字识别(异步接口)&#xff0c;同步…