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

营销型网站建设的资讯网络营销代运营外包公司

wzjs 2025/8/18 6:27:19

营销型网站建设的资讯,网络营销代运营外包公司,找装修公司上什么网站,华为云专业网站定制1、需求导入当存在前端需要的数据的字段渲染到表格或者是一些公共的表格组件展示数据时的某个字段名与后台返回的字段不一致时，那么需要前端进行稍加处理，而不能直接this.list res.data;这样数据是渲染不出来的。 2、后台返回的数据类型 Datalist(pn) …

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;}});}