省市区地址选择器（vue）

选择器

<el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
                <el-form-item label-width="50px" label="省份" prop="valueProvince">
                    <el-select v-model="form.valueProvince" placeholder="请选择省"
                        @change="changeProvince">
                        <el-option v-for="item in provinceList" :key="item.value"
                            :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label-width="50px" label="城市" prop="valueCity">
                        <el-select v-model="form.valueCity" placeholder="请选择市"
                            @change="changeCity">
                            <el-option v-for="item in cityOptions" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label-width="50px" label="区县" prop="valueOrigin">
                        <el-select v-model="form.valueOrigin" placeholder="请选择区"
                            @change="changeOrigin">
                            <el-option v-for="item in originOptions" :key="item.label"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-col>
        </el-row>

js

data() {
    return {

      provinceList: [], // 省列表
      cityList: [], // 市列表
      originList: [], // 区列表
      cityOptions: [], // 市下拉框数据
      originOptions: [], // 区下拉框数据,
    }
},
methods: {

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCustomer(id).then(response => {
        this.form = response.data;
    /** 后台地址数据格式为 省/市/区 需分割回显，部分县级市只有两级 */
        var ads = this.form.address.split("/")
        this.form.valueProvince = ads[0];
        this.form.valueCity = ads[1];
        if(ads.length>2){
          this.form.valueOrigin = ads[2]
        }
        this.open = true;
        this.title = "修改客户";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            /** 传入后台地址数据拼接*/
            this.form.address =
                        this.form.province +
                        "/" +
                        this.form.city +
                        "/" +
                        this.form.origin;
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    _getJsonData() {
            const res = require("../../../../public/json/provinces.json");
            this.provinceList = [];
            this.cityList = [];
            this.originList = [];
            res.forEach((item) => {
                if (item.value.match(/0000$/)) {
                    this.provinceList.push({
                        value: item.value,
                        label: item.name,
                        children: [],
                    });
                } else if (item.value.match(/00$/)) {
                    this.cityList.push({
                        value: item.value,
                        label: item.name,
                        children: [],
                    });
                } else {
                    this.originList.push({
                        value: item.value,
                        label: item.name,
                    });
                }
            });
            for (let index in this.provinceList) {
                for (let index1 in this.cityList) {
                    if (
                        this.provinceList[index].value.slice(0, 2) ===
                        this.cityList[index1].value.slice(0, 2)
                    ) {
                        this.provinceList[index].children.push(this.cityList[index1]);
                    }
                }
            }
            for (let item1 in this.cityList) {
                for (let item2 in this.originList) {
                    if (
                        this.originList[item2].value.slice(0, 4) ===
                        this.cityList[item1].value.slice(0, 4)
                    ) {
                        this.cityList[item1].children.push(this.originList[item2]);
                    }
                }
            }
        },

      // 选择省
      changeProvince(val) {
            this.provinceList.forEach((province, index) => {
                if (val.toString() === this.provinceList[index].value) {
                    this.cityOptions = this.provinceList[index].children;
                    this.form.valueCity =
                        this.provinceList[index].children[0].value; //设置市的值
                    this.form.city = this.provinceList[index].children[0].label;

                    this.form.valueOrigin =
                        this.provinceList[index].children[0].children[0].value; //设置县的值
                    this.form.origin =
                        this.provinceList[index].children[0].children[0].label;

                    this.originOptions = this.provinceList[index].children[0].children;
                    //set value
                    this.form.province = this.provinceList[index].label;
                }
            });
        },
        // 选择市
        changeCity(val) {
            this.cityList.forEach((city, index) => {
                if (val.toString() === this.cityList[index].value) {
                    this.originOptions = this.cityList[index].children;
                    if(this.originOptions.length>0){
                        this.form.valueOrigin = this.cityList[index].children[0].value; //设置县的值;
                    //set value
                        this.form.city = this.cityList[index].label;
                    }else{
                        this.form.valueOrigin =null;
                        this.form.city = null;
                    }
                }
            });
        },
        // 选择区
        changeOrigin(val) {
            this.form.valueOrigin = val;

            this.originList.forEach((origin, index) => {
                if (val.toString() === this.originList[index].value) {
                    //set value
                    this.form.origin = this.originList[index].label;
                }
            });
            //添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
            this.$forceUpdate();
        },
}