vant picker 设置text

原创已于 2022-03-21 10:03:43 修改 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #前端框架

于 2022-03-21 10:03:29 首次发布

本文探讨如何在Vue的van-picker组件中，当接口返回的字段名与官方期望的'text'不同时，如何正确转换数据以实现picker的显示。重点介绍了columns-field-names和value-key属性的使用方法，以及在实际项目中的应用实例。

官方文档中，设置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>

图一图二

完，我是小学生！继续奔跑