解决element-ui中级联选择器(Cascader)出现空白选项的bug---空级联bug

在使用element-ui级联选择器的过程中，发现出现 空级联 的bug

首先我们分析出现空级联原因是：由于数据是从后台传递过来的，当后端的老铁使用递归算出菜单，然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。

解决办法： 在前台js代码中，同样使用递归的方式，将最底层中的 children设为undefined

 HTML部分：

1. <el-cascader

2. :change-on-select="true"

3. :props="defaultParams"

4. :options="options"

5. ></el-cascader>

 JavaScript部分：

1. // 获取级联选择器数据

2. getProductType(){

3. // 这是从后台获取数据

4. this.$http.get("/product/productType/tree")

5. .then(res=>{

6. // 调用递归方法，去除级联数据后将数据赋值给级联选择器

7. this.options=this.getTreeData(res.data);

8. });

9. },// 递归方法

10. getTreeData(data){

11. // 循环遍历json数据

12. for(var i=0;i<data.length;i++){

13.  

14. if(data[i].children.length<1){

15. // children若为空数组，则将children设为undefined

16. data[i].children=undefined;

17. }else {

18. // children若不为空数组，则继续 递归调用 本方法

19. this.getTreeData(data[i].children);

20. }

21. }

22. return data;

23. }

解决后的效果图：