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

2023年6月22日08:07:23

实现思路:

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

  • 作者:轻轻亲亲清清子
  • 原文链接:https://blog.csdn.net/weixin_61298823/article/details/123420480
    更新时间:2023年6月22日08:07:23 ,共 1461 字。