当picker的mode为selector或没有mode属性时，为普通选择器
picker属性
range: 当mode为selector或multiSelector时，range有效
range-key: 当range是一个Array时，通过range指定Object中key的值作为选择器的显示内容

<template>
  <view class="content">
    <nav-bar
      :headerTitle="`普通选择器注意range-key的使用`"
      :isTitleRelativePosition="true"
      :navbarType="`title`"
    ></nav-bar>
    <view>
      <picker
        @change="bindPickerChange"
        :value="index"
        :range="array"
        range-key="title"
      >
      <!-- 如果range-key属性值为title，在picker选项中会显示array数组中title的属性值；如果是id，则显示id -->
        <view class="picker">{{ array[index].title }}</view>
      </picker>
      <button @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "selector",
  data() {
    return {
      array: [
        {
          id: "1",
          title: "中国",
        },
        {
          id: "2",
          title: "美国",
        },
        {
          id: "3",
          title: "日本",
        },
      ],
      index: 1,
    };
  },
  onLoad() {},
  methods: {
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
    submit() {
      console.log(this.array[this.index]);
    },
  },
};
</script>

<style>
.picker {
  padding: 10px;
  text-align: center;
}
</style>

如果range-key属性值为title，在picker选项中会显示array数组中title的属性值；如果是id，则显示id