Element cascader 级联选择器使用，及获取当前选中的对象

╰半夏微凉° 2023-01-08 10:30 580阅读 0赞

# 使用步骤： #

### 1、html代码： ###

<el-cascader 
        ref="xzCascader"
        :props="xzProps" 
        :show-all-levels="false"
        @change="xzHandleChange"
        placeholder="请选择行省市区"></el-cascader>

### 2、js代码--data() ###

xzProps: {     //省市区选项
        label: 'xzMc',
        value: 'xzId',
        lazy: true, //设置lazyLoad，必须配合lazy：true
        checkStrictly: true,
        lazyLoad: this.lazyLoadXzqh,
    },

### 3、js代码--methods ###

// 懒加载--全国行政区划查询
    lazyLoadXzqh(node, resolve) {
        let { level } = node; // 获取当前node对象中的level属性
        let url = `${BaseUrl}/xzqh/get/xzQhListBySuperId`;
        let data = {
            superId:node.value?node.value:level==0?this.$store.state.userBean.xzQh:'' //主要的是，这个传值的变化
        }
        this.$post(url,data).then(res => {
            // console.log('全国行政区划查询   res=',res)
            if(res.code==200){
                let arr = res.data?res.data:[];
                for(let i in arr){
                    if( arr[i].xzId.substring(0,2)=="11"){//北京市的
                        if(arr[i].levelId=='5'){
                            arr[i].leaf = true; //判断是否为叶子节点
                        }
                    }else{
                        if(node.levelId=='4'){//到第4级
                            arr[i].leaf = true;
                        }
                    }
                }
                resolve(arr)
            }
        })
    },

### 4、级联选择器，获取选中的当前对象 ###

/ 选中的行政区
    xzHandleChange(val){
        const obj = this.$refs['xzCascader'].getCheckedNodes() //标签上定义的 ref值
        console.log('选中的行政区   obj.data=',obj[0].data)  // 打印出当前选择的value所对应的对象
    },