vant ui AddressEdit 地址编辑组件初始化需要地址编码areaCode的处理方法

前言：

之前使用微信小程序、uniapp的省市区选择组件，初始数据都可以直接接收省市区名称的，诸如 let addr=['北京市','北京市','东城区'] ，所以，直接根据后端接口返回的省市区数据就能完成组件初始化。

但vant ui就偏不，只能接收areaCode，开发文档上说了，areaCode需要在点击省市区级联组件后获取，但是初始化的时候怎么点击组件呢？这不是妥妥的子项矛盾么？

八成是开发人员偷懒了，所以这个组件用着就不那么顺利了，需要我们自己把areaCode保存到数据库，并通过接口返回前端，或者前端根据vant提供的areaList 数据源进行匹配，自行提取areaCode了。

这里就贴下前端js提取areaCode的代码，希望能给有同样困扰的同学们有所帮助。

示例代码：

const areaList = {
    province_list: {
        110000: '北京市',
        120000: '天津市',
    },
    city_list: {
        110100: '北京市',
        120100: '天津市',
    },
    county_list: {
        110101: '东城区',
        110102: '西城区',
        // ....
    },
};

let province = '北京市',
    city = '北京市',
    county = '东城区';

function getFullAreaCode(areaList, province, city, county) {
    let provinceCodePrefix = null;
    let cityCodeFirstFour = null;
    let fullAreaCode = null;

    // 获取省份编码前 2 位
    for (const code in areaList.province_list) {
        if (areaList.province_list[code] === province) {
            provinceCodePrefix = code.slice(0, 2);
            break;
        }
    }

    if (provinceCodePrefix) {
        // 根据省份编码前 2 位匹配市区编码前 2 位，找到市区名称对应的市区编码，取前 4 位
        for (const code in areaList.city_list) {
            if (code.startsWith(provinceCodePrefix) && areaList.city_list[code] === city) {
                cityCodeFirstFour = code.slice(0, 4);
                break;
            }
        }
    }

    if (cityCodeFirstFour) {
        // 根据市区编码前 4 位和地区名称匹配地区编码
        for (const code in areaList.county_list) {
            if (code.startsWith(cityCodeFirstFour) && areaList.county_list[code] === county) {
                fullAreaCode = code;
                break;
            }
        }
    }

    return fullAreaCode;
}

const result = getFullAreaCode(areaList, province, city, county);
console.log('完整地区编码:', result);