微信小程序自定义picker多列选择器

最新推荐文章于 2025-07-19 18:14:41 发布

原创

最新推荐文章于 2025-07-19 18:14:41 发布 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序

本文介绍了如何在微信小程序中自定义一个多列选择器，详细解析了数据结构、视图代码和业务逻辑，强调了picker组件的使用以及联动变化的实现方法，特别是picker值变化时的处理逻辑。

请添加图片描述

需求说明

使用 mpvue 实现自定义的 picker 多列选择器。

1、数据结构说明

根据 picker 的数据特征，需要构造一个如下所示的数据结构。data数组中的三个元素，分别用于渲染 picker 多列选择器的三列数据。能否构造出这个数据结构，直接影响了 picker 多列选择器实现的难易程度。

pid的作用是用于构建出满足 picker 多列选择器的树状数据结构，要特别注意。

const data = [
  // 用于picker第一列的数据源
  [
    {id:1, name:'A'},
    {id:2, name: 'B'}
  ],
  // 用于picker第二列的数据源
  [
    {id: 11, pid: 1, name: 'A1' },
    {id: 12, pid: 1, name: 'A2' },
    {id: 13, pid: 2, name: 'B1' },
    {id: 14, pid: 2, name: 'B2' },
    {id: 15, pid: 2, name: 'B3' }
  ],
  // 用于picker第三列的数据源
  [
    {id: 101, pid: 11, name: 'A1-0000000' },
    {id: 102, pid: 11, name: 'A1-1111111' },
    {id: 103, pid: 12, name: 'A2-0000000' },
    {id: 104, pid: 13, name: 'B1-0000000' },
    {id: 105, pid: 14, name: 'B2-0000000' },