1、引入

import { Picker } from ’vant’

2、使用

components: { vanPicker: Picker, }

3、渲染

<van-picker show-toolbar :columns='columns' value-key='text' />

4、將值push到columns

//注意的點(diǎn)vant默認(rèn)的是text，如果你需要修改需要value-key='你要定義的名字'，否則不會(huì)渲染 this.columns = [ { siteState: 1, text: '裝機(jī)開業(yè)' }, { siteState: 2, text: '裝機(jī)停業(yè)' }, { siteState: 3, text: '未裝機(jī)開業(yè)' }, { siteState: 4, text: '未裝機(jī)停業(yè)' }, { siteState: 5, text: '其他' } ];

補(bǔ)充知識(shí)：vant-ui之Field輸入框和Picker結(jié)合使用時(shí)，如何綁定正確的id類型的值的問題。

很常見的需求：

表單中的一項(xiàng)，需要從picker控件中選擇正確的值后，展示的是字符串，然后提交到后臺(tái)服務(wù)器的則是字符串對(duì)應(yīng)的value類型的值的問題。

點(diǎn)擊表單的檔案組，彈出Picker選擇組件，選擇正確的值，填充到表單項(xiàng)，但是，提交到服務(wù)器去，需要提交對(duì)應(yīng)的id，而不是看到的字符串。

如何實(shí)現(xiàn)？

實(shí)現(xiàn)方式一：

定義兩個(gè)屬性，classId和className， 她兩是一 一對(duì)應(yīng)的關(guān)系。

data() { return { classId: -1, className: '全部', columns: [ { text: ’全部’, value: -1 }, { text: ’未分組’, value: 0 }, { text: ’訪客’, value: 1 }, ], },}

van-field中綁定className

<van-field readonly clickable name='picker' :value='className' label='檔案組' placeholder='' @click='showClassPicker = true' />

然后在van-picker中，綁定的confirm函數(shù)，參數(shù)獲取到的是一個(gè)對(duì)象。

在這個(gè)函數(shù)內(nèi)，同時(shí)更新className和classId，保證他倆一 一對(duì)應(yīng)。

<van-popup v-model='showClassPicker' position='bottom'> <van-picker show-toolbar :columns='columns' @confirm='onClassConfirm' @cancel='showClassPicker = false' /> </van-popup>

onClassConfirm(v) { this.classId = v.value; this.className = v.text; this.showClassPicker = false; },

這樣就可以了。用戶在表單中看到的是字符串，而提交給后臺(tái)的，則是與這個(gè)字符串一 一對(duì)應(yīng)的id值。

方式二：

van-field中依然還是使用value類型的值，只是需要給這個(gè)值，一個(gè)filter過濾器，轉(zhuǎn)換為正確的字符串顯示，但是提交給后臺(tái)的，卻是value類型的值，譬如id

以上這篇vue vant中picker組件的使用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。