使用element-ui框架的积累(四)


如何实现树型结构单选

树型结构数据 single.json

[{
    "id": "1",
    "label": "running man",
    "children": [{
        "id": "r1",
        "label": "刘在石"
    }, {
        "id": "r2",
        "label": "池石镇"
    }, {
        "id": "r3",
        "label": "金钟国"
    }, {
        "id": "r4",
        "label": "gray"
    }, {
        "id": "r5",
        "label": "HAHA"
    }, {
        "id": "r6",
        "label": "宋智孝"
    }, {
        "id": "r7",
        "label": "李光洙"
    }]
},{
    "id":"2",
    "label":"仙剑奇侠传三",
    "children":[
        {
            "id":"x1",
            "label":"景天"
        },{
            "id":"x2",
            "label":"徐长卿"
        },{
            "id":"x3",
            "label":"龙葵"
        },{
            "id":"x4",
            "label":"茂茂"
        },{
            "id":"x5",
            "label":"唐雪见"
        },{
            "id":"x6",
            "label":"紫萱"
        },{
            "id":"x7",
            "label":"重楼"
        },{
            "id":"x8",
            "label":"邪剑仙"
        }
    ]
},{
    "id":"3",
    "label":"山海情",
    "children":[
        {"id":"s1","label":"李水花"},
        {"id":"s2","label":"白麦苗"}
    ]
}]

index.vue