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

﹏ヽ暗。殇╰゛Y 2022-04-23 00:12 1205阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 1][]

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

###  HTML部分： ###

<el-cascader
          :change-on-select="true"
          :props="defaultParams"
          :options="options"
      ></el-cascader>

###  JavaScript部分： ###

// 获取级联选择器数据
                getProductType(){
                    // 这是从后台获取数据
                    this.$http.get("/product/productType/tree")
                        .then(res=>{
                            // 调用递归方法，去除级联数据后将数据赋值给级联选择器
                            this.options=this.getTreeData(res.data);
                        });
                },// 递归方法
                getTreeData(data){
                    // 循环遍历json数据
                    for(var i=0;i<data.length;i++){
                        
                        if(data[i].children.length<1){
                            // children若为空数组，则将children设为undefined
                            data[i].children=undefined;
                        }else {
                            // children若不为空数组，则继续 递归调用 本方法
                            this.getTreeData(data[i].children);
                        }
                    }
                    return data;
                }

### 解决后的效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 2][]

[element-ui]: https://blog.csdn.net/suprezheng/article/details/86586651
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70]: /images/20220325/de48bd631082408c8e9dd27867bcefdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 1]: /images/20220325/e4c5baec59014f3992f88900ea4246a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cHJlemhlbmc_size_16_color_FFFFFF_t_70 2]: /images/20220325/0e1c152c597b4d91bb05c8f4e19f0689.png