vue中怎么实现省市区三联动下拉选择组件
这篇文章给大家分享的是有关vue中怎么实现省市区三联动下拉选择组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司主营广东网站建设的网络公司,主营网站建设方案,成都app开发,广东h5微信小程序开发搭建,广东网站营销推广欢迎广东等地区企业咨询
首先来看一下最终的效果(没有写太多的样式...)
组件所需要的省市区的JSON数据(已经封装为commonjs模块了): provinces.js
这个数据中有这样几个字段:
code: 当前省市区的编码
sheng: 当前所在的省
name: 省市区的名字
level: 级别,省 level = 1, 市 level=2, 区/县城 level = 3
di: 县,市级别的区分
如何使用?
这里采用了 v-model暴露接口, 所以我们下拉选择的值,你只需要在 v-model绑定的属性中去拿即可
我们使用的字段是 cityInfo用于接收组件的数据, 组件为了返回足够的数据, 它是一个对象
使用代码示例 :
App.vue
vue 省市区三联动 demo
v-model的值是 {{ cityInfo }}
从v-model得知,你选择了 {{ cityName }}
cityName是我们需要展示的数据,作为一个计算属性而存在,因为这个值是不断变化的,从cityInfo中抽取出来的数据
下面我们来看一下组件的实现代码
CitySelect.vue
组件关键点说明:
HTML模板采用三个 select下拉控件,分别具有v-model由于绑定选择的数据,使用v-for遍历省市区数据
data中的数据,分别是选中的省市区的值(对象形式); 以及当前这个省的城市,这个城市的区,见名知意
在create钩子函数中我们进行了数据的初始化,默认我们显示北京相关的信息,改变v-model对应的属性值
实现三联动的重点:
我们使用watch监测当前省市区的改变(v-model中绑定的数据),一旦省 有变化,就需要拉取这个省相关的数据,并且默认选中第一条数据; 市,区的变化类似。
在这里我们采用了 ES5中的filter来进行数据的过滤,我们只要把数据过滤出来了,vue自动帮我们重新渲染,所以我们只需要把重点放在数据的筛选上就可以了
v-model接口的暴露:
要将数据绑定到v-model所绑定的属性上,需要通过触发 input事件,参见 v-model的实现原理这篇文章
Vue.nextTick(() => { _this.$emit('input', _this.info) })
也就是这行代码实现了组件内部数据暴露的效果: v-model所绑定的cityInfo拿到了组件内部的值
这里的 nextTick类似于setTimeout实现的效果,可以在执行完其他任务(例如渲染DOM)之后再执行相应的回调,我们使用它,可以保证我们的下一步操作是在DOM渲染完毕之后再执行的,保证逻辑的正确性
感谢各位的阅读!关于“vue中怎么实现省市区三联动下拉选择组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章标题:vue中怎么实现省市区三联动下拉选择组件
当前路径:http://myzitong.com/article/pgijig.html