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

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