官方文档中,设置picker组件显示字段是columns数据中的text字段
在实际使用过程中,后端接口返回数据中的字段名称99.99%不是text,这时候如果我们用picker去显示数据的话,需要做转化,将要显示的名称 转化为text,而这种方法使用起来比较麻烦。
picker中提供了一个可以改变显示值得属性columns-field-names,官方文档是这样描述的
于是,满怀喜悦的复制、粘贴。。。。期待效果,,
<van-popup v-model="selectData.bankOcr.visible" round position="bottom">
<van-picker
show-toolbar
:columns="selectData.bankOcr.columns"
:colunms-field-names="{text: 'name'}"
@cancel="selectData.bankOcr.visible = false"
@confirm="onSelectBank"
/>
</van-popup>
结果失败了 。。。。官方文档是这样搞得啊!如图一
继续找可使用的方法,后边使用了value-key。这个可以了感谢用过的前辈,感谢度娘,实现效果如图二
<van-popup v-model="selectData.bankOcr.visible" round position="bottom">
<van-picker
show-toolbar
:columns="selectData.bankOcr.columns"
value-key="name"
@cancel="selectData.bankOcr.visible = false"
@confirm="onSelectBank"
/>
</van-popup>
图一 图二
完,我是小学生!继续奔跑