多el-cascader级联选择器采用懒加载获取数据后选择数据互斥的方法

    在做运费模板配置功能中，客户要求快递模板能细化到县一级，这个时候需要使用到el-cascader级联选择器，由于一次加载全部省市县数据会导致渲染很慢，所以需要采用懒加载模式，多个el-cascader级联选择器组件之间的数据是需要进行互斥的，那么懒加载模式下如何进行数据互斥是比较复杂的，经过读el-cascader源码才用了一天时间最终实现互斥，方法如下：

1、在组件中添加visible-change、expand-change两个事件，分别在展开树形面板和加载新节点的时候对数据进行判定。

<el-cascader v-if="cascaderShow" :ref="setReceiveRegionRef" @visible-change="(val)=>checkChangeReceiveRegion(val,index)" @expand-change="(val)=>checkChangeReceiveRegion(val,index)" @change="(val)=>changeReceiveRegion(val,index)" v-model="item.expressAreaIds" placeholder="请选择地区" :props="receiveRegionProps" style="width: 100%;min-width:200px;">
    <template #default="{ node, data }">
        <span>{{ node.label }}</span>
        <span v-if="data.disabled==true" style="float: right;color:darkcyan">
            (已占用)
        </span>
    </template>
</el-cascader>

2、对数据进行判定，关键的修改的数据就是对渲染组件panel.menus中的data.disabled进行处理。

checkChangeReceiveRegion:(val,index)=>{
    let type=typeof val
    if((type=="boolean"&&val==true)||type=='object'){
        let menus=receiveRegionRefList.value[index].panel.menus
        //menus[0][0].data.disabled=true
        //获取运送方式规则中其他的menu
        for(let i in form.value.costRule){
            if (i!=index){
                for(let j in form.value.costRule[i].expressAreaIds){
                    let areaIds = form.value.costRule[i].expressAreaIds[j]
                    //其他规则中已经包含的地区需要禁用
                    disabledMenu(menus[0],areaIds)
                }
            }
        }
    }
}
const disabledMenu=(menus,areaIds)=>{
    for(let m in menus){
        if(menus[m].pathValues.join(',')==areaIds.join(',')){
            menus[m].data.disabled=true
            break;
        }
        console.log('递归menus',menus[m])
        let children = menus[m].children
        if(children.length>0){
            disabledMenu(children,areaIds)
        }
    }
}