vue vant 에서 picker 구성 요소 사용

1.도입
import { Picker } from 'vant'
2.사용

 components: {
 vanPicker: Picker,
 }

3.렌 더 링

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

4,columns 에 값 push

 //    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 를 제출 해 야 합 니 다.
어떻게 실현 합 니까?
구현 방식 1:
두 속성 을 정의 합 니 다.classId 와 className,그녀 둘 은 일일이 대응 하 는 관계 입 니 다.

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 함수,매개 변 수 는 대상 을 가 져 옵 니 다.
이 함수 에 서 는 className 과 classId 를 동시에 업데이트 하여 둘 이 일일이 대응 할 수 있 도록 합 니 다.

 <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 값 입 니 다.
방식 2:
van-field 에 서 는 여전히 value 형식의 값 을 사용 합 니 다.이 값,filter 필 터 를 올 바른 문자열 로 표시 해 야 하지만 배경 에 제출 한 값 은 value 형식의 값 입 니 다.예 를 들 어 id.
이상 의 vue vant 에서 picker 구성 요 소 를 사용 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.