Cascader 动态加载下一级的解决办法element-ui 2.12.0 lazyload和change方法

文件有2个关键点 

 

 

 

1.错误写法

此时直接用set方法添加导致下一级数据不能渲染

即使使用$nextTick也是一样的

必须使用递归查找进行递归添加才可以渲染

   changeList(val){
                console.log(val,this.opValue)
                console.log(this.$refs.addZh.getCheckedNodes())
                let node =this.$refs.addZh.getCheckedNodes()[0]
                console.log(node,'ss',this.props)
                
                 if(node.data&&node.data.id){
                    this.axiosPost(`bbc/childDepartment?departmentId=${node.data.id}`).then(res => {
                        if (res.success) {
                            let data=res.model.length?res.model.map(item=>{
                                if(item.areaLevel>=6){
                                    item.leaf=true
                                }
                                return item
                            }):[]
                           
                           
                            this.$set(node,'children',data)
                            // this.$nextTick(()=>{
                            //     this.$set(node,'children',data)
                            // })
                        } else {
                            this.$alert(res.errorMessage, '提示');
                        }
                    })

                }

            },

2。点击字体跟点击chkeck保持一致

当我们都写完了的时候，but，特么这官网这个有两个问题：

点击圆圈后理想是自动收起下拉，但是他这个也没有
而且只能点击圆圈才能选中，点击文字 label 没有效果
于是，开始了艰辛的百度历程: 最后依然没有找到答案，好像很少人用这种，级联每一级都可以选择的。。。用得多的就是选中最后一级，像省级联动之内的

打铁还需自身硬，只有自己去慢慢看了。后面终于解决了这两个问题：
先看第一个问题，让他收起来，这个好像不难，确实不难：
设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（虽说简单，但是这个属性我找了半天，官网根本没有说~~~~(>_<)~~~~ ）
 

  watch: {
            handlerValue() {
                if (this.$refs.addZh) {
                    this.$refs.addZh.dropDownVisible = false; //监听值发生变化就关闭它
                }
            },
        },

在看看第二个问题，点击label 也每次让他选中，卧槽，无从下手，后面怎么解决的说来话长，看实现代码吧。 

 mounted(){
            setInterval(function() {
                document.querySelectorAll(".el-cascader-node__label").forEach(el => {
                    el.onclick = function() {
                    if (this.previousElementSibling) this.previousElementSibling.click();
                    };
                });
            }, 1000);
}