本文共 642 字，大约阅读时间需要 2 分钟。

省市联动效果简单描述：在选择省之后，我们可以选择其省对应的市，当没有选择省的时候，市级下拉为无数据。并且在这里将省市对应的id作为本质要存储到数据库当中的数据。

使用Vue进行开发。首先我们需要使用到两个select选择器，下面都使用elementui组件进行展示。使用到的是一个表单，所以进行绑定时使用OrderSreach.属性值进行 绑定 之后将所需要展示的地市进行定义到data当中，定义一个方法用于获取这个省的选择之后的id，根据这个id对城市数组进行过滤，之后再使用watch对省的这个值进行侦听，改变之后就调用这个方法计算得出城市数组进行渲染。简易代码如下：

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

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

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

转载地址：http://mkqzi.baihongyu.com/