vue vantのpickerコンポーネントの使用

1、導入する
import{Picker}from'vant'
2、使用する

 components: {
 vanPicker: Picker,
 }

3、レンダリング

 <van-picker
 show-toolbar
 :columns="columns"
 value-key="text"
 />

4、columnsに値をプッシュします。

 //    vant    text，         value-key="       "，      
 this.columns = [
  {
  siteState: 1,
  text: "    "
  },
  {
  siteState: 2,
  text: "    "
  },
  {
  siteState: 3,
  text: "     "
  },
  {
  siteState: 4,
  text: "     "
  },
  {
  siteState: 5,
  text: "  "
  }
 ];

補足知識：vant-uiのField入力ボックスとPickerを結合して使う時、正しいidタイプの値をどのように結び付けるかという問題。
ありふれた需要：
フォームの一つは、pickerコントロールから正しい値を選択する必要があります。文字列が表示され、バックグラウンドサーバに提出されるのは文字列に対応するvalueタイプの値です。

フォームのアーカイブグループをクリックして、Pickerの選択コンポーネントをイジェクトし、正しい値を選択してフォーム項目に記入しますが、サーバに提出するには、見た文字列よりも対応するIDを提出する必要があります。
どうやって実現しますか？
実現方式一：
二つの属性を定義して、クラスIIDとクラスNameは一つずつ対応する関係です。

data() {
 return {
 classId: -1,
 className: "  ",
 columns: [
 { text: '  ', value: -1 },
 { text: '   ', value: 0 },
 { text: '  ', value: 1 },
 ],
 },
}

van-fieldの中でクラスNameを結び付けます。

 <van-field
  readonly
  clickable
  name="picker"
  :value="className"
  label="   "
  placeholder=""
  @click="showClassPicker = true"
 />

そして、van-pickerにおいて、結合されたconfirm関数は、パラメータが取得されるのはオブジェクトです。
この関数では、classNameとclassindを同時に更新して、彼ら2人が1人ずつ対応することを保証します。

 <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;
 },

これでいいです。ユーザーがフォームで見たのは文字列で、バックグラウンドに提出したのはこの文字列に対応するID値です。
方式二:
van-fieldでは依然としてvalueタイプの値を使っていますが、この値、filterフィルタを与えて、正しい文字列に変換して表示します。しかし、バックグラウンドに提出するのはvalueタイプの値です。例えば、idです。
以上のこのvue vantの中でpickerのコンポーネントの使用は小编を使って皆さんにあげるすべての内容です。参考にしていただければと思います。どうぞよろしくお愿いします。