vue vant2 使用picker自定义area省市区三级联动

我们是需要使用公司自己的接口请求省市区的信息，不使用vant提供的数据包，这个也好办就是用area组件每个更新动作都请求一次并存储下已经请求的数据，到这里是已经完全实现了需求且交互很好

但是问题在这个时候就出现了，返回的数据结构中就存在一些特殊情况，比如有些地方就没有区，有些市的的数据结构和vant要求的数据结构不一样了。区的code都是00结尾的但是新疆的石河子，图木舒克，阿拉尔，五家渠这四个返回在区里但是code又不是00结尾，对应的区也没数据。

这个时候的area就开始不正常了，选择这四个都不生效一直是石河子高亮，后面的都无法选中,去看了下源码发现area是对数据进行了截取的所以后面的这四个其实都是一个code所以无法切换

在想有什么方法可以快速修改，不能改变数据结构只能修改实现方式，看源码发现area其实就是pick封装一层实现的

这里就只需要把之前的area组件修改成picker，将数据结构修改一下就完成了

<van-picker
  show-toolbar
  value-key="name"
  :columns="areaList"
  class="area_picker"
  :loading="areaLoading"
  @confirm="onConfirm"
  @cancel="showArea = false"
  @change="onChangeArea"
/>

data() {
    return {
           areaList: [{ values: [] }, { values: [] }, { values: [] }],
    }
}

methods: {
    async onChangeArea(_, values, index) {
      const { id } = values[index] || {}
      this.areaLoading = true
      // 改变省，需要更新市和区的信息，已经请求过的数据直接使用
      if (index === 0) {
        let cityData = this.cacheArea.get(id)
        if (!cityData) {
          const { data } = await areaAddress({ id })
          cityData = data
        }

        const cityCode = cityData?.[0]?.id
        let countryData = this.cacheArea.get(cityCode)
        if (!countryData) {
          const { data } = await areaAddress({ id: cityCode })
          countryData = data
        }

        this.areaList[1].values = cityData
        this.areaList[1].defaultIndex = 0
        this.areaList[2].values = countryData
        this.areaList[2].defaultIndex = 0
        this.cacheArea.set(id, cityData)
        this.cacheArea.set(cityCode, countryData)
      }

      if (index === 1) {
        let countryData = this.cacheArea.get(id)
        if (!countryData) {
          const { data } = await areaAddress({ id })
          countryData = data
        }
        this.areaList[2].values = countryData
        this.areaList[2].defaultIndex = 0
        this.cacheArea.set(id, countryData)
      }
      this.areaLoading = false
    }
}