1、引入

import { Picker } from ’vant’

2、使用

components: { vanPicker: Picker, }

3、渲染

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

4、將值push到columns

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

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

很常見的需求：

表單中的一項，需要從picker控件中選擇正確的值后，展示的是字符串，然后提交到后臺服務器的則是字符串對應的value類型的值的問題。

點擊表單的檔案組，彈出Picker選擇組件，選擇正確的值，填充到表單項，但是，提交到服務器去，需要提交對應的id，而不是看到的字符串。

如何實現？

實現方式一：

定義兩個屬性，classId和className， 她兩是一 一對應的關系。

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函數，參數獲取到的是一個對象。

在這個函數內，同時更新className和classId，保證他倆一 一對應。

<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; },

這樣就可以了。用戶在表單中看到的是字符串，而提交給后臺的，則是與這個字符串一 一對應的id值。

方式二：

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

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