Vue Element Cascader 级联选择器 List转Map转Json 多级嵌套map

export default {
    data() {
        return { 
            options: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致' 
                    }]
                }]        
            }]
        }
    }
}

上面这是级联选择器需要的json格式。

这是我的表数据，最终要达到下面这样的效果：

由字段category_one,category_two,category_three的数据组成。

在java里我直接查询需要的全部数据List<MerchantCategory> list,然后转成Map：

List<MerchantCategory> list = merchantCategoryService.selectList(
    new EntityWrapper<MerchantCategory>()
    .eq("channel_type", "1")
);//mybatis plus

//Map<String, Map<String, List<MerchantCategory>>> map = list.stream().collect(  //List<Bean>
 Map<String, Map<String, List<String>>> map = list.stream().collect(           //List<column>
    Collectors.groupingBy(
        p->p.getCategoryOne(),
        Collectors.groupingBy(
            x->x.getCategoryTwo(),
            TreeMap::new,
//          Collectors.toList() //List<Bean>
            Collectors.mapping((MerchantCategory e)->e.getCategoryThree(),  Collectors.toList())  //List<column>
        )
    )
);

最后得到的map在页面console.log()出来是这样的：

但是和Element Cascader 级联选择器需要的json格式不同，需要再转换一下，我是循环重新拼接的：

API.business.getCategory().then(({data}) => { //data.options 为返回的map
    console.log(data.options)
    var json1 = data.options,options = []
    for(var val in json1){
        var json2 = json1[val],option1 = []
        for(var val2 in json2){
            var json3 = json2[val2],option2 = []
            for(var val3 in json3){
                let obj = json3[val3]
//              if(obj.id){ 		//如果第三层是List<bean>则需要自行取值
//                  let name = obj.categoryThree?obj.categoryThree:'/'
//                  option2.push({'value':name,'label':name})
//              }
                //如果第三层是List<String>则直接拼接
                if(/^\d+$/.test(val3)) option2.push({'value':obj,'label':obj})
            }
            option1.push({'value':val2,'label':val2,'children':option2})
        }
        options.push({'value':val,'label':val,'children':option1})
    }
    console.log(options)
})

最后得到的options就是Element Cascader 级联选择器需要的json格式，如果表数据不怎么改动最好把options转成

json字符串写到js文件里，这样哪里要用直接引入js文件就好了。

import dictionary from '../../assets/js/dictionary.js'

options = dictionary.options