uni-app 4.33版本picker组件,当range值为Array<Object>且对象中有相同value值时,会导致第二列选择显示为空
uni-app 4.33版本picker组件,当range值为Array<Object>且对象中有相同value值时,会导致第二列选择显示为空
操作步骤:
- hello uniapp项目的mode = multiSelector示例,修改城市为同一个时会出现这个问题
预期结果:
- 不出现此bug
实际结果:
- 出现此问题
bug描述:
- mode = multiSelector
- 4.33版本picker,range值是Array<Object>时。对象有value值一样,会导致第二列选择列为空
| 开发环境 | 版本号 | 项目创建方式 |
|-------------------|----------------------|----------------|
| Windows | win10 | HBuilderX |
| uniapp/App | HarmonyOS NEXT | |
| vue | vue3 | |
| HBuilderX | 4.35 | |
| | HarmonyOS NEXT | |
| | HarmonyOS NEXT | |
| | 华为 | |
| | mate60 | |
| | | |
| 打包方式 | | 云端 |
1 回复
在uni-app 4.33版本中,当使用picker组件并且range
值为Array<Object>
类型且对象中有相同的value
值时,确实可能会导致第二列选择显示为空的问题。这是因为picker组件在处理对象数组时依赖于value
的唯一性来确定选项。如果value
值重复,picker组件可能无法正确映射和显示选项。
为了解决这个问题,你可以采取以下几种策略:
-
确保
value
的唯一性:修改数据结构,确保每个对象的value
属性都是唯一的。 -
使用字符串拼接:如果业务逻辑允许,可以在
value
字段上拼接一些唯一标识符(如索引)来确保唯一性。
以下是一个修改后的代码示例,展示了如何在对象中拼接索引来确保value
的唯一性:
<template>
<view>
<picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange">
<view class="picker">
{{multiArray[0][multiIndex[0]].text}} - {{multiArray[1][multiIndex[1]].text}}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
multiArray: [],
multiIndex: [0, 0]
};
},
mounted() {
// 原始数据
const rawData = [
[{text: 'A', value: '1'}, {text: 'B', value: '2'}, {text: 'C', value: '1'}],
[{text: 'X', value: 'X'}, {text: 'Y', value: 'Y'}, {text: 'Z', value: 'Z'}]
];
// 处理数据,确保value唯一
this.multiArray = rawData.map((column, index) => {
return column.map((item, idx) => {
return {
...item,
value: `${item.value}_${index}_${idx}` // 拼接唯一标识符
};
});
});
},
methods: {
bindMultiPickerChange(e) {
this.multiIndex = e.detail.value;
}
}
};
</script>
在这个示例中,我们通过拼接value
、列索引和对象索引来确保每个value
都是唯一的。这样,即使原始数据中有重复的value
,picker组件也能正确显示和处理选项。
请注意,这种方法可能会改变value
的原始意义,因此在实际应用中需要权衡这种改变对业务逻辑的影响。如果可能,最好在数据源层面确保value
的唯一性。