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


Posted in Javascript onNovember 11, 2020

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

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前端从后台请求过来的数据进行转换数据结构操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
js实现常见的工具条效果
Mar 02 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
vue实现学生信息管理系统
May 30 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 #Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
You might like
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php实现简单加入购物车功能
2017/03/07 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python同步两个文件夹下的内容
2019/08/29 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
活动经费申请报告
2015/05/15 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书