Vant: Picker 选择器 数据格式

Created on 9 Mar 2019  ·  3Comments  ·  Source: youzan/vant

What problem does this feature solve?
目前的 Picker 选择器 数据格式不算友好,如果只是单纯的一列数据还行,有办法来依靠前端处理。但是当处理到多级联动数据的时候,完全一脸懵逼,是否考虑变更数据格式,传入columns 的格式。

Describe the solution you'd like
非联动数据时:
单行数据:columns :['杭州','浙江'] 多列格式:columns :[['杭州','浙江'],[’广东‘,’杭州‘]] // 或者是考虑到 name => value 的形式 columns:[[{ name: '杭州', value: 23 }, { name: '浙江', value: 25 }]]
多级联动数据时:
columns:[ {name: '浙江',value:25, parent:0, // 为一级时,parent 字段可以为 0 | '' | 或者是不存在此字段} {name: '杭州',value:23,parent:25, // 为二级时,parent 字段的值为上级的value 的值}]

使用picker 数据结构不会太过于复杂,而且和 Area 省市区选择 业务组件不冲突,

What does the proposed API look like?
对于此种需要联动数据的时候,后端返回去的数据,一般都会是一个 无限级多维数据,改为此种数据格式,方便组装,对于多语种的处理,也更加优秀,数据组装逻辑清晰,直接一个数组拍平即可。官方是否考虑这种数据格式,只是小小的建议,毕竟轮子是应该让使用者感觉简单易上手,不需要为了官方组件的各种数据格式来回做处理

All 3 comments

你好,这种格式会引入两个新的字段,value 和 parent。可能在你的业务场景里这种结构是更加简单的,但是对于没有定义这两个字段的使用者而言,他们会需要一些额外的工作。目前我们不会修改 Picker 的结构,不过我们会完善 Picker 的文档,减少使用者上手的门槛

能加个三级自定义联动的实例最好

对这种的https://github.com/xml00007/vue-picker-mobile/blob/master/src/data/multiple2.js
数据格式 比如children 三级 可以联动起来
我不明白 picker是否设计结构如此?
有一个需求场景 不是选择城市
就是选择行业 像这样的我不知道怎么下手 类似的选择联动 在产品需求中经常遇到
{
label: '餐点',
value: 0,
children: [
{
label: '闽南菜',
value: 0,
children: [
{
label: '牛肉共',
value: 0,
children: [
{
label: '2块钱',
value: 0,
}, {
label: '3KUAIQIAN',
value: 1,
},
],
},
],
},

Was this page helpful?
0 / 5 - 0 ratings