小程序二级联动下拉框 vant picker

vant官方提供得例子是什么鬼，谁家数据结构会是这种。。。无语了

const citys = {
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
};

经我改造直接上代码

1、value-key 是json中要显示得文字

 <van-picker columns="{{ columns }}" value-key="name" bind:change="onChange" />

2、js

const citys = {   //想办法把数据结构变成这种，key得名字可以随便，结构一致就行
  '浙江':{
    name: '浙江',
    value: '1',
    list: [{ name: '浙江1', value: 10 }, { name: '浙江2', value: 12 }]
  },
  '福建':{
    name: '福建',
    value: '2',
    list: [{ name: '浙江3', value: 22 }, { name: '浙江4', value: 33 }]
  }
}
Page({
  data: {
    columns: [ 
      {
        values: Object.keys(citys).map(key => citys[key].name), //返回出来得是['浙江','福建']
      },
      { 
        values: citys['浙江'].list, //返回出来得是[{ name: '浙江1', value: 10 }, { name: '浙江2', value: 12 }]
        defaultIndex: 2
      }
    ]
  },
  onChange(event) {
    const { picker, value, index } = event.detail;
    picker.setColumnValues(1, citys[value[0]].list);  
  }
})

绝对好使，js哪里不懂，自己console一下数据看看就懂了