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

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

使用Vue进行开发。首先我们需要使用到两个select选择器，下面都使用elementui组件进行展示。使用到的是一个表单，所以进行绑定时使用OrderSreach.属性值进行 绑定

之后将所需要展示的地市进行定义到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>exportdefault{
    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(){returnthis.OrderSreach.provinceId}},