vue+element级联选择el-cascader省市区

html
<el-cascader
            v-model="value"
            :options="locationsData"
            @change="handleChange"
            :props="props"
            placeholder="省/市/区"
            clearable
          ></el-cascader>
locationsData: [], // 省市区
      provinceArr: [], // 省
      cityArr: [], // 市
      districtArr: [], // 区
      procidiArr: [],// 省市区级联选择id
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
          if (level == 0) {
            let pro = {
              areaType: 1,
            };
            await provinceAndCity(pro).then((res) => {
              this.provinceArr = res.data;
            });
            var nodes = this.provinceArr.map((item) => {
              return {
                value: item.areaCode,
                label: item.areaName,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 1) {
            let pro = {
              areaType: 2,
              areaCode: node.data.value,
            };
            await provinceAndCity(pro).then((res) => {
              this.cityArr = res.data;
            });
            // console.log(this.cityArr);
            var nodes = this.cityArr.map((item) => {
              return {
                value: item.areaCode,
                label: item.areaName,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 2) {
            console.log(node);
            let pro = {
              areaType: 3,
              areaCode: node.data.value,
            };
            await provinceAndCity(pro).then((res) => {
              this.districtArr = res.data;
            });
            var nodes = this.districtArr.map((item) => {
              return {
                value: item.areaCode,
                label: item.areaName,
                leaf: true,
              };
            });
            resolve(nodes);
          }
        },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值