Uniapp省市区三级联动实现

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)
	}

这是我项目里的效果

希望大家可以轻松实现，大家一开始可以先去下载插件里的那个示例项目感受下，了解下这个组件大概怎么使用 后面上手应该就会快很多
如果有用的话 记得点个赞！！！