Uniapp省市区三级联动实现

最新推荐文章于 2024-03-28 18:29:41 发布

significant_

最新推荐文章于 2024-03-28 18:29:41 发布

阅读量1.3k

点赞数 21

文章标签： uni-app

本文链接：https://blog.csdn.net/significant_/article/details/136194379

版权

uniapp 省市区三级联动

1先去插件市场下载插件

在这里插入图片描述
插件地址：点我前往
将他导入项目中

2.从自己的项目中引用

导入成功后这个组件应该在这在这里插入图片描述
在自己要用到的页面引入它（我是vue3的语法 vue2怎么导入组件大家可以搜一下）
对于插件里的属性值大家在下载插件页面时下面有作者的介绍大家下滑就可以找到

然后这部分是我项目里的使用（如下）
在这里插入图片描述

参数	我的理解
ref	对应的就是显示和隐藏绑定的值应该为 true 或value
mode	就是是否采用多级联动
list	绑定对应的数据列表（这里要绑定对应的地址省市区的json文件等会教大家怎么弄）
level	就是你需要要几级联动（我项目里就两级省市联动就行了所以填的2 ）
prop	修改json里对应的参数字段修改进行匹配下面会讲
@confirm	就是可以获取到你选择列表后的值 (并设置你控制组件显示的参数为true，这样就可以显示列表了)

（这些参数在对应作者插件的下面有详细的介绍我写方便自己和大家能看懂）

省市区数据来源点我前往

（因为你三级联动肯定要对应联动的数据去下载）点第一个
在这里插入图片描述

然后大家选择自己要几级联动我是二级联动即可所以我选的它
在这里插入图片描述

貌似三级联动选择这个就行
在这里插入图片描述

3.大家把下载的json文件放在自己的项目里进行绑定（我用的Vue3语法）

引入数据
在这里插入图片描述
绑定数据

注意注意注意！！！！还有重要的一步

因为作者封装组件的时候对应的省市区它是有对应的属性名的，我们下载的文件名字不一定对应的上
在这里插入图片描述

这里就要用到我们上面那个参数props 去把对应的省、市、区对应上

//这里左边是插件里的属性   右边是下载json文件里对应的属性名
	const myProps = {
		label: 'name',
		value: 'code',
		children: 'children'
	}

这样应该就可以联动了

接着就是获取到对应选择的数据了
在这里插入图片描述
@confirm 绑定的事件里可以去获取对应的参数

	//获取下拉的地址
	const getAdress = (res) => {
		//省名
		console.log(res.item[0].name)
		//市名
		console.log(res.item[1].name)
		//如果有区的话  区名
		console.log(res.item[2].name)
	}