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

文件有2个关键点 

 

<template>
   <section class="main-content">
       <section class="content-body pall15" v-if="showRule">
            <div class="eboss-row">
                 <div class="eboss-col col-flex"></div>
                 <div class="eboss-col col-flex"></div>
                 <div class="eboss-col col-flex">
                    <label class="form-label">数据权限:</label>
                    <div class="form-control">
                        <changedatarule @sendMsg="reseiveMsg" :channelList="channelList" :channel="channel"></changedatarule>
                    </div>
                 </div>
                
            </div>
        </section>
       
    </section>
</template>

<script>
   
    export default {
        mixins: [mixin],
        data() {
             var vue = this;
            return {
                  props:{
                   checkStrictly: true,label:'name',value:'wholeId',children:'children' ,leaf:'leaf',
                   lazy: true,
                    lazyLoad (node, resolve) {
                       if(node.data&&node.data.id){
                            vue.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
                                    }):[]
                                    resolve(data);
                                } else {
                                    vue.$alert(res.errorMessage, '提示');
                                }
                            })

                       }
                       
                    }
                },
                
                options: [],
                opValue:[],
                showRule:true,
            }
        },
       
        watch: {
            handlerValue() {
                if (this.$refs.addZh) {
                    this.$refs.addZh.dropDownVisible = false; //监听值发生变化就关闭它
                }
            },
        },
        
        mounted(){
            setInterval(function() {
                document.querySelectorAll(".el-cascader-node__label").forEach(el => {
                    el.onclick = function() {
                    if (this.previousElementSibling) this.previousElementSibling.click();
                    };
                });
            }, 1000);
            this.serchData()
         
        },
        methods: {
           
           
            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(val.length){
                //       let id = val[val.length-1]
                //       let  ids=id.split('-')
                //     this.axiosPost(`/pms/center/getChildrenAreaById?areaId=${ids[ids.length-1]}`).then(res => {
                //         if (res.success) {
                //             let data=res.model.length?res.model.map(item=>{
                //                 if(item.areaLevel<6){
                //                     this.$set(item,'children',[])
                //                 }
                //                  if(item.areaLevel>=6){
                //                     item.leaf=true

                //                 }
                //                 return item
                //             }):[]
                //            if(data.length){
                //                this.serach(this.options2,id,data)
                //            }

                //         } else {
                //             this.$alert(res.errorMessage, '提示');
                //         }
                //     })

                // }
                 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.serach(this.options,node.data.id,data)
                        } else {
                            this.$alert(res.errorMessage, '提示');
                        }
                    })

                }

            },
            serach(val,id,data){
                val.map(item=>{
                    if(item.id===id){
                        this.$set(item,'children',data)
                    }else if(item.children&&item.children.length){
                        return this.serach(item.children,id,data)
                    }
                    return item
                })
            },
             //获取组织
            serchData(){
                 this.axiosPost(`bbc/department`).then(res => {
                    if(res.success){
                        this.options=res.model
                    }else{
                        this.$alert(res.errorMessage+`(${res.errorCode})`,'提示', {showClose:false})
                    }
                })
            }
        }
    }
</script>

<style scoped  lang="less">
 
</style>

 

 

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);
}