【uni-app】普通选择器注意range-key的使用

loyd3

已于 2022-11-28 09:25:03 修改

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 开发实践整理文章标签： uni-app 前端 javascript 前端框架

于 2022-11-22 08:31:36 首次发布

本文链接：https://blog.youkuaiyun.com/loyd3/article/details/127726166

uniapp 开发实践整理专栏收录该内容

27 篇文章

订阅专栏

本文介绍了picker组件中range-key属性的作用及用法。当range-key设置为某个字段名时，picker将显示数组中该字段的值。文章通过示例展示了如何使用range-key来改变picker的显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当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>