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

使用element-ui级联选择器的详细过程请参考------------》element-ui之级联选择器的使用详细过程

 

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

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

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

 HTML部分：

 JavaScript部分：

          // 获取级联选择器数据
            getProductType(){
                // 这是从后台获取数据
                this.$http.get("/product/productType/tree")
                    .then(res=>{
                        // 调用递归方法，去除级联数据后将数据赋值给级联选择器
                        this.options=this.getTreeData(res.data);
                    });
            },// 递归方法
            getTreeData(data){
                // 循环遍历json数据
                for(var i=0;i

解决后的效果图：