直接上代码

selectData的数据格式是 

let d = [
  {
    children: [
      {
        children: [{}],
        label: "标题1",
        value: "11",
      },
      {
        children: [{}],
        label: "标题2",
        value: "12",
      },
    ],
    label: "标题",
    value: "1",
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
	selectData: {
		//主要数据
		type: Object,
		default: ''
	},
	column: {
		//多少列
		type: Number,
		default: 1
	}
});
// **************************** 注册传递事件 ****************************↓↓↓↓↓↓
const emit = defineEmits(['update:selectId']);
// **************************** 注册传递事件 ****************************↑↑↑↑↑↑
const selectD = ref([]);
const selectValue = ref([]);
const id = ref([]);
watch(
	() => [props.selectData, props.column],
	() => {
		if (props.selectData && props.column) {
			//初始化显示数据
			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);
				}
			}
		}
	},
	{ deep: true, immediate: true }
);
//watch传递form数据

watch(
	() => id.value,
	() => {
		console.log(id.value);
		emit('update:selectId', id.value);
	},
	{ 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 => {
	let overData = res.detail.value;
	let one = props.selectData[overData[0]];
	if (props.column == 1) return;
	let two = props.selectData[overData[0]].children[overData[1]];
	if (props.column == 2) return;
	let three = props.selectData[overData[0]].children[overData[1]].children[overData[2]];
	id.value = [one.value, two.value, three.value];
};
// **************************** 多列选择 ****************************↑↑↑↑↑↑
</script>

<template>
	<picker :range="selectD" mode="multiSelector" range-key="label" @columnchange="pickerSelectColumnchange" :value="selectValue" @change="change">
		<view class="select" :style="{ color: selectValue.length != 0 ? '' : '#ACACAC' }">{{ selectValue.length != 0 || '请选择' }}</view>
	</picker>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

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