省市区五级联动

vue代码

<!--

-->
<template>
  <div>
    <div class="block">
      <el-cascader width="200"
                   v-model="options"
        :show-all-levels="true"
        ref="sysCascader"
        :size="size"
        :placeholder="placeholder"
        :props="props"
        @change="handleChange"
        clearable>
      </el-cascader>
    </div>

    <!--  鼠标悬浮触发  -->
    <!--    <div class="block">
          <span class="demonstration">hover 触发子菜单</span>
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="selectedOptions2"
            @change="handleChange">
          </el-cascader>
        </div>-->
  </div>
</template>

<script>
import {findChildData} from "@/api/system/region";
export default {
  name: "addressCommonComponentsUtils",
  props: {
    //组件大小
    size: {
      type: String,
      default: "medium"
    },
    //组件的提示信息
    placeholder: {
      type: String,
      default: "请选择地区"
    },
    //回显只要根据层级关系[1,2,3,4,5]绑定即可
    optionsList:{
      type:Array,
      default:[]
    }
  },
  data() {
   // let self = this;
    return {
      /*省市区的集合*/
      options: [],
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad: this.getLazyLoad,
      },
      // 地址查询参数,初始
        id: 0,
      //省市区的值
      addressInfo: {
        //编码
        //省
        sonProvinceValue: null,
        //市
        sonCityValue: null,
        //区
        sonAreaValue: null,
        //街道
        sonStreetValue: null,
        //乡村
        sonCountryValue: null,
        //名字
        //省
        sonProvinceName: null,
        //市
        sonCityName: null,
        //区
        sonAreaName: null,
        //街道
        sonStreetName: null,
        //乡村
        sonCountryName: null,
      },
    };

  },
  created() {

  },
  mounted() {
    const filtered = this.optionsList.filter((item) => {
      return item !== null && typeof item !== "undefined" && item !== "";
    });

    this.options=filtered

  },
  methods: {
    //懒加载省份信息到组件中
    getLazyLoad(node, resolve) {
      setTimeout(() => {
        if (node.level == 0) {
          findChildData(this.id).then(res => {
            const cities = res.data.map((value, i) => ({
              value: value.id,
              label: value.name,
              leaf: node.level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(cities);
          })
            .catch(err => {
              console.log(err);
            });
        }
        if (node.level != 0 && node.level < 5) {
          this.id = node.value;
          findChildData(this.id).then(res => {
            const areas = res.data.map((value, i) => ({
              value: value.id,
              label: value.name,
              leaf: node.level >= 4
            }));
            //设置省市区街村的值
            this.setNameAndValue(node);

            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(areas);
          })
            .catch(err => {
              console.log(err);
            });
        } else if (node.level == 5) {
          //最后一个节点,不去查询了，直接赋值
          const areas = {
            value: node.value,
            label: node.label,
            leaf: node.level
          };
          //将值和名称赋值到变量里面
          this.addressInfo.sonCountryValue = node.value;
          this.addressInfo.sonCountryName = node.label;
          resolve(areas);
        }
      }, 10);
    },
    //通过当前选择的地区，设置到对应的变量中
    setNameAndValue(node) {
      if(node==null){
        this.addressInfo.sonProvinceValue = null;
        this.addressInfo.sonProvinceName = null;
        this.addressInfo.sonCityValue = null;
        this.addressInfo.sonCityName = null;
        this.addressInfo.sonAreaValue = null;
        this.addressInfo.sonAreaName = null;
        this.addressInfo.sonStreetValue = null;
        this.addressInfo.sonStreetName = null;
        this.addressInfo.sonCountryValue = null;
        this.addressInfo.sonCountryName = null;
        return
      }
      switch (node.level) {
        case 1:
          this.addressInfo.sonProvinceValue = node.value;
          this.addressInfo.sonProvinceName = node.label;
          this.addressInfo.sonCityValue = null;
          this.addressInfo.sonCityName = null;
          this.addressInfo.sonAreaValue = null;
          this.addressInfo.sonAreaName = null;
          this.addressInfo.sonStreetValue = null;
          this.addressInfo.sonStreetName = null;
          this.addressInfo.sonCountryValue = null;
          this.addressInfo.sonCountryName = null;
          break;
        case 2:
          this.addressInfo.sonCityValue = node.value;
          this.addressInfo.sonCityName = node.label;
          this.addressInfo.sonAreaValue = null;
          this.addressInfo.sonAreaName = null;
          this.addressInfo.sonStreetValue = null;
          this.addressInfo.sonStreetName = null;
          this.addressInfo.sonCountryValue = null;
          this.addressInfo.sonCountryName = null;
          break;
        case 3:
          this.addressInfo.sonAreaValue = node.value;
          this.addressInfo.sonAreaName = node.label;
          this.addressInfo.sonStreetValue = null;
          this.addressInfo.sonStreetName = null;
          this.addressInfo.sonCountryValue = null;
          this.addressInfo.sonCountryName = null;
          break;
        case 4:
          this.addressInfo.sonStreetValue = node.value;
          this.addressInfo.sonStreetName = node.label;
          this.addressInfo.sonCountryValue = null;
          this.addressInfo.sonCountryName = null;
          break;
        case 5:
          this.addressInfo.sonCountryValue = node.value;
          this.addressInfo.sonCountryName = node.label;
          break;
      }
    },
    /*改变事件*/
    handleChange(event) {
     // this.$emit('getChangeOptionlist', this.addressInfo)
      let node = this.$refs.sysCascader.getCheckedNodes()[0];
      //解决不点字  只点击单选按钮的问题
      this.setNameAndValue(node);
      //将该组件中的值传递给父组件
      //getCheckedAddressInfo: 是父组件指定的传数据绑定的函数，
      this.$emit('getCheckedAddressInfo', this.addressInfo)

    },
  }
}
</script>

<style scoped>

</style>

父组件使用

 java代码

有需要数据库找我