使用vue实现四级联动

一、使用vue+elementUI实现四级联动

1、json数据： pcas-code

2、简单粗暴：代码如下

<template>
	<div>
		<p>当前您选择了: {{form.province}}-{{form.city}}-{{form.region}}-{{form.street}}</p>
		<el-form >
		<el-form-item label="行政区划">
			<div>
				<el-select v-model="form.province" placeholder="省级" @change="changePr">
					<el-option v-for="item in provinceList" :key="item.code" :label="item.label" :value="item.name">
					</el-option>
				</el-select>
				<el-select v-model="form.city" placeholder="市级" @change="changeCi">
					<el-option v-for="item in cityList" :key="item.code" :label="item.label" :value="item.name">
					</el-option>
				</el-select>
				<el-select v-model="form.region" placeholder="区级" @change="changeRe">
					<el-option v-for="item in regionList" :key="item.code" :label="item.label" :value="item.name">
					</el-option>
				</el-select>
				<el-select v-model="form.street" placeholder="街道" >
					<el-option v-for="item in streetList" :key="item.code" :label="item.label" :value="item.name">
					</el-option>
				</el-select>
			</div>
		</el-form-item>
	</el-form>
	
	</div>
</template>

<script>
	import pacas from '@/assets/pacas.json'
	export default {
      data () {
		  return {
			  data: pacas,
			  form: { // 创建单位管理form
			          province: '', // 行政区划——省
			          city: '', // 行政区划——市
			          region: '', // 行政区划——区
			          street: '', // 行政区划
			        },
					provinceList: [], // 存放省数据集合
					cityList: [], // 存放市数据集合
				    regionList: [], // 存放区数据集合
					streetList: [], //存放街道数据集合
		  }
	  },
	  created() {
		//获取省
		this.provinceList = this.data
	  },
	  computed: {
		 
	  },
	  methods: {
		  changePr() {
			  for(var key of this.data) {
			  	if(key.name == this.form.province) {
			  		this.cityList = key.children
					this.form.city = key.children[0].name //默认选择第一个显示
				}
			  }
			  this.changeCi()
			  this.changeRe()
		  },
		 changeCi() {
		 			 this.cityList.forEach((item,index) => {
		 				 if(item.name == this.form.city) {
		 					 this.regionList = item.children
		 					 this.form.region = item.children[0].name //默认选择第一个显示
		 				 }
		 			 })
					 this.changeRe()
		 },
		 changeRe() {
			 this.regionList.forEach((item1,index1) => {
				 if(item1.name == this.form.region) {
				 	this.streetList = item1.children
				    this.form.street = item1.children[0].name  //默认选择第一个显示
				    return;
				 }
			 })
		 }
	  }
	}
</script>

<style>
</style>

3、over