两个数组的根据类别ID合并一个数组处理级联菜单
2020/4/3 5:01:19
本文主要是介绍两个数组的根据类别ID合并一个数组处理级联菜单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
题目描述:
数组一:
arr = [ {categoryid: 1, title: "语言"}, {categoryid: 2, title: "音乐"} ]
数组二:
brr= [ {courseid: 1, categoryid: 1, title: "写作入门"}, {courseid: 2, categoryid: 1, title: "作文进阶"}, {courseid: 3, categoryid: 2, title: "摇滚乐欣赏"}, {courseid: 4, categoryid: 2, title: "流行歌曲"} ]
需要做成二级联动的效果
因为用的iview的框架,需要处理成如下图,Cascader 级联选择的数据结构
let _childer_callback = function(categoryid) { let children = []; for (let item of brr) { if (item.categoryid == categoryid) { children.push({ value: item.courseid, label: item.title }); } } return children; }; let _arrange_data = []; for (let category of arr) { _arrange_data.push({ value: category.categoryid, label: category.title, children:_childer_callback(category.categoryid) }); } this.lessonList = _arrange_data; console.log(this.lessonList);
最后结果:
拿到了想要的数据结构。
这篇关于两个数组的根据类别ID合并一个数组处理级联菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-26uniapp 哪里看mp-html 是否有引用-icode9专业技术文章分享
- 2024-09-26uniapp 怎么显示html 代码-icode9专业技术文章分享
- 2024-09-26uniapp 有没有自带mp-html 吗-icode9专业技术文章分享
- 2024-09-25前端高频大厂面试真题解析与实战教程
- 2024-09-25前端高频面试题详解:新手必看指南
- 2024-09-25前端高频面试真题详解与实战攻略
- 2024-09-25前端大厂面试真题及答案详解:从零开始的初级面试攻略
- 2024-09-25前端面试实战:新手必备技巧与案例解析
- 2024-09-25前端面试题及答案详解:初级面试必备
- 2024-09-25前端面试真题及答案详解:适合入门与初级用户