china-area-data 地区组件，基于vant picker

前言

其实很早就遇到这个问题了，今天才算真正的解决吧。之前公司pc 端后台的地区组件用的是这个，它是基于element的

vue-area-linkage

但是有时候手机端也需要新增编辑地区信息，那个时候是直接用的 vant 的 Area 组件。但是这两个的地区数据源是不一样的。想了很多种情况，还是选择重新写一个 地区组件

数据源

今天找了好久才发现 vue-area-linkage 的数据源用的是 china-area-data，所有今天直接拿这个来改造成vant 的格式。

环境 包

   "vant": "^2.2.8",
   "china-area-data": "^4.0.0",

主要是以上两个

代码

<template>
  <div>
    <van-picker :columns="columns" @change="onChange" @confirm="confirm" show-toolbar />
  </div>
</template>
<script>
import REGION_DATA from "china-area-data";

export default {
  components: {},
  props: {
    addr: {
      type: Object,
      default: () => {
       return {
        province: "北京市",
        city: "市辖区",
        area: "东城区"
        };
      }
    }
  },
  data() {
    return {
      columns: [],
      data_province: {},
      data_current_city: {},
      address: this.addr
    };
  },
  methods: {
  //picker change事件
    onChange(picker, values) {
      if (this.address.province !== values[0]) {
        //判断当前选择省是否发生变化
        this.address.province = values[0]; //默认第一个
        let city_list = this.getColums(1);
        this.address.city = city_list[0]; //默认第一个
        picker.setColumnValues(1, city_list);

        let area_list = this.getColums(2);
        this.address.area = area_list[0]; //默认第一个
        picker.setColumnValues(2, area_list);
        return;
      }

      if (this.address.city !== values[0]) {
        //判断当前选择城市是否发生变化
        this.address.city = values[1]; //默认第一个
        let area_list = this.getColums(2);
        this.address.area = area_list[0]; //默认第一个
        picker.setColumnValues(2, area_list);
      }
    },
    //将object 转换成 array 格式（"110101":"东城区","110102":"西城区"）--->  ['东城区','西城区']
    ArrayChangeByObject(obj) {
      if (Object.prototype.toString.call(obj) != "[object Object]") return [];
      let arr = new Array();
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          arr.push(obj[key]);
        }
      }
      return arr;
    },
    //通过 地区获取编码   格式（"110101":"东城区","110102":"西城区"）
    //根据值找出列名 code
    FindCodeByValue(obj, str) {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] === str) return key;
        }
      }
    },
    getColums(type) {
      switch (type) {
        case 1: //省发生变化 返回当前省的城市
          var province = this.data_province; //这是一个obj对象 所有省份
          var province_list = this.ArrayChangeByObject(province); //这是一个数组对象
          let province_code = this.FindCodeByValue(
            province,
            this.address.province
          ); //当前省的编码
          this.data_current_city = REGION_DATA[province_code];
          var city_list = this.ArrayChangeByObject(this.data_current_city);
          return city_list; //城市数组
        case 2: //当前城市变化 返回当前城市的区县
          let city_code = this.FindCodeByValue(
            this.data_current_city,
            this.address.city
          ); //当前城市的编码
          var area_list = this.ArrayChangeByObject(REGION_DATA[city_code]);
          return area_list; //地区数组
        default:
          break;
      }
    },
    initColums() {
      var province_list = this.ArrayChangeByObject(this.data_province);

      let default_province_index = province_list.findIndex(el => {
        return el === this.address.province;
      });
      var city_list = this.getColums(1);
      let default_city_index = city_list.findIndex(el => {
        return el === this.address.city;
      });

      var area_list = this.getColums(2);
      let default_area_index = area_list.findIndex(el => {
        return el === this.address.area;
      });
      var columns = new Array();
      columns.push(
        ...[
          { values: province_list, defaultIndex: default_province_index }, //省
          { values: city_list, defaultIndex: default_city_index },
          { values: area_list, defaultIndex: default_area_index }
        ]
      );
      this.columns = columns;
    },
    confirm() {
      this.$emit("confirm", this.address);
    }
  },
  created() {
    this.data_province = REGION_DATA["86"];
    this.initColums();
  },
};
</script>

结束语

最后就是成了如下这种。

其实主要是重新改造数据源，大概就是这样了，有什么写的不好的，请各位大佬多多 评论，建议。