你要的三级级联我都有

r囧r小猫 2023-10-04 14:11 50阅读 0赞

#### 文章目录 ####

*   *   *   *  前言
             *  Ant Design Vue 实现
             *  Element-ui 实现

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

##### 前言 #####

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

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

##### Ant Design Vue 实现 #####

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

废话不多说先看效果  
![在这里插入图片描述][20210522123253934.gif]

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

<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 相同  
![在这里插入图片描述][20210522135101194.png]  
贴上代码

<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>

有疑惑的可以留言讨论

[20210522123253934.gif]: https://img-blog.csdnimg.cn/20210522123253934.gif
[20210522135101194.png]: https://img-blog.csdnimg.cn/20210522135101194.png