uview-plus省市区组件

<up-picker :show="showPicker" ref="uPickerRef" :columns="areaList" keyName="name" itemHeight="34"
		@confirm="confirmDist" @change="distChangeHandler" @cancel="showPicker = false"></up-picker>

import { ref, reactive, toRefs } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const pickerValue = ref('');

// 使用 reactive 创建响应式状态
const state = reactive({
	showPicker: false,
	area: '',
	areaList: [[], [], []],
});

const {
	showPicker,
	area,
	areaList,
} = toRefs(state);

// 使用 ref 创建响应式引用
// Picker组件 Ref
const uPickerRef = ref(null);

// 监听省市区列表选择器变化
const distChangeHandler = (item) => {
	const { columnIndex, value } = item;
	let city = value[0].children;
	if (columnIndex === 0) {
		// 省变化更新市、区列表
		// setColumnValues(index, setVal) 设置对应列的选择值
		uPickerRef.value.setColumnValues(1, city);
		uPickerRef.value.setColumnValues(2, city[0].children);
	} else if (columnIndex === 1) {
		// 市变化更新区/县列表
		uPickerRef.value.setColumnValues(2, value[1].children);
	}
};

// 确定选择服务地区
const confirmDist = (item) => {
	const { value } = item;
	pickerValue.value = `${value[0].name} , ${value[1].name} , ${value[2].name}`;
	showPicker.value = false; // 关闭弹框
};

// 接收参数
onLoad((options) => {
	// 获取地区列表
	const obj = [{
		name: '江苏省',
		id: 320000,
		children: [
			{
				name: '南京市',
				id: 320100,
				children: [{
					name: '玄武区',
					id: 320102,
					children: []
				}]
			},
		]
	}];
	areaList.value[0].push(...obj); // 省
	areaList.value[1].push(...areaList.value[0][0].children); // 市
	areaList.value[2].push(...areaList.value[1][0].children); // 区
	//设置默认值
	setTimeout(() => {
		uPickerRef.value.setIndexs([1, 1, 2]); // [省索引, 市索引, 区索引]
	},3000)
})

以下是具体设置默认值参考方式

//父组件传省市区id
messageFromParent.value = [province_id, city_id, district_id]

子组件根据id查找，并滑动到想要的值
setTimeout(() => {
	let arr = []
	areaList.value[0].forEach((province, pIndex) => {
		if (province.id === props.parentMessage[0]) {
			arr.push(pIndex)
			// console.log('找到省', province)
			uPickerRef.value.setColumnValues(1, province.children); //设置当前省的市数据

			province.children.forEach((city, cIndex) => {
				if (city.id === props.parentMessage[1]) {
					arr.push(cIndex)
					// console.log('找到市', city)
					uPickerRef.value.setColumnValues(2, province.children[cIndex].children); //设置当前市的区数据

					city.children.forEach((region, rIndex) => {
						if (region.id === props.parentMessage[2]) {
							arr.push(rIndex)
							// console.log('找到区', region)
						}
					})
				}
			})
		}
	})

	console.log(arr)
	uPickerRef.value.setIndexs(arr);
}, 1000)