使用步骤:

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

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐