使用 Vue+ElementUi 实现省市联动效果-蒲公英云

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