RuoYiUI-实现地区四级联动

1.获取中国省市区镇级联数据中国省市区数据

由于要实现地区四级，根据情况选择是否需要地区编码，我这里直接选择代编码的四级联动数据pcas-code.json，下载后直接放入项目中

2.在页面中引用，使用Cascader级联选择器绑定数据

//由于我这边直接获取地区名，所以value：'name'，需要编码可以使用code
<el-cascader :options="options" style="width: 100%;" :props="{ value: 'name', label: 'name' }" v-model="cityArr" @change="handleChange"></el-cascader>

//地区文件
import pcas from '@/assets/pcas-code.json'

export default {
  name: 'Dept',
  data() {
    return {
      //省市区县镇四级
      options: pcas,
      citys:'',
      cityArr: []
	}
	methods: {
		// 获取省市区地址级联
	    handleChange(areaNameArr) {
	      this.citys = "";
	      if(!!areaNameArr){
	        AreaNameArr.forEach((areaName, index)=> {
	          if(index == 0){
	            this.citys = areaName;
	          }else {
	            this.citys = this.citys + "/" + areaName;
	          }
	        })
	      }
	      console.log(this.citys);
	    }
    }
}

有一点需要注意cityArr不能改变，否则输入框中的显示将会有问题

v-model=“cityArr”
这里的数据是4个数组：[“北京市”][“市辖区”][“东城区”][“东华门街道”]

需要修改可以从areaNameArr获取，经过handleChange方法处理，最终打印的this.citys将会是

北京市 / 市辖区 / 东城区 / 东华门街道

3. 各位下班，下次见