微信小程序自定义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: '