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

【数据动态填充到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('返回数据成功')})}}

相关文章:

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

一&#xff1a;数据动态填充到element表格&#xff1b; 二&#xff1a;将带有标签的数据展示为文本格式&#xff1b; 1、 <el-row><el-col :span"24"><el-tabs type"border-card"><el-tab-pane label"返回值"><el-…...

小程序轮播图的两种后台方式(PHP)--【浅入深出系列008】

微信目录集链接在此&#xff1a; 详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰ 不会导入/打开小程序的看这里&#xff1a;参考 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择啥是轮播图轮播…...

使用ComPDFKit PDF SDK 构建iOS PDF阅读器

在当今以移动为先的世界中&#xff0c;为企业和开发人员创建一个iOS应用程序是必不可少的。随着对PDF文档处理需求的增加&#xff0c;使用ComPDFKit这个强大的PDF软件开发工具包&#xff08;SDK&#xff09;来构建iOS PDF阅读器和编辑器可以让最终用户轻松查看和编辑PDF文档。 …...

一套流程6个步骤,教你如何正确采购询价

采购询价&#xff08;RFQ&#xff09;是一种竞争性投标文件&#xff0c;用于邀请供应商或承包商就标准化或重复生产的产品或服务提交报价。 询价通常用于大批量/低价值项目&#xff0c;买方必须提供技术规格和商业要求&#xff0c;该文件有时也称为招标书或投标邀请书。询价流…...

git使用

常用命令 git init git库初始化&#xff0c;初始化后会在文件中出现一个.git的隐藏文件 git clone 从远程克隆仓库 git pull 从远程库中拉取 git commit 将暂存提交到本地仓库 git push 提交本地仓库到远程 git branch 查看当前分支 git branch <branchName> 切换分支 …...

SkyWalking链路追踪-搭建-spring-boot-cloud-单机环境 之《10 分钟快速搭建 SkyWalking 服务》

首先了解一下单机环境 第一步&#xff0c;搭建一个 Elasticsearch 服务。第二步&#xff0c;下载 SkyWalking 软件包。第三步&#xff0c;搭建一个 SkyWalking OAP 服务。第四步&#xff0c;启动一个 Spring Boot 应用&#xff0c;并配置 SkyWalking Agent。第五步&#xff0c;…...

Rabbit MQ整合springBoot

一、pom依赖二、消费端2.1、application.properties 配置文件2.2、消费端核心组件 三、生产端3.1、application.properties 配置文件2.2、生产者 MQ消息发送组件四、测试1、生产端控制台2、消费端控制台 一、pom依赖 <dependency><groupId>org.springframework.boo…...

Golang 中的 time 包详解(一):time.Time

在日常开发过程中&#xff0c;会频繁遇到对时间进行操作的场景&#xff0c;使用 Golang 中的 time 包可以很方便地实现对时间的相关操作。接下来的几篇文章会详细讲解 time 包&#xff0c;本文先讲解一下 time 包中的结构体 time.Time。 time.Time time.Time 类型用来表示一个…...

CMU 15-445 -- Database Recovery - 18

CMU 15-445 -- Database Recovery - 18 引言ARIESLog Sequence NumbersNormal ExecutionTransaction CommitTransaction AbortCompensation Log Records Non-fuzzy & fuzzy CheckpointsSlightly Better CheckpointsFuzzy Checkpoints ARIES - Recovery PhasesAnalysis Phas…...

HTTP Header定制,客户端使用Request,服务器端使用Response

在服务器端通过request.getHeaders()是无效的&#xff0c;只能使用response.getHeaders()。 Overridepublic Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType mediaType,Class selectedConverterType, ServerHttpRequest request, ServerHttpRespo…...

Vue 3编写的父子组件示例,包括传递数据和调用父组件方法

下面是一个使用Vue 3编写的父子组件示例&#xff0c;包括传递数据和调用父组件方法&#xff1a; ChildComponent.vue&#xff1a; <template><div><p>Child Component</p><p>Message: {{ message }}</p><button click"updateMes…...

[ 容器 ] Docker 的数据管理

目录 一、Docker 的数据管理1.1 数据卷2. 数据卷容器 二、 端口映射三、容器互联&#xff08;使用centos镜像&#xff09;四、Docker 镜像的创建1&#xff0e;基于现有镜像创建2&#xff0e;基于本地模板创建3&#xff0e;基于Dockerfile 创建3.1 联合文件系统&#xff08;Unio…...

【环境配置】使用Docker搭建LAMP环境

这篇文章不是介绍DOCKER是什么&#xff0c;也不是阐述DOCKER的核心&#xff1a;镜像/容器和仓库之间的关系,它只是一篇让刚刚接触DOCKER的初学者&#xff0c;在没有完全了解DOCKER是什么之前,也能尽快的在Linux系统下面通过DOCKER来搭建一个LAMP环境&#xff0c;这是其一&#…...

MLIR (Multi-Level Intermediate Representation)

MLIR&#xff08;Multi-Level Intermediate Representation&#xff09;是一种多级中间表示的编译器基础架构&#xff0c;旨在提供通用的、可扩展的编译器基础设施。它最初由谷歌开发&#xff0c;并且现在已经成为一个开源项目&#xff0c;受到广泛关注和采用。 MLIR 的设计理…...

VR全景在酒店的发展状况如何?酒店该如何做营销?

现阶段&#xff0c;VR全景技术已经被酒店、民宿、旅游景区、房产楼盘、校园等行业所应用&#xff0c;每天都有不少人通过VR全景展示来了解酒店的设施环境&#xff0c;而酒店也可以借此机会&#xff0c;详细展示自身优势&#xff0c;更大范围吸引顾客。 VR酒店拥有真实、立体的全…...

Winform使用PictureBox控件显示图片并且自适应

一.首先我们只需要在项目文件中的/bin/Debug 下面创建一个文件夹保存你的照片。我这里文件夹名字叫Resources.。如图&#xff1a; 二. 然后我们把我们的照片放入Resources文件夹中即可。如图&#xff1a; 三.在构造器中添加picturebox控件。如图&#xff1a; 四.我们到初始化代…...

HTML中的焦点管理

前言 焦点作为页面交互中的重要一环&#xff0c;涉及到的知识点也比较多&#xff0c;有必要做一个统一的总结。 HTML 中的可获取焦点的元素 具有 href 属性的 HTMLAnchorElement/HTMLAreaElement非禁用态的 HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLBut…...

如何区分接口测试和功能测试

接口测试和功能测试的区别&#xff1a; 2023最新Jmeter接口测试从入门到精通&#xff08;全套项目实战教程&#xff09; 本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者…...

limit分页查询

controller层 ApiOperation("员工分页查询")GetMapping("/page")public Result<PageResult> page(EmployeePageQueryDTO employeePageQueryDTO){log.info("员工分页查询&#xff0c;参数为{}",employeePageQueryDTO);PageResult pageResul…...

mysql null 值查询不出来问题

最新遇到mysql null 值查询的问题&#xff0c;当查询这个字段有的为null 有的不为null 该字段查询条件查询为null值得将不显示。 举例 新建表 test_user name和phone得值默认值为null 我们添加一些数据 查询下name 不是张三得数据 select * from test_user where name !张…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...