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
© 著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务

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

相关推荐
小七mod5 分钟前
【MyBatis】MyBatis与Spring和Spring Boot整合原理
spring boot·spring·mybatis
猴哥源码8 分钟前
基于Java+SpringBoot的动物领养平台
java·spring boot
老任与码12 分钟前
Spring AI Alibaba(1)——基本使用
java·人工智能·后端·springaialibaba
小兵张健13 分钟前
武汉拿下 23k offer 经历
java·面试·ai编程
FreeBuf_23 分钟前
Apache组件遭大规模攻击:Tomcat与Camel高危RCE漏洞引发数千次利用尝试
java·tomcat·apache
nananaij30 分钟前
【Python进阶篇 面向对象程序设计(3) 继承】
开发语言·python·神经网络·pycharm
无妄-202434 分钟前
软件架构升级中的“隐形地雷”:版本选型与依赖链风险
java·服务器·网络·经验分享
qqxhb38 分钟前
零基础数据结构与算法——第四章:基础算法-排序(上)
java·数据结构·算法·冒泡·插入·选择
阿蒙Amon40 分钟前
为什么 12 版仍封神?《C# 高级编程》:从.NET 5 到实战架构,进阶者绕不开的必修课
开发语言·c#
无小道41 分钟前
c++-引用(包括完美转发,移动构造,万能引用)
c语言·开发语言·汇编·c++