elementUI 区域省份城市联动

<list-area-template region="region"
                      province="province"
                      city="city" style="width:30%;"></list-area-template>

---

Vue.component('list-area-template', {
    props: {
        region: {
            type: String,
            required: ""
        },
        province: {
            type: String,
            required: ""
        },
        city: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            regionId: "",
            provinceId: "",
            cityId: "",
            regionOption: [],
            provinceOption: [],
            cityOption: [],
        }
    },
    mounted: function () {
        let that = this;
        this.$nextTick(function () {
            that.regionOption.push({
                id: "",
                name: "区域"
            });
            that.provinceOption.push({
                id: "",
                name: "省份"
            });
            that.cityOption.push({
                id: "",
                name: "城市"
            });
            this.getRegionList("0", "regionOption");
        });
    },
    methods: {

        //一级业态变更的事件
        regionChange(val) {
            let that = this;
            let listIndustryTypeTemp = "";
            debugger
            if (val) {
                let obj = this.regionOption.find((item) => {//遍历list的数据
                    return item.id === val;//筛选出匹配数据
                });
                listIndustryTypeTemp = obj.id;
            }

            if (that.region.indexOf(".") > -1) {
                that.$root._data[that.region.split(".")[0]][that.region.split(".")[1]] = listIndustryTypeTemp;
            } else {
                that.$root._data[that.region] = listIndustryTypeTemp;
            }

            if (that.province.indexOf(".") > -1) {
                that.$root._data[that.province.split(".")[0]][that.province.split(".")[1]] = "";
            } else {
                that.$root._data[that.province] = "";
            }

            this.provinceId = "";
            that.provinceOption = [];
            that.provinceOption.push({
                id: "",
                name: "省份"
            });
            if (val) {
                that.getProvinceList(val, "provinceOption");
            }


            if (that.city.indexOf(".") > -1) {
                that.$root._data[that.city.split(".")[0]][that.city.split(".")[1]] = "";
            } else {
                that.$root._data[that.city] = "";
            }

            this.cityId = "";
            that.cityOption = [];
            that.cityOption.push({
                id: "",
                name: "城市"
            });
        },

        //二级业态变更的事件
        provinceChange(val) {
            let that = this;
            let listIndustryType2Temp = ""
            if (val) {
                let obj = this.provinceOption.find((item) => {//遍历list的数据
                    return item.id === val;//筛选出匹配数据
                });
                listIndustryType2Temp = obj.id;
            } else {
                this.provinceId = "";
            }

            if (that.province.indexOf(".") > -1) {
                that.$root._data[that.province.split(".")[0]][that.province.split(".")[1]] = listIndustryType2Temp;
            } else {
                that.$root._data[that.province] = listIndustryType2Temp;
            }


            if (that.city.indexOf(".") > -1) {
                that.$root._data[that.city.split(".")[0]][that.city.split(".")[1]] = "";
            } else {
                that.$root._data[that.city] = "";
            }

            this.cityId = "";
            that.cityOption = [];
            that.cityOption.push({
                id: "",
                name: "城市"
            });
            if (val) {
                this.getCityList(val, "cityOption");
            }
        },

        cityChange(val) {
            let that = this;
            let listIndustryType3Temp = ""
            if (val) {
                let obj = this.cityOption.find((item) => {//遍历list的数据
                    return item.id === val;//筛选出匹配数据
                });
                listIndustryType3Temp = obj.id;
            } else {
                this.cityId = "";
            }

            if (that.city.indexOf(".") > -1) {
                that.$root._data[that.city.split(".")[0]][that.city.split(".")[1]] = listIndustryType3Temp;
            } else {
                that.$root._data[that.city] = listIndustryType3Temp;
            }
        },

        //查询区域的内容
        getRegionList(pid, datak) {
            let that = this;
            $.ajax({
                type: "GET", //请求类型
                url: "/cityTradingArea/region", //请求的url
                contentType: "application/json;charset=UTF-8",
                headers: {
                    "adminUid": localStorage.getItem('adminUid'),
                    "token": localStorage.getItem('token')
                },
                dataType: "json", //ajax接口（请求url）返回的数据类型
                success: function (res) { //data：返回数据（json对象）
                    that[datak] = res.data;
                },
                error: function (data) { //当访问时候，404，500 等非200的错误状态码
                    alert("加载一级业态失败！");
                }
            });
        },
        //查询区域的内容
        getProvinceList(pid, datak) {
            let that = this;
            $.ajax({
                type: "POST", //请求类型
                url: "/cityTradingArea/province", //请求的url
                contentType: "application/json;charset=UTF-8",
                headers: {
                    "adminUid": localStorage.getItem('adminUid'),
                    "token": localStorage.getItem('token')
                },
                data: JSON.stringify({
                    id: pid
                }), //请求参数
                dataType: "json", //ajax接口（请求url）返回的数据类型
                success: function (res) { //data：返回数据（json对象）
                    that[datak] = that[datak].concat(res.data);
                },
                error: function (data) { //当访问时候，404，500 等非200的错误状态码
                    alert("加载一级业态失败！");
                }
            });
        },
        //查询城市的内容
        getCityList(pid, datak) {
            let that = this;
            $.ajax({
                type: "POST", //请求类型
                url: "/cityTradingArea/city", //请求的url
                contentType: "application/json;charset=UTF-8",
                headers: {
                    "adminUid": localStorage.getItem('adminUid'),
                    "token": localStorage.getItem('token')
                },
                data: JSON.stringify({
                    id: pid
                }), //请求参数
                dataType: "json", //ajax接口（请求url）返回的数据类型
                success: function (res) { //data：返回数据（json对象）
                    that[datak] = that[datak].concat(res.data);
                },
                error: function (data) { //当访问时候，404，500 等非200的错误状态码
                    alert("加载一级业态失败！");
                }
            });
        },
    },
    template: `
      <div style="display:flex">
        <el-select v-model="regionId" placeholder="请选择区域" size="small" @change="regionChange" style="margin-left:8px;">
          <el-option v-for="(o,i) in regionOption" :key="i" :value="o.id" :label="o.name">
          </el-option>
        </el-select>
        <el-select v-model="provinceId" placeholder="请选择省份" size="small" @change="provinceChange" style="margin-left:8px;">
          <el-option v-for="(o,index) in provinceOption" :key="index" :value="o.id" :label="o.name">
          </el-option>
        </el-select>
        <el-select v-model="cityId" placeholder="请选择城市" size="small" @change="cityChange" style="margin-left:8px;">
          <el-option v-for="(o,index) in cityOption" :key="index" :value="o.id" :label="o.name">
          </el-option>
        </el-select>
      </div>   
    `
});