element ui级联选择器，动态获取省市区数据

效果图，可以选择每一层级

1、级联选择器html部分

• @active-item-change监听每一层级的变化。选择安徽省加载数据
• @change监听选中的变化

 <el-cascader
   v-model="query.address"
    clearable
    placeholder="医院地区"
    :options="provinceList"
    :props="props"
    @active-item-change="handleItemChange"
    @change="provinceChange"
  ></el-cascader>

2、data绑定数据部分

data(){
	return{
		//存储加载的数据
		 provinceList:[]
		 props: {
		     value: "value",
		     children: "cities",
		     label: "label",
		     checkStrictly: true,//添加这个可以选择每一层级，不添加这个只能选择最后一级
		     // multiple：true 设置多选
		 },
	}
}，
created(){
  //首先要加载一次省级数据
  this.getPosition(null, () => {});
}
methods:{
	 // 地区联动获取数据
    getPosition(val, cb) {
      let vm = this; //查询省市县
      //我们这查询省级数据要传取参数parent:1
      let params = { parent: 1 };
      //判断初始有没有val，查询省级的时候是没有val的，所以默认传值1,，
      //当你选择市级的时候，val是个数组。它会存储省级和市级的value值，
      //同理选择区级的时候，val数组长度是3，存储的是省市区三级的value值
     
      if (!val) {
        //初始化加载 获取所有省份数据
        params = { parent: 1 };
      } else if (val.length === 1) {
        //加载二级  获取市级数据
        params = { parent: val[0] };
      } else {
        //加载3级   获取县级数据
        //注意：因为我们加载区级数据的时候不需要传省级的value值，只需要传市级的value值，如果你需要省级和市级数据一起传的话，在这里自己加上参数
        params = { parent: val[1] };
      }
      //请求后台数据
      hospitalMonitor
        .queryNation(params)
        .then((res) => {
          if (!val) {
            //初始化加载   查询省份数据
            vm.provinceList = res.content.map((e) => {
              return {
                value: e.saleid,
                label: e.province,
                cities: [],
              };
            });
          } else if (val.length === 1) {
            //加载二级    查询该省下市级数据
            vm.provinceList.map((item) => {
              if (item.value === val[0]) {
                item.cities = res.content.map((e) => {
                  return { value: e.saleid, label: e.city, cities: [] };
                });
              }
            });
          } else {
            //加载3级   查询该省市下县级数据
            vm.provinceList.map((item) => {
              if (item.value === val[0]) {
                item.cities.map((value) => {
                  if (value.value === val[1]) {
                    value.cities = res.content.map((e) => {
                      return { value: e.saleid, label: e.county };
                    });
                  }
                });
              }
            });
          }
          cb && cb(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
     // 一级二级改变的时候调取下一级数据
    handleItemChange(val) {
      this.getPosition(val);
    },
}