使用 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>
  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
			}
		},