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)文章
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
Vue使用Vue Elements實(shí)現(xiàn)文件預(yù)覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗(yàn)越來越重要,而文件上傳和文件預(yù)覽是最常見的交互場(chǎng)景之一,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中使用 Vue Elements 來實(shí)現(xiàn)文件預(yù)覽的功能,包括基本使用方法、常見實(shí)例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下2025-01-01
使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08
本文主要介紹了element表格變化后自動(dòng)刷新的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)
這篇文章主要介紹了vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue返回上一頁面時(shí)回到原先滾動(dòng)的位置的方法
這篇文章主要介紹了vue返回上一頁面時(shí)回到原先滾動(dòng)的位置的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了關(guān)于vue中的rules表單驗(yàn)證(常用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue.js中的綁定樣式實(shí)現(xiàn)，展開的內(nèi)容呦style綁定樣式和綁定class樣式，具體相關(guān)內(nèi)容需要的小伙伴可以參考下面文章介紹2022-05-05
本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場(chǎng)景和具體用法,通過本文的介紹,我們可以看到,setup函數(shù)是用來將組件的狀態(tài)和行為進(jìn)行分離的一個(gè)重要工具,感興趣的朋友跟隨小編一起看看吧2024-11-11