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

news2024/10/9 4:23:33

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

<el-row>
                <el-col :span="24">
                  <el-tabs type="border-card">
                    <el-tab-pane label="返回值">
                      <el-table
                        :data="reponseList"
                        stripe
                        border
                        :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,header
      if (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.serviceNo
        data.param = this.form.httpService.param
        data.header = this.form.httpService.header
        postApiCall(url, header, data).then(response => {
          // 如果返回值存在output,生成数组并动态遍历到表格
          if(response?.output){
            this.apiExecuting = true
            this.reponseList = response.output.history
            this.reponseList.forEach(element => {
              this.list = Object.keys(element)             // 获取表头值:element的key值
            });
            this.$message.success('返回数据成功')
          } else {
            // 否则返回值生成文本
            this.apiExecuting = true
            this.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.serviceNo
        postApiCall(url, header, data).then(response => {
          this.apiExecuting = true
          this.reponseText = response.replace(/<[^>]+>/g, '')
          this.$message.success('返回数据成功')
        })
      }
    }

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

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

相关文章

计算机流水线在正常程序中的体现(效果可视)

众所周知,流水线技术对于软件开发人员不是可见的(visiable),毕竟已经在在机器语言之下,是组成机器语言的基本逻辑 但今天我就带领大家看看我新发现的结果,那就是流水线的可视效果,包括流水线预测技术的侧面体现,当然也是可见的 首先我先声明一下需要的基础,需要懂16位以及32位操…

leetcode 面试题01.04 回文排列

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;回文排列 思路&#xff1a;回文串两种可能。只有一个字符出现1次其他字符都是偶数次。要么都是偶数次。统计字母的个数即可。 代码&#xff1a; bool canPermutePalindrome(char* s){// 回文串两种可能// 1. 只有一个字…

几百本常用计算机开发语言电子书链接

GitHub - XiangLinPro/IT_book: 本项目收藏这些年来看过或者听过的一些不错的常用的上千本书籍&#xff0c;没准你想找的书就在这里呢&#xff0c;包含了互联网行业大多数书籍和面试经验题目等等。有人工智能系列&#xff08;常用深度学习框架TensorFlow、pytorch、keras。NLP、…

JavaWeb银行项目

主要功能 实现了贷款、存款、理财、提现、充值、开户、绑卡、转账等功能。 介绍 1、这个是一个类似有支付宝一样的web项目。 2、登录和注册&#xff0c;都是通过手机号来进行的。 3、注册的新用户需要先进行开户操作&#xff0c;然后进行绑卡操作。 4、在开户的时候回给你…

计算机专业还会继续火热吗

目录 引言 1.计算机专业火热的原因 2.学好计算机需要的技能 3.计算机未来会持续火热吗 4.博主的建议 引言 今年&#xff0c;张雪峰老师在高考志愿填报领域再次火了一把。他主张专业的实用性&#xff0c;建议家长填报那些未来不愁就业的专业&#xff0c;不好就业的专业不要去…

顺序表操作详解

文章目录 一、线性表二、顺序表1、概念2、接口实现1>初始化顺序表2>操作结束后释放空间3>打印顺序表4>尾插5>头插6>头删7>尾删8>顺序表查找9>顺序表在pos位置插入x10>顺序表删除pos位置的值 一、线性表 线性表&#xff08;linear list&#xff0…

爬取微博热搜榜并进行数据分析

设计方案 爬虫爬取的内容 &#xff1a;爬取微博热搜榜数据。 网络爬虫设计方案概述 用requests库访问页面用get方法获取页面资源&#xff0c;登录页面对页面HTML进行分析&#xff0c;用beautifulsoup库获取并提取自己所需要的信息。再讲数据保存到CSV文件中&#xff0c;进行…

《深度探索c++对象模型》第二章笔记

非原创&#xff0c;在学习 目录 2 构造函数语意学(The Semantics of Constructors) 2.1 Default Constructor的构建操作 “带有Default Constructor”的Member Class Object “带有Default Constructor”的Base Class “带有一个Virtual Function”的Class “带有一个Virtu…

机器学习深度学习——向量求导问题

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——图像分类数据集 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助…

【低代码专题方案】iPaaS运维方案,助力企业集成平台智能化高效运维

01 场景背景 随着IT行业的发展和各家企业IT建设的需要&#xff0c;信息系统移动化、社交化、大数据、系统互联、数据打通等需求不断增多&#xff0c;企业集成平台占据各个企业领域&#xff0c;成为各业务系统数据传输的中枢。 集成平台承接的业务系统越多&#xff0c;集成平台…

详解zookeeper安装使用

目录 1.概述 1.1.功能 1.2.特点 1.3.数据结构 2.安装 2.1.Windows 2.2.Linux 3.基础操作 3.1.增 3.2.删 3.3.改 3.4.查 3.5.监听 4.JAVA操作Zookeeper 4.1.依赖 4.2.客户端 4.3.增 4.4.删 4.5.查 4.6.改 1.概述 1.1.功能 zookeeper&#xff0c;Apache旗下…

pytorch:使用tensorboardX可视化网络模型时add_graph位置报错

1.报错信息 TypeError: graph() got an unexpected keyword argument ‘use_strict_trace’ 提示 graph()这个函数多了一个参数’use_strict_trace’&#xff1b; 也觉得应该是tensorboardX版本问题&#xff0c;但uninstall 再insatall之后也不行&#xff0c;用另一台机子也…

STM32H5开发(3)----电源控制RCC

STM32H5开发----3.电源控制&RCC STM32H503 供电STM32H562/563/573 LDO 供电STM32H562/563/573 SMPS供电LDO/SMPS 供电PWR 特性电源电压监测温度监测低功耗模式低功耗模式-SLEEP 模式低功耗模式-STOP 模式低功耗模式-STANDBY模式低功耗模式监控管脚VBAT模式复位触发源时钟源…

主机漏洞利用演示MS17-010(永恒之蓝)

ms17-010危害&#xff1a;对被攻击方的电脑造成蓝屏&#xff01; 申明&#xff1a;本篇文章的用意仅做学习使用 网络搭建环境&#xff1a; 软件&#xff1a;Vmware Workstation 17 攻击机&#xff1a;Kali 靶机环境&#xff1a;Windows 7 Nmap软件的基本功能&#xff1a; …

渐进式网络恢复调研

渐进式网络恢复调研 问题定义&#xff08;PNR) 如果发生重大网络中断&#xff08;例如由地震、洪水等大规模灾害&#xff09;&#xff0c;运营商必须通过一系列修复步骤来恢复其网络基础设施。优化这个序列以在恢复过程中最大化提供的服务数量的问题通常称为渐进式网络恢复&a…

Phong光照模型原理及着色器实现

现实世界中的照明极其复杂&#xff0c;取决于太多因素&#xff0c;我们无法以有限的处理能力来计算这些因素。 因此&#xff0c;OpenGL 中的光照基于使用简化模型的现实近似值&#xff0c;这些模型更容易处理并且看起来相对相似。 这些照明模型基于我们所理解的光物理学。 其中…

桥接模式-处理多维度变化

程序员小名去摆摊卖奶茶了&#xff0c;口味有香、甜。 型号有大、中、小。假如小名先在家里把这些奶茶装好&#xff0c;那么最少要装2x3 6杯奶茶&#xff0c;如果此时新增一个口味&#xff1a;酸&#xff0c;那么就需要多装3杯奶茶了。而且这样做&#xff0c;等客户买走一种&a…

c++网络编程:Boost.asio源码剖析

1、前言 Boost库是一个可移植、提供源代码的C库&#xff0c;作为标准库的后备&#xff0c;是C标准化进程的开发引擎之一。Boost库由C标准委员会库工作组成员发起&#xff0c;其中有些内容有望成为下一代C标准库内容。在C社区中影响甚大&#xff0c;是不折不扣的“准”标准库。…

HCIA练习4

题目如下&#xff1a; 目录 第一步&#xff1a;IP的规划 第二步&#xff1a;缺省路由 第三步&#xff1a;开启telnet 第四步&#xff1a;编写ACL表 第五步&#xff1a;测试 思路分析&#xff1a; 华为默认允许所有&#xff0c;所以我们可以先写拒绝要求&#xff0c;再写允…

MobaXterm通过SSH访问Ubuntu服务器遇到的一个问题

在Windows下的MobaXterm界面配置完ubuntuIP以后显示access denied&#xff0c;排查发现是因为在ubuntu那边忘记安装了SSH Serve&#xff0c;安装过程如下&#xff1a; 第一步&#xff1a;安装所需包 让我们从打开终端输入一些必要命令开始。 注意&#xff0c;在安装新的包或…