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

使用步骤:

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所对应的对象
},

猜你喜欢

转载自blog.csdn.net/qq_42715494/article/details/112855076