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 arguments 传递给函数的隐含参数
Aug 21 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
Node.js笔记之process模块解读
May 31 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 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中PDO基础教程 入门级
2011/09/04 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
jQuery实现穿梭框效果
2021/01/19 jQuery
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python 统计代码行数简单实例
2017/05/04 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
单位办理社保介绍信
2014/01/10 职场文书
新员工入职感言
2014/02/01 职场文书
企业授权委托书范本
2014/04/02 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
干部考核工作总结2015
2015/07/24 职场文书
《检阅》教学反思
2016/02/22 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python