vant picker 设置text

关注

原创 2022-03-21 10:03:43 4.5k 阅读 AI 写同款· GEO 优化 ›

Vant 4中的van-picker选择总是第一个的解决办法他默认是渲染text,但是一般在我们使用中99%的数据渲染都不可能是text,这个时候就可以使用文档中的columns-field-names来自定义自定义 columns 结构中的字段，比如我们的数据里面现在是name为需要渲染的字段就可以这么写。但是这个时候就会发现一个问题，就是不管你怎么选择都是第一个选项，因为我也是个前端小白，找了蛮久都没找到解决办法，后来试了一下自定义value居然可以，所以就可以写成。为啥一开始不自定义value,因为我想获取的是选择的这个对象，不是这个对象里面的某个属性。阅读详情

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