vant picker set text

In the official document, setting the display field of the picker component is the text field in the columns data

In actual use, 99.99% of the field names in the data returned by the back-end interface are not text. At this time, if we use the picker to display the data, we need to convert the name to be displayed into text, and this method is relatively easy to use. trouble.

The picker provides an attribute columns-field-names that can change the display value, as described in the official document

 

So, copy and paste with joy. . . . expected effect, 

<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>

 It failed. . . . This is how the official documentation is done! Figure 1

Continue to find available methods, and use value-key later . This is ok, thanks to the seniors who used it, and thanks to Du Niang, the effect is shown in Figure 2

<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>

   

                  Figure 1 Figure 2

 Over, I am a primary school student! keep running