实现思路:
省市区的级联搜索功能通过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 = ""
}
}
},