省市区的级联搜索功能通过watch监听器去解决,监听省的数据,当省的数据发生改变以后,如果newValue里面有数据则调用市的方法,并清空市和县的输入框,如果没有的话则清空市以及县的搜索框和列表,剩下的同理
表单部分
<div class="from" > <el-form size="mini" :inline="true" :model="searchFrom" class="demo-form-inline"> <el-form-item> <el-select clearable v-model="searchFrom.province" placeholder="请输入省份" > <el-option v-for="(item, index) in provinceData" :key="index" :label="item.name" :value="item.code" ></el-option> </el-select> </el-form-item> <el-form-item> <el-select clearable v-model="searchFrom.city" placeholder="请输入城市" > <el-option v-for="(item, index) in cityData" :key="index" :label="item.name" :value="item.code" ></el-option> </el-select> </el-form-item> <el-form-item> <el-select clearable v-model="searchFrom.county" placeholder="请输入县\区" > <el-option v-for="(item, index) in countyData" :key="index" :label="item.name" :value="item.code" ></el-option> </el-select> </el-form-item> <el-from>
我们要先请求省,市,县的数据 并把他们分别赋值到provinceData: [] cityData: [], countyData: []
data部分 searchFrom: { province: "",//省 city: "",//市 county: "",//区/县 }, provinceData: [],//省的数据 cityData: [],//市的数据 countyData: []//区/县的数据 watch: { "searchFrom.province"(newValue) {//监听省的数据· if (newValue) { this.getCity(newValue) this.searchFrom.city = "" this.searchFrom.county = "" } else { this.searchFrom.city = ""//把市输入框的数据清空 this.searchFrom.county = ""//把县的输入框的数据清空 this.cityData = ""//清空市的列表 this.countyData = ""//清空县的列表 } }, "searchFrom.city"(newValue) { if (newValue) { this.getCounty(newValue) this.searchFrom.county = "" } else { this.searchFrom.county = "" this.cityData = "" this.countyData = "" } } },