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

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

news 来源：原创 2025/6/9 8:58:00

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,valuechildren: el.childDevices,//将每个元素的childDevices字段给到children属性};});this.total = res.data.total;}});}