uni-app中uni-data-picker数据驱动的picker选择器回显父级错误

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

uni-app中uni-data-picker数据驱动的picker选择器回显父级错误

1 回复

在uni-app中,使用uni-data-picker组件进行数据驱动的picker选择器时,如果遇到回显父级数据错误的问题,通常是因为数据绑定或事件处理不当导致的。以下是一个示例代码,展示如何正确使用uni-data-picker组件,并正确处理数据回显。

首先,确保你的uni-app项目已经引入了uni-ui库,因为uni-data-pickeruni-ui的一部分。如果未引入,可以通过以下方式引入:

// 在pages.json中引入uni-ui
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

然后,在你的页面中使用uni-data-picker组件,并绑定相应的数据。以下是一个完整的示例:

<template>
  <view>
    <uni-data-picker
      v-model="selectedValue"
      :local-data="pickerData"
      @change="handleChange"
    />
    <view>Selected: {{ selectedLabel }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 当前选中的值
      selectedLabel: '', // 当前选中的标签,用于显示
      pickerData: [
        {
          value: 'parent1',
          children: [
            { value: 'child1-1', text: 'Child 1-1' },
            { value: 'child1-2', text: 'Child 1-2' }
          ]
        },
        {
          value: 'parent2',
          children: [
            { value: 'child2-1', text: 'Child 2-1' },
            { value: 'child2-2', text: 'Child 2-2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(e) {
      const selectedItem = this.findItemByValue(this.pickerData, e.detail.value);
      this.selectedLabel = selectedItem ? selectedItem.text : '';
    },
    findItemByValue(data, value) {
      for (let item of data) {
        if (item.value === value) {
          return item;
        } else if (item.children && item.children.length > 0) {
          const found = this.findItemByValue(item.children, value);
          if (found) {
            return found;
          }
        }
      }
      return null;
    }
  },
  mounted() {
    // 假设初始化时选中'parent1'下的'child1-1'
    this.selectedValue = 'child1-1';
    this.handleChange({ detail: { value: this.selectedValue } });
  }
};
</script>

在这个示例中,pickerData是一个包含父级和子级数据的数组。selectedValue是当前选中的值,selectedLabel是当前选中的标签,用于在页面上显示。handleChange方法会在值改变时被触发,用于更新selectedLabelfindItemByValue方法用于根据值查找对应的项,以获取其文本标签。

确保在组件挂载时(mounted钩子)正确初始化selectedValue,并触发handleChange方法来设置初始的回显标签。这样可以避免回显父级数据错误的问题。

回到顶部