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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
Java中Timer的用法详解
Oct 21 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
php preg_replace替换实例讲解
2013/11/04 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
js实现圆盘记速表
2015/08/03 Javascript
基于node实现websocket协议
2016/04/25 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python提取字典key列表的方法
2015/07/11 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python定义一个函数的方法
2020/06/15 Python
python图片合成的示例
2020/11/09 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
公司市场部岗位职责
2013/12/02 职场文书
企业精神口号
2014/06/11 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
教师读书活动心得体会
2016/01/14 职场文书
600字作文之感受大自然
2019/11/27 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android