你要的三级级联我都有

由于业务变动之前做的搜索框变为三级级联，特此记录三级级联

前言

本文讲述下拉框的三级级联，有 Ant Design Vue 和 Element-ui 两种实现方式，有树形结构数据和分树形结构两种

Cascader 级联这块就不说了，你可以直接区组件库复制粘贴即可

Ant Design Vue 实现

使用的 Ant Design Vue 组件做的三级级联

废话不多说先看效果

贴上代码，代码比较简单，注释很详细，就不详解了

<template>
    <div>
      省：
      <a-select v-model="province" style="width: 200px" @change="handleProvinceChange">
        <a-select-option v-for="province in provinceData" :key="province">
          {{ province }}
        </a-select-option>
      </a-select>
      市：
      <a-select v-model="city" style="width: 200px" @change="handleProvinceChange1">
        <a-select-option v-for="city in cityList" :key="city">
          {{ city }}
        </a-select-option>
      </a-select>
      区县：
      <a-select v-model="county" show-search :filter-option="filterOption" style="width: 200px">
        <a-select-option v-for="county in countyList" :key="county">
          {{ county }}
        </a-select-option>
      </a-select>
      <a-button type="primary" @click="search">搜索</a-button>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 所有省数据
        provinceData: [],
        // 所有省市对应数据
        cityData: {},
        // 所有市县对应数据
        countyData: {},

        // 如果页面刷新，需要有默认值可以设置
        // 搜索框显示的省数据
        province: '',
        // 搜索框显示的市数据
        city: '',
        // 搜索框显示的县数据
        county: '',

        // 选中某个省对应的市数据
        cityList: [],
        // 选中某个市对应的县数据
        countyList: [],
      }
    },
    mounted() {
      // 相当于从后端获取的数据
      this.provinceData = ['浙江省', '江苏省'];
      this.cityData={
        '浙江省': ['杭州', '宁波', '温州'],
        '江苏省': ['南京', '苏州', '镇江'],
      };
      this.countyData= {
        '杭州': ["西湖区", "下城区", "拱墅区"],
        '宁波': ["海曙区", "江东区", "江北区"],
        '温州': ["鹿城区", "龙湾区", "瓯海区"],
        '南京': ["玄武区", "建邺区", "秦淮区"],
        '苏州': ["姑苏区", "虎丘区", "吴中区"],
        '镇江': ["丹徒区", "京口区", "润州区"]
      };
    },
    methods: {
      handleProvinceChange(value) {
        // 当省重新选择，将市、县输入框清空
        this.city = '';
        this.county = '';
        this.countyList = [];
        //  当你选择省，需要给市赋默认值时使用，当然如果市赋了默认值，你也可以给县赋值
        // this.city = this.cityData[value][0];
        this.cityList = this.cityData[value];
      },
      handleProvinceChange1(value) {
        // 当你重新选择市时，将县输入框清空
        this.county = '';
        //  当你选择市时，需要给县赋默认值使用
        // this.county = this.countyData[value][0]; 默认值
        this.countyList = this.countyData[value];
      },
      // 考虑到真实场景，有的下拉框值太多，可以添加搜索功能
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      // 点击查询调用后台接口，如果需要点击省市区就去调接口，可以在handleProvinceChange、handleProvinceChange1 方法中调接口
      search(){
        console.log('省：'+this.province,'市：'+this.city,'区：'+this.county);
      }
    }
  }
</script>

Element-ui 实现

使用的 Element-ui 组件做的三级级联

区别：

两个组件本身没有区别，只是我用 Element-ui 实现的时候简化了数据结构，当然 Ant Design Vue 也可以，需要根据后台接口判断使用那种数据结构（前后端武力值高低决定数据格式）

后台接口实现树结构比较简单，格式化成 Ant Design Vue 绑定的那种数据结构前后端格式化数据相对麻烦，建议使用 Element-ui 这种数据结构绑定数据

效果和 Ant Design Vue 相同

贴上代码

<template>
  <div>
    省：
    <el-select v-model="province" placeholder="请选择"  @change="handleProvinceChange">
      <el-option
        v-for="province in Object.keys(treeData)" :key="province" :value="province">
      </el-option>
    </el-select>
    市：
    <el-select v-model="city" placeholder="请选择" @change="handleProvinceChange1">
      <el-option
        v-for="city in cityData" :key="city" :value="city">
      </el-option>
    </el-select>
    区县：
    <el-select v-model="county" placeholder="请选择" show-search :filter-option="filterOption">
      <el-option
        v-for="county in countyData" :key="county" :value="county">
      </el-option>
    </el-select>
    <el-button type="primary">搜索</el-button>
 </div>
</template>

<script>
  export default {
    data() {
      return {
        treeData:{},

        // 当前下拉框市数据
        cityData: [],
        // 当前下拉框区县数据
        countyData: [],

        province: '',
        city: '',
        county: ''
      }
    },
    mounted() {
      // 相当于从后端获取的数据
      this.treeData = {
        '浙江省': {
          '杭州': ["西湖区", "下城区", "拱墅区"],
          '宁波': ["海曙区", "江东区", "江北区"],
          '温州': ["鹿城区", "龙湾区", "瓯海区"]
        },
        '江苏省': {
          '南京': ["玄武区", "建邺区", "秦淮区"],
          '苏州': ["姑苏区", "虎丘区", "吴中区"],
          '镇江': ["丹徒区", "京口区", "润州区"]
        }
      }
    },
    methods: {
      // 选择省时，清空市县输入框数据，并清空县数组
      handleProvinceChange(value){
        this.county = '';
        this.city = '';
        this.countyData = [];
        this.cityData = Object.keys(this.treeData[value]);
      },
      // 选择市时，清空区县输入框数据，并根据选择的区县查询区县数组
      handleProvinceChange1(value){
        this.county = '';
        this.countyData = this.treeData[this.province][value];
      },
      // 考虑到真实场景，有的下拉框值太多，可以添加搜索功能
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      search(){
        console.log('省：'+this.province,'市：'+this.city,'区：'+this.county);
      }
    }
  }
</script>

有疑惑的可以留言讨论