vue省市区三联动下拉选择组件的实现

我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用

我们今天来实现一个 利用vuejs开发的 省市区三联动的组件  CitySelect.vue组件

首先来看一下最终的效果(没有写太多的样式...)

组件所需要的省市区的JSON数据(已经封装为commonjs模块了):      (更好的方案)https://github.com/iceyangcc/provinces-china

这个数据中有这样几个字段:

如何使用?

这里采用了 v-model暴露接口, 所以我们下拉选择的值,你只需要在 v-model绑定的属性中去拿即可

我们使用的字段是  cityInfo用于接收组件的数据, 组件为了返回足够的数据, 它是一个对象

使用代码示例  :  

App.vue

1. <template>
2.  <div id="app">
3.    <h5>vue 省市区三联动 demo</h5>
4.    <city-select v-model="cityInfo"></city-select>
5.    <h6>v-model的值是 <code>{{ cityInfo }}</code></h6>
6.    <h6>从v-model得知,你选择了 <i>{{ cityName }}</i></h6>
7.  </div>
8. </template>
9. <script>
10.  import CitySelect from './components/CitySelect.vue'
11.  export default {
12.    data() {
13.      return {
14.        cityInfo: '',
15.      }
16.    },
17.    components: {
18.      CitySelect
19.    },
20.    computed: {
21.      cityName() {
22.        const names = [];
23.        this.cityInfo.province && names.push(this.cityInfo.province.name + ' ')
24.        this.cityInfo.city     && names.push(this.cityInfo.city.name + ' ')
25.        this.cityInfo.block    && names.push(this.cityInfo.block.name + ' ')
26.        return names.join('')
27.      }
28.    }
29.  }
30. </script>
31. <style lang="stylus">
32.  h6
33.    padding 10px
34.    border 1px dotted
35.  h6 i
36.    color #f00
37.    border 1px dotted #ccc
38. </style>

cityName是我们需要展示的数据,作为一个计算属性而存在,因为这个值是不断变化的,从cityInfo中抽取出来的数据

下面我们来看一下组件的实现代码

CitySelect.vue

1. <template>
2.  <div class="city-select">
3.    <select v-model="selectedProvince" name="province">
4.      <option v-for="(item, index) in provinces"
5.        v-if="item.level === 1"
6.        :value="item">
7.        {{ item.name }}
8.      </option>
9.    </select>
10.    <select v-model="selectedCity" name="city">
11.      <option
12.        v-for="(item, index) in cities"
13.        :value="item">
14.        {{ item.name }}
15.      </option>
16.    </select>
17.    <select v-model="selectedBlock" name="block">
18.      <option
19.        v-for="(item, index) in blocks"
20.        :value="item">
21.        {{ item.name }}
22.      </option>
23.    </select>
24.  </div>
25. </template>
27. <script>
28. /**
29. *  省 市 区/县城  三联动选择器
30. */
31. import provinces from './provinces.js'
32. import Vue from 'vue'
33. export default {
34.  name: 'app',
36.  created() {
37.    // 数据初始化,默认选中北京市,默认选中第一个;北京市数据为总数据的前18个
38.    let beijing = this.provinces.slice(0, 19)
39.    this.cities = beijing.filter(item => {
40.      if (item.level === 2) {
41.        return true
42.      }
43.    })
44.    this.selectedCity = this.cities[0]
45.    this.blocks = beijing.filter(item => {
46.      if (item.level === 3) {
47.        return true
48.      }
49.    })
50.    this.selectedBlock = this.blocks[0]
51.  },
53.  watch: {
54.    selectedProvince(newVal, oldVal) {
55.      // 港澳台数据只有一级,特殊处理
56.      if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
57.        this.cities = [newVal]
58.        this.blocks = [newVal]
59.      } else {
60.        this.cities = this.provinces.filter(item => {
61.          if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
62.            return true
63.          }
64.        })
65.      }
66.      // 此时在渲染DOM,渲染结束之后再选中第一个
67.      Vue.nextTick(() => {
68.        this.selectedCity = this.cities[0]
69.        this.$emit('input', this.info)
70.      })
71.    },
73.    selectedBlock() {
74.      Vue.nextTick(() => {
75.        this.$emit('input', this.info)
76.      })
77.    },
79.    selectedCity(newVal) {
80.      // 选择了一个市,要选择区了 di是城市的代表,sheng
81.      if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
82.        this.blocks = [newVal]
83.        this.cities = [newVal]
84.      } else {
85.        this.blocks = this.provinces.filter(item => {
86.          if (item.level === 3 && item.sheng && item.sheng == newVal.sheng && item.di === newVal.di && item.name !== '市辖区') {
87.            return true
88.          }
89.        })
90.      }
91.      Vue.nextTick(() => {
92.        this.selectedBlock = this.blocks[0]
93.        // 触发与 v-model相关的 input事件
94.        this.$emit('input', this.info)
95.      })
96.    }
97.  },
99.  computed: {
100.    info() {
101.      return {
102.        province: this.selectedProvince,
103.        city: this.selectedCity,
104.        block: this.selectedBlock
105.      }
106.    }
107.  },
109.  data() {
110.      return {
111.        selectedProvince: provinces[0],
112.        selectedCity: 0,
113.        selectedBlock: 0,
114.        cities: 0,
115.        provinces,
116.        blocks: 0
117.      }
118.    }
119. }
120. </script>
122. <style lang="stylus" scoped>
123.  .city-select select
124.    outline 0
125. </style>

组件关键点说明:

HTML模板采用三个 select下拉控件,分别具有v-model由于绑定选择的数据,使用v-for遍历省市区数据

data中的数据,分别是选中的省市区的值(对象形式); 以及当前这个省的城市,这个城市的区,见名知意

在create钩子函数中我们进行了数据的初始化,默认我们显示北京相关的信息,改变v-model对应的属性值

实现三联动的重点:

我们使用watch监测当前省市区的改变(v-model中绑定的数据),一旦省 有变化,就需要拉取这个省相关的数据,并且默认选中第一条数据;  市,区的变化类似

在这里我们采用了 ES5中的filter来进行数据的过滤,我们只要把数据过滤出来了,vue自动帮我们重新渲染,所以我们

只需要把重点放在数据的筛选上就可以了

v-model接口的暴露:

要将数据绑定到v-model所绑定的属性上,需要通过触发 input事件,参见 v-model的实现原理这篇文章

也就是这行代码实现了组件内部数据暴露的效果: v-model所绑定的cityInfo拿到了组件内部的值

这里的 nextTick类似于setTimeout实现的效果,可以在执行完其他任务(例如渲染DOM)之后再执行相应的回调,

我们使用它,可以保证我们的下一步操作是在DOM渲染完毕之后再执行的,保证逻辑的正确性

(2017-12-20更新)省份数据详见  https://github.com/iceyangcc/provinces-china ,喜欢的话请 start一下呢

相关文章:  v-model的实现原理和表单组件设计