rcmdp/src/views/mapChlid/choose.vue

<template>
	<el-form :inline="true" class="demo-form-inline">
		<div class="choose">
			<div class="province">
				<el-form-item label="省">
						<el-select  placeholder="请选择省" v-model="choose.province" >
							<el-option :label="p" v-for="p in province" :value="p"></el-option>
						</el-select>
				</el-form-item>
			 </div>
			<div class="city">
				<el-form-item label="市">
					<el-select  placeholder="请选择市" v-model="choose.city" >
						<el-option :label="p" v-for="p in city" :value="p"></el-option>
					</el-select>
				</el-form-item>
			</div>
			<div class="area">
			    <el-form-item label="区">
					<el-select  placeholder="请选择区" v-model="choose.area" >
						<el-option :label="p" v-for="p in area" :value="p"></el-option>
					</el-select>
			    </el-form-item>
			 </div>
			<div class="post">
			    <el-form-item label="职位">
					<el-select  placeholder="请选择职位类型" v-model="choose.post" >
						<el-option :label="p" v-for="p in post" :value="p"></el-option>
					</el-select>
			    </el-form-item>
			 </div>
			<div class="education">
			    <el-form-item label="学历">
					<el-select  placeholder="请选择学历要求" v-model="choose.education" >
						<el-option :label="p" v-for="p in education" :value="p"></el-option>
					</el-select>
			    </el-form-item>
			 </div>
			<div class="work_year">
			    <el-form-item label="经验">
					<el-select  placeholder="请选择工作年限" v-model="choose.work_year" >
						<el-option :label="p" v-for="p in work_year" :value="p"></el-option>
					</el-select>
			    </el-form-item>
			 </div>
			<div class="name">
			    <el-form-item label="姓名">
					<el-input v-model="choose.name" placeholder="请输入姓名"></el-input>
	 		    </el-form-item>
			</div>
			<div class="choose-button">
				<el-form-item>
					<el-button type="primary" @click="onSearch">
						<i class="el-icon-search"></i>搜索
					</el-button>
				</el-form-item>
			</div>
		</div>
	</el-form>
</template>

<script>
	import assets from '../../assets/json/address.json'
	var provinces = assets.provinces.province// 省市区数据
	export default {
		data() {
			return {
				province :["---请-选-择---"],// 省分类
				city :[],// 市
				area :[],// 区
				post :["前端","销售"],// 职位
				education :['高中','初中','小学','本科','大专'],// 学历
				work_year :["1","2"],// 工作年限
				name :["1","2"],// 姓名
				choose: {
					province :'',// 省
					city :'',// 市
					area :'',// 区
					post :'',// 职位
					education :'',// 学历
					work_year :'',// 工作年限
					name :'',// 姓名
				}
			}
		},
		methods :{
			// 搜索
			onSearch() {
				const province = this.choose.province
				this.choose.province = province == '---请-选-择---' ? '' : province
				this.$emit("search",this.choose)
			},
			// 省选择
			provincesC() {
				for(let i = 0 ;i < provinces.length ;i++) {
					this.province.push(provinces[i].ssqname)
				}
			},
			// 市选择
			cityC() {
				this.city = []
				this.choose.city = ''
				for (let i = 0;i < provinces.length ;i++){
					if( this.choose.province === provinces[i].ssqname) {
						const cities = provinces[i].cities.city
						for ( let a = 0 ;a < cities.length ;a++){
							this.city.push( cities[a].ssqname )
						}
					}
				}
			},
			// 区选择
			areaC() {
				this.area = []
				this.choose.area = ""
				for (let i = 0 ;i < provinces.length ;i++) {
					if( this.choose.province == provinces[i].ssqname ) {
						const cities = provinces[i].cities.city
						for (let a = 0 ; a < cities.length ; a++){
							if( this.choose.city == cities[a].ssqname ) {
								const areas = cities[a].areas.area
								for ( let z = 0 ;z < areas.length ;z++ ) {
									this.area.push(areas[z].ssqname)
								}
							}
						}
					}
				}
			}
		},
		watch: {
			'choose.province'() {
				this.cityC()
			},
			'choose.city'() {
				this.areaC()
			}
		},
		mounted (){
			this.provincesC()
		}
	}
</script>
<style lang="scss" scoped>
	.choose {
		padding: 25px;
		display: flex;
		background-color: white;
		flex-flow:row wrap;
	}
	
	i {
		margin-right: 5px;
	}
</style>
<style>
	.el-form-item__label {
		width: 40px;
		text-align: center;
	}
	
	.el-input {
		width: 185px;
	}
	
	.el-button {
			background-color: #2360F1;
	}
</style>