vue vant中picker組件的使用
1、引入
import { Picker } from 'vant'
2、使用
components: {
vanPicker: Picker,
}
3、渲染
<van-picker show-toolbar :columns="columns" value-key="text" />
4、將值push到columns
//注意的點vant默認(rèn)的是text，如果你需要修改需要value-key="你要定義的名字"，否則不會渲染
this.columns = [
{
siteState: 1,
text: "裝機開業(yè)"
},
{
siteState: 2,
text: "裝機停業(yè)"
},
{
siteState: 3,
text: "未裝機開業(yè)"
},
{
siteState: 4,
text: "未裝機停業(yè)"
},
{
siteState: 5,
text: "其他"
}
];
補充知識：vant-ui之Field輸入框和Picker結(jié)合使用時，如何綁定正確的id類型的值的問題。
很常見的需求：
表單中的一項，需要從picker控件中選擇正確的值后，展示的是字符串，然后提交到后臺服務(wù)器的則是字符串對應(yīng)的value類型的值的問題。
點擊表單的檔案組，彈出Picker選擇組件，選擇正確的值，填充到表單項，但是，提交到服務(wù)器去，需要提交對應(yīng)的id，而不是看到的字符串。
如何實現(xiàn)？
實現(xiàn)方式一：
定義兩個屬性，classId和className， 她兩是一 一對應(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ù)獲取到的是一個對象。
在這個函數(shù)內(nèi)，同時更新className和classId，保證他倆一 一對應(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;
},
這樣就可以了。用戶在表單中看到的是字符串，而提交給后臺的，則是與這個字符串一 一對應(yīng)的id值。
方式二：
van-field中依然還是使用value類型的值，只是需要給這個值，一個filter過濾器，轉(zhuǎn)換為正確的字符串顯示，但是提交給后臺的，卻是value類型的值，譬如id
以上這篇vue vant中picker組件的使用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文主要介紹了在Vue中使用的一些常見混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對代碼進(jìn)行加固,需要的可以參考下2023-12-12
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
在vue中使用cookie記住用戶上次選擇的實例(本次例子中為下拉框)
這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實例(本次例子中為下拉框)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
本文給大家分享了vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個功能，有這方便需要的朋友學(xué)習(xí)參考下吧。2018-01-01
vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項目中顯示SVG圖片的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了Vue.js實現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動態(tài)操作、排序、運算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強大，文中給大家提到了功能點,需要的朋友可以參考下2019-05-05
VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05