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ī)開業(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文主要介紹了在Vue中使用的一些常見混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對(duì)代碼進(jìn)行加固,需要的可以參考下2023-12-12
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)
這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue實(shí)現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面
本文給大家分享了vue實(shí)現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個(gè)功能，有這方便需要的朋友學(xué)習(xí)參考下吧。2018-01-01
vue3+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-02
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下2019-05-05
VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05