使用element-ui级联选择器：
从后台获取数据的过程:参考------->java从数据库中读取数据-生成菜单树tree之算法优化
第一步：从后台获取json数据：获得数据类似于下列json
[{"id": 1,"createTime": null,"updateTime": null,"name": "特产 / 食品 / 大大保健","pid": 0,"logo": "icon-shengxianshuiguo","description": "特产 / 食品 / 保健 ","sortIndex": 100,"path": ".1.","totalCount": 0,"seoTitle": "特产 / 食品 / 保健","seoKeywords": "特产 / 食品 / 保健","typeTemplateId": null,"parent": null,"children": [{"id": 2,"createTime": null,"updateTime": null,"name": "地方特产","pid": 1,"logo": null,"description": "地方特产","sortIndex": 100,"path": ".1.2.","totalCount": 0,"seoTitle": "地方特产","seoKeywords": "地方特产","typeTemplateId": 38,"parent": null,"children": [{"id": 3,"createTime": null,"updateTime": null,"name": "北京","pid": 2,"logo": null,"description": "北京","sortIndex": 100,"path": ".1.2.3.","totalCount": 0,"seoTitle": "北京","seoKeywords": "北京","typeTemplateId": null,"parent": null,"children": []},{"id": 4,"createTime": null,"updateTime": null,"name": "上海","pid": 2,"logo": null,"description": "上海","sortIndex": 100,"path": ".1.2.4.","totalCount": 0,"seoTitle": "上海","seoKeywords": "上海","typeTemplateId": null,"parent": null,"children": []}]}]}]
注意：上面的json数据，由后台传递到前台，但是在 最底层的子项 中 children 为空数组，最后在前台显示的时候会，出现 空级联 的bug存在。
解决elementui中级联选择器 空级联 bug请参考--------->解决element-ui中级联选择器出现的bug---空级联bug
第二步：在前台写代码展示数据
html部分：
<el-cascader:change-on-select="true":props="defaultParams":options="options"v-model="selectedOptions":clearable="true"></el-cascader>
JavaScript部分：
date(){return{options:[],selectedOptions: [],defaultParams: {label: 'name',value: 'id',children: 'children'}} },methods:{// 从后台获取数据getProductType(){this.$http.get("/product/productType/tree").then(res=>{// 将获得到的数据赋值给optionsthis.options=res.data;});}，// 页面加载完成后会执行此方法mounted() {// 调用方法获取所有数据this.getProductType();}}
最后效果图：
注意：在最后的效果图中出现了 空级联 的bug，这是由于从后台传递到前台的json中，最底层的 子项中 children 为 空数组造成的。
解决elementui中级联选择器 空级联 bug请参考--------->解决element-ui中级联选择器出现的bug---空级联bug
