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库还是自己写代码?
Jan 28 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
Json解析的方法小结
Jun 22 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
短波的认识
2021/03/01 无线电
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
Js组件的一些写法
2010/09/10 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
公休请假条
2014/04/11 职场文书
工作鉴定评语
2014/05/04 职场文书
销售经理工作检讨书
2015/02/19 职场文书
运动会宣传语
2015/07/13 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers