使用 Vue+ElementUi 实现省市联动效果

﹏ヽ暗。殇╰゛Y 2022-11-02 13:25 266阅读 0赞

省市联动效果简单描述：在选择省之后，我们可以选择其省对应的市，当没有选择省的时候，市级下拉为无数据。并且在这里将省市对应的id作为本质要存储到数据库当中的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
使用Vue进行开发。首先我们需要使用到两个select选择器，下面都使用elementui组件进行展示。使用到的是一个表单，所以进行绑定时使用OrderSreach.属性值进行 绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
之后将所需要展示的地市进行定义到data当中，定义一个方法用于获取这个省的选择之后的id，根据这个id对城市数组进行过滤，之后再使用watch对省的这个值进行侦听，改变之后就调用这个方法计算得出城市数组进行渲染。简易代码如下：

<template>
      <div>
        
        <el-select v-model="selectedProv">
          <el-option v-for="item in listProv" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
    
        
        <el-select v-model="selectedCity">
          <el-option v-for="item in listCity" :value="item.id" :key="item.id" :label="item.name"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default { 
        data: function() { 
          return { 
            selectedProv: null,
            selectedCity: null,
            listProv: [],
            listCity: [],
            //可以发现，这里pid对应的就是省的id值，而id指向这个id对应的城市值
            cityAll: [{ 
                "pid": "1",
                "id": "1",
                "name": "广州"
              },
              { 
                "pid": "1",
                "id": "2",
                "name": "湛江"
              },
              { 
                "pid": "2",
                "id": "3",
                "name": "长沙"
              },
              { 
                "pid": "2",
                "id": "4",
                "name": "湘潭"
              }, { 
                "pid": "3",
                "id": "5",
                "name": "南宁"
              },
              { 
                "pid": "3",
                "id": "6",
                "name": "梧州"
              }
            ],
          }
        },
        created: function() { 
          this.getProvList();
        },
        watch: { 
          selectedProv: 'getCityList'
        },
        methods: { 
          //获取省份列表
          getProvList: function() { 
            this.listProv = [{ 
              "id": "1",
              "name": "广东"
            }, { 
              "id": "2",
              "name": "湖南"
            }, { 
              "id": "3",
              "name": "广西"
            }]
          },
          // 获取当前选择省份下的城市列表
          getCityList: function() { 
            let vm = this;
            this.listCity = this.cityAll.filter(function(city) { 
              return city.pid == vm.selectedProv
            })
          }
        }
      }
    </script>

当然了，如果这个选择框使用的是一个对象包裹的属性值，如最上方的图所示，这样我们就需要对这个对象的属性进行侦听，如何实现呢？

在这里我们使用一个computed获取到这个对象的属性值给到Prov，之后对Prov进行侦听即可实现。

//对省份的选择切换进行侦听
    		watch: { 
    			Prov: 'getCityList'
    		},
    		//获取属性，用于侦听
    		computed: { 
    			Prov() { 
    				return this.OrderSreach.provinceId
    			}
    		},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221024/543f5dabd1ea43b7b3e507dd92547668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221024/7e90bab630c3480492d165ed10d985dc.png