Vue3 ElementPlus el-cascader级联选择器动态加载数据

参考了这位的大佬的写法

element el-cascader动态加载数据 (多级联动,落地实现)_el-cascader 动态加载_林邵晨的博客-CSDN博客

<el-cascader style="width: 300px" :props="address" v-model="addressValue" clearable />
import { ref } from 'vue';
// 省市区接口 改成自己定义的api方法名
import { commonAdministrative } from '@/api/modules/common';

// 默认值 回显数据格式 ['区级code1', '区级code2', '区级code3']
let addressValue = ref(['000001', '000002', '000003'])

// 省市区
let address = {
    lazy: true, // 开启懒加载
    // checkStrictly: true, //可选择任意节点
    async lazyLoad(node, resolve) {
        // node为当前点击的节点,resolve为数据加载完成的回调(必须调用)
        const nodes = [];
        // 构造查询条件 => 接口入参
        let params = {
            parentAreaCode: node.value, // 入参名按照自己的接口来改
        };
        // 请求接口
        let { data } = await commonAdministrative(params)
            if (data) {
                data.map((item) => {
                    let obj = {
                        value: item.areaCode,
                        label: item.areaDesc,
                        leaf: node.level >= 2, // 当 node.level 层级达到2级时, 就不再请求接口
                        // 具体要多少级才不请求接口, 根据层级修改
                    };
                    nodes.push(obj);
                });
            }
            //重新加载节点
            resolve(nodes);
    },
};

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值