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

先看看是不是你想要的：

解决前：

uv-picker解决高亮和已选择项不同的问题

解决后：

解决后的uv-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.value
                pickerSelect(k)
                break;
            case 'gx2fz70f4k':
                range1.value = gx2fz70f4kList.value
                pickerSelect(k)
                break;
        }
        picker.value.open()
    }

    const confirmTop = (e) => {
        formData.value[key] = e.value[0].value
    }

    const getLabel = (val, list) => { // 展示已选择项的label
        if (!list) return
        return list?.find(v => v.value == val)?.label
    }

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