vue项目中的element-ui地区级联选择器

在项目开发过程中遇到了需要用到element-ui的el-cascader地区级联选择的问题，做个笔记记录下。

1.资源文件引入

<script
      type="text/javascript"
      src="/static/test/lib/js/vue/vue-resource.js"
    ></script>

2.新建选择器

<el-cascader
      placeholder="请点击选择地址"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
       clearable
></el-cascader>

3.参数定义

data() {
    return {
      options: [],
      selectedOptions: [],
      cityArr: [], //城市列表
      areaArr: [], //区县列表
      province: "", //省
      city: "", //市
      area: "", // 区县,
      provinceCityArea: "", //选择器选择的省市区
    };
  },

4.地区初始化（注：districts.json文件为全国区划编码的JSON对象）

initDistPicker() {
      console.log("initDistrictsPicker");
      let self = this;
      this.$http.get("/static/js/districts.json").then(function(respones) {
        console.log("respones==>", respones);
        let distData = respones.data;
        let options = [];
        // 省
        for (var provinceKy in distData["100000"]) {
          let optProvinceItem = {
            value: provinceKy,
            label: distData["100000"][provinceKy]
          };
          if (distData[provinceKy]) {
            // 市
            for (var cityKy in distData[provinceKy]) {
              optProvinceItem.children = optProvinceItem.children
                ? optProvinceItem.children
                : [];
              let optCityItem = {
                value: cityKy,
                label: distData[provinceKy][cityKy]
              };
              if (distData[cityKy]) {
                // 区
                for (var areaKy in distData[cityKy]) {
                  optCityItem.children = optCityItem.children
                    ? optCityItem.children
                    : [];
                  let optAreaItem = {
                    value: areaKy,
                    label: distData[cityKy][areaKy]
                  };
                  optCityItem.children.push(optAreaItem);
                }
              }
              optProvinceItem.children.push(optCityItem);
            }
          }
          options.push(optProvinceItem);
        }
        self.distData = distData;
        self.options = options;
      });
    }

5.选择器地区选择触发方法

//选择地区
    handleChange(value) {
      let self = this;
      console.log("value=>", value);
      //获取省名
      self.options.map((item, index) => {
        if (item.value == value[0]) {
          self.cityArr = item.children; //存储城市列表
          self.province = item.label;
        }
      });
      //获取市名
      self.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          self.areaArr = item.children; //存储区县列表
          self.city = item.label;
        }
      });
      //获取区县名
      self.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          self.area = item.label;
        }
      });
      self.provinceCityArea = self.province + self.city + self.area;
      console.log("self.provinceCityArea", self.provinceCityArea);
    },

6.districts.json文件下载链接

链接：https://pan.baidu.com/s/1GV1Nf8aYLNQYLcYTe-u55w
密码：gdjj