uniapp的picker组件：解决多个uv-picker时，每个picker高亮的内容显示不是已选择项的问题

本文主要是介绍uniapp的picker组件：解决多个uv-picker时，每个picker高亮的内容显示不是已选择项的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看看是不是你想要的：

解决前：

解决后：

背景：

    此项目是使用vue3+uniapp开发的h5项目，项目的某个页面有两个或多个下拉选项，选择的第一个下拉框的第二个值，在选择第二个下拉框时，第二个下拉框高亮展示第二个值，跟着第一个下拉框的顺序去高亮展示了。

需求：

    假设有两个下拉选项，且每个选项都有3个可选值。当第一个下拉框选择第二个选项时，再对第二个下拉框进行选择时，此时应该是第一个选项高亮，但现在是第二个选项高亮了，即第二个下拉框高亮的选项是跟着第一个下拉框选择的顺序走了。

上代码，代码里有注释，请看：

html标签：<view><view><uv-form><uv-form-item required label="目的" borderBottom prop="gx2fz70f4j"><view class="picker-box" @tap="showLy('gx2fz70f4j')"><view>{{getLabel(formData.gx2fz70f4j, gx2fz70f4jList) || '请选择'}}</view><uni-icons type="right" color="#999"></uni-icons></view></uv-form-item><uv-form-item required label="等级" borderBottom prop="gx2fz70f4k"><view class="picker-box" @tap="showLy('gx2fz70f4k')"><view>{{getLabel(formData.gx2fz70f4k, gx2fz70f4kList) || '请选择'}}</view><uni-icons type="right" color="#999"></uni-icons></view></uv-form-item></uv-form></view><!--ref：获取picker组件的信息columns: picker组件显示的选项内容，是个数组；confirm： picker组件的确定按钮方法；keyName： picker组件显示的内容--><uv-picker ref="picker" :columns="[range1]" @confirm="confirmTop" keyName="label"></uv-picker></view>js:// 定义变量
const formData = ref({gx2fz70f4j: undefined, // 目的gx2fz70f4k: undefined, // 等级
})// 定义picker组件即uv-picker标签的ref
const picker = ref(null)// picker组件显示的选项
const range1 = ref(undefined)// 定义picker组件显示的选项，即uv-picker标签的columns
const gx2fz70f4jList = ref([{value: "1",label: "初验",key: "1"},{value: "2",label: "终验",key: "2"}])const gx2fz70f4kList = ref([{value: "2",label: "二级",key: "2"},{value: "3",label: "三级",key: "3"}])const pickerSelect = (k) => { // picker组件的高亮项为已选择的项range1.value.find((e, i) => {if (formData.value[k] && e.value === formData.value [k]) {// 重要！！！ ref绑定的picker.value对象上的innerIndex是个数组，数组只有一项，即已选择的这一项picker.value.innerIndex = [i]}})}const showLy = (k) => {switch (k) {case 'gx2fz70f4j':range1.value = gx2fz70f4jList.valuepickerSelect(k)break;case 'gx2fz70f4k':range1.value = gx2fz70f4kList.valuepickerSelect(k)break;}picker.value.open()}const confirmTop = (e) => {formData.value[key] = e.value[0].value}const getLabel = (val, list) => { // 展示已选择项的labelif (!list) returnreturn list?.find(v => v.value == val)?.label}

功能的实现的主要问题在于picker.value.innerIndex = [i]，已注释，请留意。欢迎评论~~~

这篇关于uniapp的picker组件：解决多个uv-picker时，每个picker高亮的内容显示不是已选择项的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---