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
//注意的點(diǎn)vant默認(rèn)的是text,如果你需要修改需要value-key="你要定義的名字",否則不會(huì)渲染 this.columns = [ { siteState: 1, text: "裝機(jī)開(kāi)業(yè)" }, { siteState: 2, text: "裝機(jī)停業(yè)" }, { siteState: 3, text: "未裝機(jī)開(kāi)業(yè)" }, { siteState: 4, text: "未裝機(jī)停業(yè)" }, { siteState: 5, text: "其他" } ];
補(bǔ)充知識(shí):vant-ui之Field輸入框和Picker結(jié)合使用時(shí),如何綁定正確的id類型的值的問(wèn)題。
很常見(jiàn)的需求:
表單中的一項(xiàng),需要從picker控件中選擇正確的值后,展示的是字符串,然后提交到后臺(tái)服務(wù)器的則是字符串對(duì)應(yīng)的value類型的值的問(wèn)題。
點(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過(guò)濾器,轉(zhuǎn)換為正確的字符串顯示,但是提交給后臺(tái)的,卻是value類型的值,譬如id
以上這篇vue vant中picker組件的使用就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui upload組件上傳文件類型限制問(wèn)題小結(jié)
最近我遇到這樣的問(wèn)題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過(guò)濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問(wèn)題小結(jié),感興趣的朋友一起看看吧2024-02-02在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)
這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
本文給大家分享了vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面的一個(gè)功能,有這方便需要的朋友學(xué)習(xí)參考下吧。2018-01-01vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)
vite-plugin-svg-icons是一個(gè)Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05