vue vant 에서 picker 구성 요소 사용
2807 단어 vuevantpicker 구성 요소
import { Picker } from 'vant'
2.사용
components: {
vanPicker: Picker,
}
<van-picker
show-toolbar
:columns="columns"
value-key="text"
/>
// vant text， value-key=" "，
this.columns = [
{
siteState: 1,
text: " "
},
{
siteState: 2,
text: " "
},
{
siteState: 3,
text: " "
},
{
siteState: 4,
text: " "
},
{
siteState: 5,
text: " "
}
];흔히 볼 수 있 는 수요:
폼 의 하 나 는 picker 컨트롤 에서 정확 한 값 을 선택 한 후 문자열 을 보 여 주 며 배경 서버 에 제출 하 는 것 은 문자열 에 대응 하 는 value 형식의 값 문제 입 니 다.
폼 의 파일 그룹 을 누 르 면 Picker 를 꺼 내 구성 요 소 를 선택 하고 정확 한 값 을 선택 하여 폼 항목 에 채 웁 니 다.단,서버 에 제출 하려 면 보 이 는 문자열 이 아 닌 해당 하 는 id 를 제출 해 야 합 니 다.
어떻게 실현 합 니까?
구현 방식 1:
두 속성 을 정의 합 니 다.classId 와 className,그녀 둘 은 일일이 대응 하 는 관계 입 니 다.
data() {
return {
classId: -1,
className: " ",
columns: [
{ text: ' ', value: -1 },
{ text: ' ', value: 0 },
{ text: ' ', value: 1 },
],
},
}
<van-field
readonly
clickable
name="picker"
:value="className"
label=" "
placeholder=""
@click="showClassPicker = true"
/>이 함수 에 서 는 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;
},방식 2:
van-field 에 서 는 여전히 value 형식의 값 을 사용 합 니 다.이 값,filter 필 터 를 올 바른 문자열 로 표시 해 야 하지만 배경 에 제출 한 값 은 value 형식의 값 입 니 다.예 를 들 어 id.
이상 의 vue vant 에서 picker 구성 요 소 를 사용 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
