uni-app 4.33版本picker组件,当range值为Array<Object>且对象中有相同value值时,会导致第二列选择显示为空

发布于 1周前 作者 caililin 来自 Uni-App

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组件可能无法正确映射和显示选项。

为了解决这个问题,你可以采取以下几种策略:

  1. 确保value的唯一性:修改数据结构,确保每个对象的value属性都是唯一的。

  2. 使用字符串拼接:如果业务逻辑允许,可以在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的唯一性。

回到顶部