vue3+vant3封装省市区组件

因为后台返回的数据格式和vant不一致，所以自己遍历循环得到自己想到的格式。

省市区的接口并不是一个以children格式，一次性全部获取，而是选择市的时候需要得到省的id，一层一层请求接口才能得到省市区。

 

父组件：

<selectArea
        @addressOnFinish="onChangeArea"
        :addressObject="addressObject"
      />

import selectArea from "./../components/selectArea";
export default {
  components: {
    selectArea,
  },
    const addressObject = ref({});  //定义子组件对象
    // 切换区域
    const onChangeArea = (val) => {
      console.log(val)//得到省市区，和name
    };16 
return {
18       onChangeArea,
19       addressObject,
    };

子组件代码：

<template>
    <van-nav-bar
      :title="addressObject.address"
      class="headerTop"
      @click-left="onClickBack"
    >
      <template #right>
        <img
          src="../../static/assets/change.png"
          alt=""
          width="20"
          @click="addressShow = true"
        />
      </template>
    </van-nav-bar>
  
    <van-popup v-model:show="addressShow" round position="bottom">
      <van-cascader
        v-model="addressObject.region"
        title="请选择地区"
        :options="addressList"
        @change="onChange"
        @close="addressShow = false"
        @finish="addressOnFinish"
      />
    </van-popup>
  </template>
  
  <script setup>
  import { ref, toRefs, defineProps, defineEmits } from "vue";
  import { queryArea } from "./../../api/commonApi";
  import { closeToast, showLoadingToast } from "vant";
  import { useRouter } from "vue-router";
  const props = defineProps({
    addressObject: Object,
  });
  const { addressObject } = toRefs(props);
  
  const addressFieldValue = ref(""); //湖南省/长沙市/芙蓉区
  var addressList = ref("");
  const addressShow = ref(false);
  const addressValue = ref(""); //288
  const province = ref("");
  const city = ref("");
  const region = ref("");
  const type = ref("1");
  const parentId = ref("");
  console.log("addressObject", addressObject.value);
  const emit = defineEmits(["addressOnFinish"]);
  const router = useRouter();
  setTimeout(() => {
    // 判断是否有省id 没有是初始化  有是已新增数据并赋值
    if (addressObject.value.region) {
      var obj = {
        type: 2,
        parentId: addressObject.value.province,
      };
      // 根据省id查询市并赋值到children
      queryArea(obj)
        .then((res) => {
          if (res.data.code === 200) {
            //  console.log("省循环父id",addressList)
            var res = res.data.data;
            var options = [];
            var obj = {};
            // 循环出vant想要的格式
            console.log("addressList.value", addressList.value);
            console.log("市res", res);
            for (let i = 0; i < res.length; i++) {
              obj = {
                text: res[i].name,
                value: res[i].id,
                id: res[i].id,
                type: res[i].type,
                children: [], //省里面带children才能出现市区 市区里面带children可出现市区内区划 也就是省市区三级 所以是要把数据拼成这个格式即可
              };
              options.push(obj);
            }
            for (let j = 0; j < addressList.value.length; j++) {
              if (addressList.value[j].id == addressObject.value.province) {
                addressList.value[j].children = options;
                for (let i = 0; i < options.length; i++) {
                  if (options[i].id == addressObject.value.city) {
                    // 根据市id查询区并赋值到children
                    var params = {
                      type: 3,
                      parentId: addressObject.value.city,
                    };
                    queryArea(params)
                      .then((res) => {
                        if (res.data.code === 200) {
                          // console.log("区循环父id",addressList)
                          var res = res.data.data;
                          var list = [];
                          var item = {};
                          // 循环出vant想要的格式
                          for (let i = 0; i < res.length; i++) {
                            item = {
                              text: res[i].name,
                              value: res[i].id,
                              id: res[i].id,
                              type: res[i].type,
                            };
                            list.push(item);
                            // console.log("市加children为区并且赋值list",list)
                            for (
                              let n = 0;
                              n < addressList.value[j].children.length;
                              n++
                            ) {
                              if (
                                addressList.value[j].children[n].id ==
                                addressObject.value.city
                              ) {
                                addressList.value[j].children[n].children = list;
                                // 根据市id查询区并赋值到children
                              }
                            }
                          }
                          // console.log("省加children并且赋值",addressList)
                        }
                      })
                      .catch((error) => {
                        showToast(error);
                      });
                    return;
                  }
                }
              }
            }
            //  console.log("省加children并且赋值",addressList)
          }
        })
        .catch((error) => {});
    }
  }, 1000);
  
  const onClickBack = () => router.push("/home");
  const queryAreaData = async () => {
    var obj = {
      type: type.value,
      parentId: parentId.value,
    };
    queryArea(obj)
      .then((res) => {
        if (res.data.code === 200) {
          var res = res.data.data;
          var options = [];
          var obj = {};
          for (var i = 0; i < res.length; i++) {
            obj = {
              text: res[i].name,
              value: res[i].id,
              id: res[i].id,
              type: res[i].type,
              children: [], //省里面带children才能出现市区 市区里面带children可出现市区内区划 也就是省市区三级 所以是要把数据拼成这个格式即可
            };
            options.push(obj);
          }
          addressList.value = options;
        }
      })
      .catch((error) => {});
  };
  const onChange = ({ selectedOptions, value, tabIndex }) => {
    if (tabIndex != 2) {
      showLoadingToast("加载中...");
      setTimeout(() => {
        var obj = {
          type: tabIndex + 2,
          parentId: value,
        };
        queryArea(obj)
          .then((res) => {
            if (res.data.code === 200) {
              closeToast();
              var res = res.data.data;
              var options = [];
              var obj = {};
              for (var i = 0; i < res.length; i++) {
                // 判断是第几层 不需要 children
                if (res[i].type <= 2) {
                  obj = {
                    text: res[i].name,
                    id: res[i].id,
                    parentId: res[i].parentId,
                    value: res[i].id,
                    type: res[i].type,
                    children: [], //省里面带children才能出现市区 市区里面带children可出现市区内区划 也就是省市区三级 所以是要把数据拼成这个格式即可
                  };
                } else {
                  obj = {
                    text: res[i].name,
                    id: res[i].id,
                    parentId: res[i].parentId,
                    value: res[i].id,
                    type: res[i].type,
                  };
                }
                options.push(obj);
              }
  
              selectedOptions[tabIndex].children = options;
              selectedOptions[tabIndex].children = res.data.data
                .map((option) => option.name)
                .join("/");
            }
          })
          .catch((error) => {});
      }, 1000);
    }
  };
  // 全部选项选择完毕后，会触发 finish 事件
  const addressOnFinish = ({ selectedOptions }) => {
    addressShow.value = false;
    addressObject.value.address = selectedOptions
      .map((option) => option.text)
      .join("/");
    for (let i = 0; i < selectedOptions.length; i++) {
      region.value = selectedOptions[2].id;
    }
    // emit("addressOnFinish", region.value);
    var params = {
      province: selectedOptions[0].id,
      city: selectedOptions[1].id,
      region: region.value,
      address: addressObject.value.address,
    };
    emit("addressOnFinish", params);
  };
  
  queryAreaData();
  </script>