小程序picker 多列选择详解

最新推荐文章于 2024-06-24 17:05:36 发布

原创最新推荐文章于 2024-06-24 17:05:36 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

小程序同时被 2 个专栏收录

55 篇文章

订阅专栏

Weui

5 篇文章

订阅专栏

本文主要介绍在小程序中，当picker组件的数据为数组内嵌对象结构时，如何使用range-key属性正确显示内容，避免出现【object Object】的显示问题。同时强调了在展示数据中添加name属性的重要性。

需求：选择左边的选项，右边会显示对应的数据。

如果你的数据和官方文档一样，数组套数组的形式，那直接复制复制就行了，这篇文章主要讲，数据是数组里面套对象的这种情况

我的数据结构如下，这就用用到 range-key 属性，

首先，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容，如果不加，则页面上显示的都是【object Object】

然后，下面展示的数据里面也要添加name属性，要是不加，页面也是显示的【object Object】

最后，其他的选择就是直接根据官方文档的来就行了官方文档戳这里

        <picker wx:else class="" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
          value="{{multiIndex}}" range="{{multiArray}}" range-key="name">
          <view class="weui-input picker">
            {{multiArray[0][multiIndex[0]].name}} 
            {{multiArray[1][multiIndex[1]].name}}
          </view>
        </picker>