vue3+vant实现使用van-picker实现三级级联菜单展示（含递归遍历）

1、递归遍历三级展示，禁用自动弹起软键盘、设置文档自动换行避免过长文本省略号展示

<div class="text_div"><van-fieldclass="span_text":center="true"v-model="jobLevelCodeText"is-linklabel="任职岗位"autocomplete="off"@click="showPicker = true"//弹出弹出层@focus="handleFocus"//设置手机端不自动弹起软键盘
/><van-popup v-model:show="showPicker" round position="bottom" :style="{ height: '40%' }"><van-picker :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" /></van-popup>
</div>const showPicker = ref(false)//弹出层开启标识
const jobLevelCodeText = ref('') //任职岗位
const columns2 = ref([])//任职岗位
//任职岗位
const onConfirm2 = ({ selectedOptions }) => {// console.log('选中任职岗位', selectedOptions)showPicker2.value = falsejobLevelCodeText.value = selectedOptions[selectedOptions.length - 1].text//展示的文本jobLevelCode.value = selectedOptions[selectedOptions.length - 1].value//实际选中的值// console.log('选中任职岗位code', jobLevelCode.value)
}//解决手机中选择器弹出键盘
const handleFocus = () => {const activeElement = document.activeElementif (activeElement) {activeElement.blur()}
}//获取任职岗位
const changeLine = () => {//任职岗位getList().then(res => {let elementToRemove = '一号位'let newArr = res.data.filter(item => item.levelName !== elementToRemove)//数组过滤function transformData(data) {//递归遍历return data.map(item => ({text: item.levelName,value: item.code,children: item.child ? transformData(item.child) : undefined // 第三层不设置children属性}))}const transformedData = transformData(newArr)columns2.value = transformedData})
}::v-deep {.van-field__control {text-align: right;}.van-ellipsis {//设置文本过长自动换行否则是省略号展示white-space: normal !important;word-wrap: break-word; /* 强制单词换行 */}
}