VUE前端从后台请求过来的数据进行转换数据结构操作

 更新时间:2020年11月11日 14:29:43   作者:LILEILEILOVE  
VUE前端从后台请求过来的数据进行转换数据结构操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了,大家还是直接看代码吧`

let label(){
let _this = this;
let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize
let params ={
offset:_offset,//分页偏移量
limit:_limit,//分页查询数量
}
labelView(",params).then(res=>{
_this.list = res.data.data
_this.pagination.total = res.data.pagination.total;
//转换数据
let treeDataArray = new Array();
const element = _this.list
let obj={
name:"",
isExpand:true,
children:new Array()
}
treeDataArray.push(obj);
for(let dd1 = 0;dd1<_this.list.length;dd1++){
const element = _this.list[dd];
let obj1 ={
root:true,
isExpand:true,
name:element['model'],
children:new Array()
}
obj.children.push(obj1);
for(let dd2 = 0;dd2<element.label.length;dd2++){
const element2 = element.label[dd2];
let obj2 = {
name:element['label2'],
isExpand:true,
children:new Array()
};
obj1.children.push(obj2);
for(let dd3 = 0;dd3<element2['label3'].length;dd3++){
const element3 = element2['label3'][dd3];
obj2.children.push({
name:element3,
})
}
}
}
_this.treeList = treeDataArray;

补充知识:Vue中使用Map数据结构的坑, 直接set 无法触发 双向数据绑定(解决方案)

1. 因为想贯彻es6的使用, 在项目中 多多使用 es6 的特性, 结果Map 的 set 方法去更新数据, 视图无法同步,

故而使用重新设置的方式达到目的, 类似

let obj = Object.assign({},{})

或者

 let arr = [].concat['a']

let no = server_no.toString()
let is_check = this.collated_data.get(no).is_check
this.collated_data.get(no).is_check = !is_check
// 使用Map数据结构只能这样更新
this.collated_data = new Map(this.collated_data)

重新赋值, 而不是更改引用。

以上这篇VUE前端从后台请求过来的数据进行转换数据结构操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何解决axios请求前端跨域问题

    vue如何解决axios请求前端跨域问题

    vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • Vue前端书写规范大全(非常详细!)

    Vue前端书写规范大全(非常详细!)

    在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,下面这篇文章主要给大家介绍了关于Vue前端书写规范的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue实现抽奖效果Demo

    vue实现抽奖效果Demo

    这篇文章主要介绍了vue实现抽奖效果Demo,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue实现树形结构样式和功能的实例代码

    vue实现树形结构样式和功能的实例代码

    这篇文章主要介绍了vue树形结构样式和功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • Vue3+TS+Vant3+Pinia(H5端)配置教程详解

    Vue3+TS+Vant3+Pinia(H5端)配置教程详解

    这篇文章主要介绍了Vue3+TS+Vant3+Pinia(H5端)配置教程详解,需要的朋友可以参考下
    2023-01-01
  • vue中如何禁止input框和textarea编辑

    vue中如何禁止input框和textarea编辑

    这篇文章主要介绍了vue中如何禁止input框和textarea编辑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue Element前端应用开发之动态菜单和路由的关联处理

    Vue Element前端应用开发之动态菜单和路由的关联处理

    这篇文章主要介绍了Vue Element前端应用开发之动态菜单和路由的关联处理,对vue感兴趣的同学,可以参考下
    2021-05-05
  • vue-router跳转方式的区别解析

    vue-router跳转方式的区别解析

    在Vue中,router-link称为声明式路由,:to绑定为跳转的目标地址,一种是通过name,另一种是path,这篇文章主要介绍了vue-router跳转方式的区别,需要的朋友可以参考下
    2022-12-12
  • vue 动态路由component 传递变量报错问题解决

    vue 动态路由component 传递变量报错问题解决

    这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论