欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue vant中picker組件的使用

 更新時(shí)間:2020年11月03日 09:33:48   作者:月落星河°  
這篇文章主要介紹了vue vant中picker組件的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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é)

    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配置環(huán)境變量的正確打開(kāi)方式

    Vue配置環(huán)境變量的正確打開(kāi)方式

    這篇文章主要為大家介紹了Vue配置環(huán)境變量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-01-01
  • Vue中常見(jiàn)混淆用法匯總

    Vue中常見(jiàn)混淆用法匯總

    本文主要介紹了在Vue中使用的一些常見(jiàn)混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對(duì)代碼進(jìn)行加固,需要的可以參考下
    2023-12-12
  • vue指令以及dom操作詳解

    vue指令以及dom操作詳解

    本篇文章主要介紹了vue指令以及dom操作詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-03-03
  • 在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)

    在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)

    這篇文章主要介紹了在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面

    vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面

    本文給大家分享了vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面的一個(gè)功能,有這方便需要的朋友學(xué)習(xí)參考下吧。
    2018-01-01
  • vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)

    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實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
    2019-02-02
  • vxe-table vue table 表格組件功能

    vxe-table vue table 表格組件功能

    這篇文章主要介紹了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)代碼

    本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05

最新評(píng)論