Vue 城市联动下拉选择组件实现

在做项目的过程中遇到需要选择城市的表单，需要使得省市区三级联动选择。element-ui 中有相关组件，但该组件将三者统一在同一个 select 下拉选择框，使得数据双向绑定时还需要切分数据。故考虑根据实际开发情况封装一个通用的联动下拉选择组件。

组件代码

template

<template><div class="city-select"><div><!-- 选择省份时：更新市、区数据 --><selectv-model="province"@change="updateCity()updateDistrict()pushData()"><option v-for="(item, index) in list" :key="index">{{ item.name }}</option></select><selectv-model="city"@change="updateDistrict()pushData()"><option v-for="(item, index) in cityList" :key="index">{{ item.name }}</option></select><select v-model="district" @change="pushData"><option v-for="(item, index) in DistrictList" :key="index">{{ item.name }}</option></select></div></div>
</template>

script

// 引入省市区数据
import list from '../../../public/data/cities-code.json'
export default {name: 'city-select',data() {return {list, // 总数据province: '北京', // 省cityList: [], // 市数据,city: '', // 市DistrictList: [], // 区数据district: '', // 区}},methods: {// 根据省的选择更新市数据updateCity() {this.list.forEach((item) => {if (item.name === this.province) {this.cityList = item.children}})this.city = this.cityList[0].name},// 根据市的选择更新区数据updateDistrict() {this.cityList.forEach((item) => {if (item.name === this.city) {this.DistrictList = item.children}})this.district = this.DistrictList ? this.DistrictList[0].name : ''},// 数据变化时将数据传递给调用本组件的父组件 (在省市区数据变化时均触发数据推送)pushData() {this.$emit('updateData', this.province, this.city, this.district)},},mounted() {// this.updateCity()},
}

style (sass)

// 默认样式
.city-select {select {height: 40px;width: 175px;line-height: 40px;border: 1px solid #e5e5e5;padding: 0 10px;margin-right: 15px;}
}

使用方法

引入组件

import CitySelect from '@/components/module/CitySelect.vue'

使用组件

<city-select @updateData="updateData"></city-select>

获取数据并使用

updateData(province, city, district) {this.receiverProvince = provincethis.receiverCity = citythis.receiverDistrict = district
},

效果展示

组件特点

省市区联动，会自动根据上一级选择筛选对应的子级可选项
选择省份会自动填充默认市、区

使用注意事项

导入城市数据格式要求：
[{name: '某某省', children: [...]}, {...}, ...]
本组件设置有默认样式，如需更改，在父组件中通过 /deep/ 样式穿透进行设置。例如
.city-select /deep/ select {......}

遇到的问题及解决方案

引用该组件往往需要进行双向数据绑定，但绑定的数据存在于子组件，需要使用数据的是父组件。故考虑使用 $emit 进行数据传输，在数据变化时将省市区三个数据同时传递给父组件，并在父组件接收并使用数据

省市区数据来源：

http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/

其他 ❄️

该组件已修改并上传 npm 方便使用
地址：https://www.npmjs.com/package/m-city-select

Vue 城市联动下拉选择组件实现相关推荐

vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器实现的动态多级联动下拉选择基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择本文demo地址代码如 ...
html省市多级联动下拉框,基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: 无标题文档 //好像不是这样子 var arr_province = ["请选择省 ...
下拉选择_在管理Excel中实现联动下拉选择
在系统中常常出现这样的情况:由于下拉选择的数量太多了,难以高效选择.为此管理Excel通过通过引入多级联动选择的方式来减少下拉选择的困难度.先看下使用效果: 联动下拉选择这个功能,在管理Excel中 ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序原生开发功能合集二：下拉选择组件封装
本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等. 本节实现s ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
[多级联动下拉选择框]和[Tree to Tree]续——让他们可以设置默认值
这两个东东实际上是我现在所做公司的项目的一个小应用,前两天发布的时候并不能设置他们的默认值(初始值),现在都加上了. 多级联动已经封装为.net控件,有一个SelectedValue属性表示当前选择的 ...
vue日历，阳历，阴历，周，年，月，下拉选择，引用element组件，
以下为成品样式,代码较多建议多次观察,废话不说上代码一.'新建calendar.js文件,新建路径都可以,个人喜欢吧js统一管理新建在utils calendar.js /** * @1900-21 ...