在項(xiàng)目開發(fā)過程中遇到了需要用到element-ui的el-cascader地區(qū)級(jí)聯(lián)選擇的問題，做個(gè)筆記記錄下。

1.資源文件引入

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

2.新建選擇器

<el-cascader
      placeholder="請(qǐng)點(diǎn)擊選擇地址"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
       clearable
></el-cascader>

3.參數(shù)定義

data() {
    return {
      options: [],
      selectedOptions: [],
      cityArr: [], //城市列表
      areaArr: [], //區(qū)縣列表
      province: "", //省
      city: "", //市
      area: "", // 區(qū)縣,
      provinceCityArea: "", //選擇器選擇的省市區(qū)
    };
  },

4.地區(qū)初始化（注：districts.json文件為全國區(qū)劃編碼的JSON對(duì)象，獲取鏈接在文末）

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]) {
                // 區(qū)
                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.選擇器地區(qū)選擇觸發(fā)方法

//選擇地區(qū)
    handleChange(value) {
      let self = this;
      console.log("value=>", value);
      //獲取省名
      self.options.map((item, index) => {
        if (item.value == value[0]) {
          self.cityArr = item.children; //存儲(chǔ)城市列表
          self.province = item.label;
        }
      });
      //獲取市名
      self.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          self.areaArr = item.children; //存儲(chǔ)區(qū)縣列表
          self.city = item.label;
        }
      });
      //獲取區(qū)縣名
      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://www.aliyundrive.com/s/YZHNnFAqsmb