先看看是不是你想要的:
解决前:
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],已注释,请留意。欢迎评论~~~