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