首页 > 建站教程 > 前端框架 >  elementUI cascader实现地区级联选择器正文

elementUI cascader实现地区级联选择器

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

element UI

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

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