• element中el-cascader动态加载


    页面<el-cascader
    v-model="partyOrganId"
    :placeholder="partyOrganName"
    :props="prop"
    :show-all-levels="false"
    class="font_pla"
    ></el-cascader>

    data() {
    return {
    partyOrganId: [],
    prop: {
    lazy: true,
    lazyLoad(node, resolve) {
    setTimeout(() => {
    if (node.level == 0) {
    axios({
    method: "get", //请求方式
    url: "/api/commonUser/findByChildRegion", //请求地址
    params: {
    regionCode: "330000"
    }
    })
    .then(res => {
    const cities = res.data.data.map((value, i) => ({
    value: value.regionCode,
    label: value.regionName,
    leaf: node.level >= 2
    }));
    // 通过调用resolve将子节点数据返回,通知组件数据加载完成
    resolve(cities);
    })
    .catch(err => {
    console.log(err);
    });
    }
    if (node.level == 1) {
    axios({
    method: "get", //请求方式
    url: "/api/commonUser/findByChildRegion", //请求地址
    params: {
    regionCode: node.value
    }
    })
    .then(res => {
    const areas = res.data.data.map((value, i) => ({
    value: value.regionCode,
    label: value.regionName,
    leaf: node.level >= 2
    }));
    // 通过调用resolve将子节点数据返回,通知组件数据加载完成
    resolve(areas);
    })
    .catch(err => {
    console.log(err);
    });
    } else if (node.level == 2) {
    axios({
    method: "get", //请求方式
    url: "/api/commonPartyOrgan/getPartyOrganInfo", //请求地址
    params: {
    cityCode: node.path[0],
    areaCode: node.path[1]
    }
    })
    .then(res => {
    const partys = res.data.data.map((value, i) => ({
    value: value.id,
    label: value.name,
    leaf: node.level >= 2
    }));
    // 通过调用resolve将子节点数据返回,通知组件数据加载完成
    resolve(partys);
    })
    .catch(err => {
    console.log(err);
    });
    }
    }, 1000);
    }
    }
    };
    },

  • 相关阅读:
    个人亲历运维面试
    《Kubernetes进阶实战》之管理Pod资源对象
    Docker容器必备技能 -- iptables
    vue后台管理权限正确思路
    Axios 各种请求方式传递参数格式
    Cookie的使用(js-cookie插件)
    微信小程序template模板与component组件的区别和使用
    如何机智地回答浏览器兼容性问题
    webpack系列5:源码流程,webpack编译流程
    webpack系列4:文件分析.
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11599038.html
Copyright © 2020-2023  润新知