elementUI cascader实现地区级联选择器

我爱模板网要实现地区的级联选择器，而项目用的是element ui，刚好elementUI有个el-cascader，正好是级联选择器：


那么，只要将地区整合进去就可以了。废话不多多说，直接开搞：

1、首先是el-cascader

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

2、参数定义

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

3、地区初始化，districts.json文件就是全国区域编码

initDistPicker() {
    let self = this;
    this.$http.get("/static/js/districts.json").then(function(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;
    });
}

4、handleChange方法

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);
},

至此，就搞定了，点击下载 districts.json 提取码: fcy8


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！