uniapp 省市两级联动 u-picker (Vue3语法)

1.引入插件

我的代码如下

<u-picker  :show="show" ref="uPicker" :columns="newList" @confirm="confirm"
				@change="changeHandler" @cancel="cancel" itemHeight="80" ></u-picker>

官网（u-picker也有讲解 这里是方便自己和大家用时）

属性	解释
：show	绑定显示和隐藏的属性值 true or false
:columns	绑定对应的数据
@confirm	弹窗弹出时 右上角的确认按钮
@change	监听选择地址时的数据变动
@cancel	弹窗打开时的左上角按钮
itemHeight	弹窗里单个选项的高度

2.用到的字段如下

import jsonData from '@/utils/pc.json'
	//所有的地图数据
	const addressData = ref([])
	addressData.value = jsonData
	//记录市的字段
	const cityName = ref()
	//记录省的字段
	const provinceName = ref('请选择城市')
	//绑定控件数据源的字段
	const newList = ref([])

这里的jsonData就是对应的省市数据源 （链接放在下面了）
链接：点我跳转
提取码：csdn

3.在用到的页面onLoad的方法中调用

	onLoad((name) => {
		//解释下  这里可以理解为把json里的数据全部的对应地区导入到provinceData中   大家也可以打印e.name查看   因为这里我不需要返回code
		//不然应该    return { name: e.name, code: e.code }
					       
		//省的数据
		const provinceData = jsonData.map(e => {
			return e.name
		})
		//市的数据
		const cityData = jsonData.map(e => {
			const arr = []
			arr.push(
				e.children.map(c => {
					return c.name

				})
			)
			return arr
		})
		const arr = [provinceData, cityData[0][0]]
		//数据的初始数据
		newList.value = arr

	})

点击确定按钮时的逻辑

const confirm = (e) => {
		province.value=e.value[0];
		city.value=e.value[1];
		show.value = false
	}

核心设置对应选择数据的地方

//当选择地址时   数据会跟着响应的方法
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values,
			index,
			picker
		} = e;
// console.log(e)
		//index   是横坐标
		// console.log(isNaN(index))
		if (columnIndex === 0) {
			if (!isNaN(index)) {  //第一行时数据是不显示的
				const children1 = addressData.value[index].children.map(e => {
					return e.name
				})
				// console.log(children1)
				picker.setColumnValues(1, children1)
			}

		};

	}

关闭窗口的方法

//关闭窗口的方法
	const cancel=()=>{
		show.value=false
		isRotated.value=false
	}

配合我给的json数据 就可以实现省市的二级联动了
(省市区三级联动的实现 等哪天有空再慢慢尝试吧 这个也搞了快一下午)

参考文档的地址 参考文章

最后上效果图