Vue Element Select 选择器 和 Tree 树形控件 结合

本示例以 Vue Element Admin 项目为基础，介绍 Element Select 和 Tree 控件组合使用


1、/src/components/TreeSelect/index.vue

2、/src/views/demo/tree-select.vue

2、/src/api/tree.json

{
    "msg": "成功",
    "status": "1",
    "data": [{
            "id": 1,
            "parentId": "0",
            "level": 1,
            "goodsTypeName": "水果类",
            "children": [{

                    "id": 2,
                    "parentId": "1",
                    "level": 1,
                    "goodsTypeName": "苹果01",
                    "children": []
                },
                {

                    "id": 3,
                    "parentId": "1",
                    "level": null,
                    "goodsTypeName": "橘子01",
                    "children": [{

                        "id": 4,
                        "parentId": "3",
                        "level": 1,
                        "goodsTypeName": "大橘子",
                        "children": []
                    }]
                }
            ]
        },
        {
            "id": 5,
            "parentId": "0",
            "level": 1,
            "goodsTypeName": "蔬菜类",
            "children": []
        }
    ]
}

3、*
*
*
*
4、服务端 API 接口返回 json 数据
{
  "data": {
    "items": [
      { "role_code": 1,"role_name": "超级管理员" },
      { "role_code": 2,"role_name": "管理员" },
      { "role_code": 3,"role_name": "普通用户" },
      { "role_code": 4,"role_name": "钻石" },
      { "role_code": 5,"role_name": "金牌" },
      { "role_code": 6,"role_name": "银牌" }
    ],
    "total": 6,
    "page_count": 1
  },
  "code": "200",
  "msg": null
}
*
*
*
*
*
*