V
2
R
A
 
F
R
E
E

如何实现省市区的级联搜索

首页 / 新闻资讯 / 正文

实现思路:

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