vue 配合mintUi实现省市区三级联动

忘是亡心i 2023-01-19 07:21 5阅读 0赞

最终效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

这里有个问题需要提示下，MintUi的版本问题，我用的[https://unpkg.com/mint-ui@2.2.13/lib/index.js][https_unpkg.com_mint-ui_2.2.13_lib_index.js]   2.2.13版本滚动时有问题，而且重复打印，于是切换了版本，最后发现  2.2.9版本滚动正常，但是不知道为什么，页面其他picker受到了影响，

所以最终只有地址这个界面使用了2.2.9版本，其他界面依旧使用2.2.13版本！

文档地址：[http://mint-ui.github.io/docs/\#/zh-cn2/picker][http_mint-ui.github.io_docs_zh-cn2_picker]

<div class="flex" @click="picker_click">
    					<div class="add_address_top_left">选择地区</div>
    					<div class="add_address_top_right select_address">
    						{
       {province}} - {
       {city_name}} - {
       {district}}
    					</div>
    				</div>
    <mt-popup v-model="city_type" position="bottom">
    				<mt-picker :slots="city_data" value-key="n" @change="onValuesChange"></mt-picker>
    			</mt-popup>

data: {
    						value: false, //选中状态
    						city_type: false,
    						city: [],
    						city_data: [{
    							flex: 1,
    							values: [],
    							className: 'slot1',
    							textAlign: 'left'
    						}, {
    							divider: true,
    							content: '-',
    							className: 'slot2'
    						}, {
    							flex: 1,
    							values: [],
    							className: 'slot3',
    							textAlign: 'center'
    						}, {
    							divider: true,
    							content: '-',
    							className: 'slot4'
    						}, {
    							flex: 1,
    							values: [],
    							className: 'slot5',
    							textAlign: 'right'
    						}],
    						city_name: '', //选中的市区
    						city_id: '', //选中的市区id
    						province: '', //选中的省份名称
    						district: '' //选中的区
    					},

mounted: function() {
    						// 加载默认数据
    						let that = this;
    						axios({
    								method: 'get',
    								url: href_val + '/city_list',
    								headers: {
    									'Authori-zation': 'Bearer ' + token
    								}
    							})
    							.then(res => {
    								console.log("地址列表", res.data.data)
    								if (res.data.status == 200) {
    									that.city = res.data.data;
    									that.city_data[0].values = res.data.data;
    									that.city_data[2].values = res.data.data[0].c;
    									that.city_data[4].values = res.data.data[0].c[0].c;
    								} else {
    									that.$toast(res.data.msg);
    								}
    							}).catch(function(error) {
    								that.$toast('接口错误');
    							});
    					},
    					methods: {
    						picker_click() {
    							this.city_type = true;
    						},
    						onValuesChange(picker, values) {
    							let that = this;
    							if (that.city_data[0].values.length > 0) {
    								// 省份不为空 设置市的值
    								that.city_data[2].values = values[0].c;
    								// 省份不为空 设置市的值
    								that.city_data[4].values = values[0].c[0].c;
    								// 获取所有选中的值
    								var city_val=picker.getValues();
    								that.city_name=city_val[1].n; //选中的省份名称
    								that.city_id=city_val[1].v; //选中的省份id
    								that.province=city_val[0].n; //选中的市区
    								that.district=city_val[2].n; //选中的区
    								
    								console.log("市区名称",that.city_name)
    								console.log("选中的市区id",that.city_id)
    								console.log("选中的省份",that.province)
    								console.log("选中的区",that.district)
    							}
    						}
    					}

以上代码发现了一个Bug，省份滑动时城市和区都变化了，但是滑动城市的时候，区县并没有切换成功，所以查询官网文档后找到了调整方法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

主要在切换时重新设定了值

onValuesChange(picker, values) {
    		let that = this;
    		if (that.city_data[0].values.length > 0) {
    			// 获取所有选中的值
    			var city_val = picker.getValues();
    			console.log("111111", city_val)
    			setTimeout(function() {
    				that.city_name = city_val[2].n;
    				that.city_id = city_val[2].v;
    				that.province = city_val[0].n;
    				that.address_province_id = city_val[0].v;
    				that.district = city_val[4].n;
    				that.address_district_id = city_val[4].v;
    			}, 500)
    		}
    
    		if (!values[0]) {
    			that.$nextTick(() => {
            		console.log('999', values)
    			})
    		} else {
    			picker.setSlotValues(1, values[0].c)
    			let town = []
    			if (values[1]) {
    				town = values[1].c
    			}
    			picker.setSlotValues(2, town)
    		}
    	},

模拟的数据  [https://download.csdn.net/download/Bright2017/18474457?spm=1001.2014.3001.5501][https_download.csdn.net_download_Bright2017_18474457_spm_1001.2014.3001.5501]

免费下载  有点长，文章建议分开上传，所以上传资源了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221021/7b21f33331644dbcab8405ffc516c890.png
[https_unpkg.com_mint-ui_2.2.13_lib_index.js]: https://unpkg.com/mint-ui@2.2.13/lib/index.js
[http_mint-ui.github.io_docs_zh-cn2_picker]: http://mint-ui.github.io/docs/#/zh-cn2/picker
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20221021/93045ac3ae9543488753a6e7082956a3.png
[https_download.csdn.net_download_Bright2017_18474457_spm_1001.2014.3001.5501]: https://download.csdn.net/download/Bright2017/18474457?spm=1001.2014.3001.5501