HTML5教程

两个数组的根据类别ID合并一个数组处理级联菜单

本文主要是介绍两个数组的根据类别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: "流行歌曲"}
]

需要做成二级联动的效果
image.png

因为用的iview的框架,需要处理成如下图,Cascader 级联选择的数据结构image.png

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);

最后结果:
image.png

拿到了想要的数据结构。

这篇关于两个数组的根据类别ID合并一个数组处理级联菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!