uvui省市区三级联动uv-picker组件的使用（uview同理u-picker）

uvui和uview组件库的导入就不在这里说了，直接说uv-picker的使用

一，效果图

二，代码展示

1，html代码

<uv-form-item label="选择地址" prop="address" required @click="cityOpen">
	<uv-input v-model="modelValue.address" border="surround" 
placeholder="请选择地址" fontSize="24rpx" color="#858585">
    </uv-input>
</uv-form-item>
<uv-picker ref="pickerRef" :loading="loadingPick" keyName="name" 
:columns="cityColumns" @confirm="cityConfirm" @change="cityChange">
</uv-picker>

2.js代码

该功能的实现思路，主要是由于后端返回的数据是分开的，即省的数据先从接口获取，再根据得到的省的id去获取市的数据，然后再根据市的id去获取区的数据；每滑动一次数据就重新根据滑动到的数据id去获取新的市区数据；

const pickerRef = ref(null);

//弹出选择框
const cityOpen = () => {
	pickerRef.value.open();
}

// 获取第一列的值
const getArea = () => {
	uni.$uv.http.get('/weChat/regions/selectListByParentId', {
		params: {
			'parentId': '' //传入父id
		}
	}).then(res => {
		cityColumns.value[0] = res.data; //设置第一列的值
		getStreet(0, cityColumns.value[0][0].id); //初次渲染第二列的值
	})
}

//当选择值变化时触发
const cityChange = (e) => {
	const {
		columnIndex,
		index
	} = e
	// columnIndex === 0 代表为滑动的是第一例 === 1时为第二列
	if (columnIndex === 0) {
		getStreet(0, e.value[0].id) //获取第二列的值
	} else if (columnIndex === 1) {
		getStreet(1, e.value[1].id) //获取第三列的值
	}
}

//获取和设置二三列的值 index 为滑动的列
const getStreet = (index, id) => {
	uni.$uv.http.get('/weChat/regions/list', {
		params: {
			'parentId': id
		}
	}).then(res => {
		if (res.code == 200) {
			if (index === 0) { //设置第二列的值
				pickerRef.value.setColumnValues(1, res.data);
				cityColumns.value[1] = res.data;
				getStreet(1, cityColumns.value[1][0].id); //初次渲染第三列的值
			} else if (index === 1) { //设置第三列的值
				pickerRef.value.setColumnValues(2, res.data);
				cityColumns.value[2] = res.data;
			}
		}
	})
}

如果初次没有获取第二第三列的值会出现这样的情况