便利贴--45{uniapp 组件picker 的封装，对于数据的传输和处理 -- 基于之后会发布的from自定义封装}

直接上代码

selectData的数据格式是 

let d = [
  {
    children: [
      {
        children: [{}],
        label: "标题1",
        value: "11",
      },
      {
        children: [{}],
        label: "标题2",
        value: "12",
      },
    ],
    label: "标题",
    value: "1",
  },
];

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
	selectData: {
		//主要数据
		type: Object,
		default: ''
	},
	column: {
		//多少列
		type: Number,
		default: 1
	},
	selectId: {
		//值
		type: Object,
		default: []
	},
	toRight: {
		//右对齐
		type: Boolean,
		default: false
	},
	option: {
		//禁止
		type: Object,
		default: {}
	}
});
// **************************** 注册传递事件 ****************************↓↓↓↓↓↓
const emit = defineEmits(['update:selectId']);
// **************************** 注册传递事件 ****************************↑↑↑↑↑↑
const selectD = ref([]);
const selectValue = ref([]);
const id = ref([]);
const name = ref([]);

// 初始化
const onInit = () => {
	selectD.value = [];
	selectValue.value = [];
	for (let k = 0; k < props.column; k++) {
		selectValue.value.push(0);
		if (k == 0 && props.selectData[0]) {
			//第一层
			let data1 = [],
				d1 = props.selectData;
			for (let k1 in d1) {
				data1.push({
					label: d1[k1].label,
					value: d1[k1].value
				});
			}
			selectD.value.push(data1);
		} else if (k == 1 && props.selectData[0]) {
			//第二层
			let data2 = [],
				d2 = props.selectData[0].children;
			for (let k2 in d2) {
				data2.push({
					label: d2[k2].label,
					value: d2[k2].value
				});
			}
			selectD.value.push(data2);
		} else if (k == 2 && props.selectData[0]) {
			//第三层
			let data3 = [],
				d3 = props.selectData[0].children[0].children;
			for (let k3 in d3) {
				data3.push({
					label: d3[k3].label,
					value: d3[k3].value
				});
			}
			selectD.value.push(data3);
		}
	}
};
watch(
	() => [props.selectData, props.column],
	() => {
		if (props.selectData && props.column) {
			onInit();
		}
	},
	{ deep: true, immediate: true }
);
//watch传递form数据

watch(
	() => id.value,
	() => {
		console.log(id.value)
		emit('update:selectId', id.value);
	},
	{ deep: true, immediate: false }
);
watch(
	() => props.selectId,
	() => {
		if (props.selectId.length === 0) {
			name.value = [];
			onInit();
		}
	},
	{ deep: true, immediate: false }
);

// **************************** 多列选择 ****************************↓↓↓↓↓↓
const pickerSelectColumnchange = res => {
	selectValue.value[res.detail.column] = res.detail.value;
	// 获取当前 res.detail.column 的 res.detail.value 的子项
	if (res.detail.column == 0) {
		if (props.column == 1) return;
		// 修改第二项
		selectValue.value[1] = 0;
		let two = res.detail.value;
		if (props.selectData[two]) {
			let data1 = [];
			let d1 = props.selectData[two].children;
			for (let k in d1) {
				data1.push({
					label: d1[k].label,
					value: d1[k].value
				});
			}
			selectD.value[1] = data1;
		}
		if (props.column == 2) return;
		// && 第三项
		selectValue.value[2] = 0;
		let three = 0;
		if (props.selectData[two]) {
			let data2 = [];
			let d2 = props.selectData[two].children[three].children;
			for (let k in d2) {
				data2.push({
					label: d2[k].label,
					value: d2[k].value
				});
			}
			selectD.value[2] = data2;
		}
	}
	if (res.detail.column == 1) {
		if (props.column == 2) return;
		// 修改第三项
		selectValue.value[2] = 0;
		let two = selectValue.value[0] || 0,
			three = res.detail.value;
		if (props.selectData[two]) {
			let data = [];
			let d1 = props.selectData[two].children[three].children;
			for (let k in d1) {
				data.push({
					label: d1[k].label,
					value: d1[k].value
				});
			}
			selectD.value[2] = data;
		}
	}
};
const change = res => {
	id.value = [];
	name.value = [];
	let overData = res.detail.value;
	let one = props.selectData[overData[0]];
	id.value.push(one.value);
	name.value.push(one.label);
	if (props.column == 1) return;
	let two = props.selectData[overData[0]].children[overData[1]];
	id.value.push(two.value);
	name.value.push(two.label);
	if (props.column == 2) return;
	let three = props.selectData[overData[0]].children[overData[1]].children[overData[2]];
	id.value.push(three.value);
	name.value.push(three.label);
};
// **************************** 多列选择 ****************************↑↑↑↑↑↑
</script>

<template>
	<picker :range="selectD" :disabled="option.disabled" mode="multiSelector" range-key="label" @columnchange="pickerSelectColumnchange" :value="selectValue" @change="change">
		<view class="select" :class="[toRight ? 'toRight' : '']" :style="{ color: name.length != 0 ? '' : '#ACACAC' }">
			{{ name.length != 0 ? name.join(' ') : option.placeholder || '请选择' }}
		</view>
	</picker>
</template>
<style lang="scss" scoped>
.toRight {
	text-align: right;
	margin-right: 24upx;
	flex: 1 !important;
}
</style>

ps：写了一上午，处理事件和逻辑的方式还是的慢慢来，太浮躁了什么都想不到