使用步骤:

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
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐