H5使用vant，后台使用element，用户的省市区地址数据源统一

不知道大家是不是和我一样，做这种H5和PC端框架不一样的项目，地址这块永远头疼不统一。

现在讲我遇到的坑记录一下，问题已解决，花了几个小时吧~（推荐第一种，统一使用vant地址数据库）

1.统一使用vant提供的地址数据

H5端：

//H5端代码：

import area from "./area";

<van-popup v-model="showPicker03" position="bottom">
              <van-area
                :area-list="areaList"
                @cancel="cancel03"
                @confirm="comfirm03"
                :value="baseInfo.selectedAreaCode"
              />
            </van-popup>

 PC端：

// 本代码为PC端文件 area.js

// vant地址源转为element格式

let areaList ={};//这里是vant的数据，具体数据可去网上找

let regionData = []

let a = function areaFormat() {

  let _this = this, cityNum = '', countyNum = ''

  for (let p in areaList.province_list) {
    let province_option = {

      value: p,

      label: areaList.province_list[p],

      children: []

    }

    regionData.push(province_option)

  }

  for (let c in areaList.city_list) {

    let city_option = {

      value: c,

      label: areaList.city_list[c],

      children: []

    }

    //城市与省会的索引差介于100到10000

    regionData.map((item, index) => {

      let diff = c - parseInt(item.value)

      if (diff < 10000 && diff > 99 && index < 34) {

        regionData[index].children.push(city_option)

      }

      //这里是外国数据

      if (index > 33 && c > 900000) {

        regionData[index].children.push({

          value: c,

          label: areaList.city_list[c]

        })

      }

    })

  }

  //城市与城区的索引差小于100

  for (let t in areaList.county_list) {

    let county_option = {

      value: t,

      label: areaList.county_list[t]

    }

    regionData.map((item, index) => {

      item.children.map((itemChild, indexChild) => {

        let diff = t - parseInt(itemChild.value)

        if (diff > 0 && diff < 100) {

          regionData[index].children[indexChild].children.push(county_option)

        }

      })

    })

  }

}

a()

export default regionData

<el-cascader
            size="large"
            :options="optionsArea"
            v-model="patientForm.selectedAreaOptionsArr"
            @change="areaChange"
            style="width: 188.8px"
            :disabled="openPatientReadonly"
            :props="{ label: 'label', value: 'label' }"
          >
          </el-cascader>


import regionData from "@/utils/area"; //省市区数据源和H5统一为vant提供

//下面JS代码功能为存储地址code，毕竟H5里vant框架展开地址选择器回显数据时只能通过地址code回显
//arr为element里地址选择后的值是一个数组
//regionData是上面的数据源

 function textToCode(arr, regionData) {
  let areaCode = "";
  for (let item of regionData) {
    if (item.label == arr[0]) {
      for (let item2 of item.children) {
        if (item2.label == arr[1]) {
          //省市区
          if (arr.length == 3) {
            for (let item3 of item2.children) {
              if (item3.label == arr[2]) {
                areaCode = item3.value;
              }
            }
          } else {
            //只有省市
            areaCode = item2.value;
          }
        }
      }
    }
  }
  return areaCode;
};

2.统一使用element数据源

// element的地址库转为vant地址库格式
import { regionData } from "element-china-area-data";
let area = {
  province_list: {},
  city_list: {},
  county_list: {}
}
for (let item of regionData) {
  // console.log(item)
  area.province_list[item.value] = item.label
  if (item.children) {
    for (let item2 of item.children) {
      area.city_list[item2.value] = item2.label
      if (item2.children) {
        for (let item3 of item2.children) {
          area.county_list[item3.value] = item3.label
        }
      }
    }
  }

}
export default area