兩個數組的根據類別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.pngless

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.pngiview

拿到了想要的數據結構。this

相關文章
相關標籤/搜索