iview组件库:当后台返回到的数据与使用官网组件指定的字段不匹配时,进行修改某个属性名再将response数据渲染到页面上的处理

1、需求导入

当存在前端需要的数据的字段渲染到表格或者是一些公共的表格组件展示数据时的某个字段名与后台返回的字段不一致时,那么需要前端进行稍加处理,而不能直接this.list = res.data;这样数据是渲染不出来的。

2、后台返回的数据类型

复制代码
Datalist(pn) {
      gatewayDeviceList({
        pn: pn ? pn : this.pn,
        ps: this.ps,
        keyword: this.value,
      }).then((res) => {
        if (res.code == 0) {
          console.log(res.data.records)
        }
      });
    }


后台返回的数据格式.png


官网的API.png

很显然,二者的数据属性不一致,这样页面上是不会有数据显示的。


执行结果.png

很显然,没有出现子节点的数据,这是因为双方的数据格式不一致导致的。

根据上面的截图可以明确的看出来,iview官网指定的是需要children字段才会显示对应的树形数据,而现在后台返回给我的是childDevices字段,因此,这就要求我们将这个字段进行处理成children字段。

复制代码
Datalist(pn) {
      gatewayDeviceList({
        pn: pn ? pn : this.pn,
        ps: this.ps,
        keyword: this.value,
      }).then((res) => {
        if (res.code == 0) {
          // 使用map遍历,并最终结果返回一个新的数组
          this.datalist = res.data.records.map((el) => {
            return {
              ...el,//扩展运算符,保留其他所有的key,value
              children: el.childDevices,//将每个元素的childDevices字段给到children属性
            };
          });
          this.total = res.data.total;
        }
      });
    }


处理后的结果.png


表格数据展示.png

根据打印后的结果得知,数据中已经有children属性了,因此树形数据也相应的展示在table表格上了,是可以进行使用官网上的组件了的。
最后编辑于:2025-06-05 21:01:10
© 著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
赤橙红的黄10 分钟前
SpringBoot 整合 自定义MongoDB
spring boot·后端·mongodb
小白要加油努力12 分钟前
C++-STL-String重点知识
开发语言·c++
饭碗、碗碗香12 分钟前
【vLLM学习笔记】:vLLM 参数说明
人工智能·笔记·学习·ai
OKkankan2 小时前
string类的模拟实现
开发语言·数据结构·c++·算法
fouryears_234174 小时前
适配器模式——以springboot为例
java·spring boot·适配器模式
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
汽车功能安全啊5 小时前
利用对称算法及非对称算法实现安全启动
java·开发语言·安全
paopaokaka_luck6 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
Flobby5296 小时前
Go语言新手村:轻松理解变量、常量和枚举用法
开发语言·后端·golang
悠哉悠哉愿意7 小时前
【电赛学习笔记】MaixCAM 的OCR图片文字识别
笔记·python·嵌入式硬件·学习·视觉检测·ocr