element 의 폼 요소 사용 총화

폼 요소 가 매우 많 습 니 다.여기 서 간단하게 정리 하면 저 는 제 방식 으로 주로 텍스트 상자 류,선택 류,다른 종류 로 나 눌 수 있 습 니 다.

텍스트 상자 클래스

선택 클래스

기타 클래스

TL;DR

시간 류 의 선택 기 는 입력 상자 의 디 스 플레이 스타일 과 값 형식 을 설정 할 수 있 고 속성 은 각각 format,value-format

입 니 다.

체크 상자 와 체크 상자,선택 한 속성의 label 값 은 model 의 값

입 니 다.

콤 보 상자 입 니 다.다 중 선택 이 라면 model 값 을 배열

로 설정 해 야 합 니 다.
텍스트 상자 클래스

여기 서 나 는 텍스트 상자 가 있 는 요 소 를 통일 적 으로 놓 았 다.주로 일반 텍스트 상자,암호 상자,문 본역,계수기,날짜 선택 기,자동 으로 텍스트 상 자 를 채 우 고 접두사 가 있 는 텍스트 상자 가 있 습 니 다.
일반 텍스트 상자:disabled 를 사용 하지 않 을 지,clearable 을 비 울 수 있 는 지,maxlength/minlength 문자 의 길이,show-ord-limit 디 스 플레이 글자 수 통계,prefix-icon/sufix-icon 의 맨 끝 에 있 는 디 스 플레이 아이콘,size 지정 입력 상자 의 크기(large small mini),

<el-input v-model="xx" placeholder="     " disabled clearable maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">

암호 상자:show-password 가 있어 야 합 니 다.

<el-input show-password v-model="xx" placeholder="     " >

텍스트 필드:type="textarea"가 있어 야 합 니 다.rows 제어 높이(숫자 에 주의 하 십시오.추가:),autosize 는 내용 에 따라 높이 를 스스로 조정 해 야 합 니 다(최소 줄 수 와 최대 줄 수 를 설정 할 수 있 습 니 다)

<el-inut type="textarea" v-model="xx" :rows="2" autosize>

계수기:표준 숫자 값 만 입력 할 수 있 고 편리 한 가감 숫자,min/max 제어 최대 최소 값,steps 제어 보폭

<el-input-number v-model="num" :min="1" :max="10" :steps="2"></el-input-number>

복합 형 입력 상자:선행 또는 사후 요소(slot)

  <el-input placeholder="     " v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>

입력 제안 이 있 는 입력 상자 입 니 다.복잡 하 니 다시 봐 야 합 니 다.el-autocomplete
날짜 선택 기
날짜 시간 선택 기
여기 서 특히 강조 하 는 것 은 입력 상자 에 표 시 된 형식(format)과 바 인 딩 값 의 형식(value-format)을 제어 할 수 있 습 니 다!!!!
여기 서 특히 강조 하 는 것 은 입력 상자 에 표 시 된 형식(format)과 바 인 딩 값 의 형식(value-format)을 제어 할 수 있 습 니 다!!!!
여기 서 특히 강조 하 는 것 은 입력 상자 에 표 시 된 형식(format)과 바 인 딩 값 의 형식(value-format)을 제어 할 수 있 습 니 다!!!!
년 은 yyy,월 은 MM,일 은 dd,시 는 HH,분 은 mm,초 는 ss,주 는 WW(주 선택 기 에 만 한정).통용 되 는 것 은 yyy-MM-dd HH:mm:ss 입 니 다.
주의 구덩이:

해 를 제외 하고 모두 한 개 로 한 자릿수 를 표시 할 때 0 을 보충 하지 않 는 다.

HH 는 24 시간 제,hh 는 12 시간 제!!!

value-format 는 특별한 timestamp 형식 이 있 고 format 는 A 형식(AM/PM)

이 있 습 니 다.

value-format 를 설정 하지 않 습 니 다.기본 값 은 이 Fri Oct 18 2019 11:27:54 GMT+0800(China Standard Time)입 니 다.보통 timestamp,13 비트

로 설정 합 니 다.

시작 과 끝 선택 값 은 배열

선택 한 종 류 는 다음 과 같 습 니 다.
시간 선택 기:picker-options 에서 선택 한 범 위 를 설정 합 니 다.

<el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="    ">

시작 과 끝 시간 선택 기:is-range 속성,align 정렬 방식,range-separator 구분자 가 있어 야 합 니 다.기본 값 은-,start-place holder 와 end-place holder 입 니 다.

<el-time-picker is-range v-model="value1" align="center" range-separator=" " start-placeholder="    " end-placeholder="    "></el-time-picker>

날짜 선택 기:type,제어 형식(date,week,month,year,dates)이 필요 합 니 다.

<el-date-picker type="date" v-model="value1" placeholder="    "> </el-date-picker>

시작 및 종료 날짜 선택 기:type,제어 유형(daterange,weekrange,monthlange,yearange)이 필요 합 니 다.

<el-date-picker v-model="value1" type="daterange" range-separator=" " start-placeholder="    " end-placeholder="    "> </el-date-picker>

날짜 시간 선택 기:type="datetime"

<el-date-picker type="datetime" v-model="value1" placeholder="      "> </el-date-picker>

시작 과 종료 날짜 시간 선택 기:type="datetime range"가 필요 합 니 다.default-time 은 기본 시간 을 설정 할 수 있 습 니 다.

<el-date-picker type="datetimerange" v-model="value1" range-separator=" " start-placeholder="    " end-placeholder="    "> </el-date-picker>

선택 클래스
모든 선택 클래스 의 폼 요 소 는 options 와 유사 한 옵션 이 있 습 니 다.model 의 값 과 옵션 의 속성 값 연결 에 주의 하 십시오.
option 기본 통 일 된 모드 는{label:'보 이 는',value:'백 스테이지 에 제출 하 는 값'}입 니 다.그런데 radio 와 chebox 가 이상 합 니 다.label 의 옵션 이 value 라 니,쓸 때 특히 주의 하 세 요!!
단일 선택 상자:model 바 인 딩 값 은 선택 항목 의 label 값 입 니 다.model 값 은 기본 항목 입 니 다.undefined 는 기본 항목 이 없습니다.border 에 테두리 가 있어 요.버튼 스타일 로 바 꾸 고 싶 으 면 엘 라 디 오-button.

  <!-- options: [{ value:1, label: '   ' }, { value:1, label: '   ' }] -->
  <el-radio-group v-model="radio">
    <el-radio v-for="item in options" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
  </el-radio-group>

체크 상자:model 의 값 은 두 가지 유형 이 있 습 니 다:Boolean 과 Array.Boolean 은 옵션 을 모두 선택 할 지 여부 입 니 다.Array 에 서 는 선택 한 label 값 이 배열 에 나타 납 니 다.indeterminate 가 true 일 때 는 부분 선택 을 표시 하여 전체 선택 효 과 를 실현 합 니 다.테두리
el-checkbox-group 태그,min 과 max 는 선택 항목 의 수량 을 표시 합 니 다.size 는 사이즈 이 고 el-checkbox-button 은 단추 형식 입 니 다.

<el-checkbox v-model="checked" indeterminate>  </el-checkbox>
  <el-checkbox-group v-model="checkList">
    <!-- options: [{ value:1, label: '   ' }, { value:1, label: '   ' }] -->
    <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>

드 롭 다운 상자:model 의 값 은 선택 한 option 의 value 값 입 니 다.disabled 설정 은 선택 할 수 없습니다.그룹 을 나 누 려 면 el-option-group,원 격 검색 및 항목 참조 홈 페이지 를 만들어 야 합 니 다.
el-select 설정 가능:clearable 비우 기,multiple 다 중 선택(다 중 선택 시 값 은 반드시 배열 이 어야 합 니 다),filter able 은 옵션 을 검색 할 수 있 습 니 다.
el-option 설정 가능:slot 설정 사용자 정의 스타일

  <!-- options: [{ value:1, label: '   ' }, { value:1, label: '   ' }] -->
  <el-select v-model="value" placeholder="   ">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
  </el-select>

직렬 드 롭 다운 상자:model 은 배열 이 고 색인 대응 단계 입 니 다.options 는 재 귀 모드([{value:1,label:bj',children:[{value:2,label:haidian]})와 유사 합 니 다.기본 트리거 방식 은 click 입 니 다.hover:props={expandTrigger:'hover'}이 가능 합 니 다.

<el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>

기타
스위치:model 값 은 Boolean 입 니 다.active-color 속성 과 inactive-color 속성 을 사용 하여 스위치 의 배경 색 을 설정 할 수 있 습 니 다.

<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>

슬라이더:기본 값 은 0-100 입 니 다.formatTooltip 으로 표 시 된 값 을 포맷 할 수 있 습 니 다.

<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

평 점,색깔,셔 틀,소 용 없어,쓸 때 얘 기 하 자~~
업로드:복잡 해 요.여 기 는 제 가 아 는 것 만 간단하게 나열 할 게 요.accept 업로드 파일 의 형식 을 제한 합 니 다.auto-uproad 가 자동 으로 업로드 할 지 여부,limit 업로드 수량,file-list 파일 이 표시 하 는 목록,list-type 이 표시 하 는 방식,on-exceeve 가 파일 수 를 초과 한 갈고리,on-change 파일 이 변 한 갈고리,on-remove 가 파일 을 제거 하 는 갈고리 입 니 다.갈고리 의 기본 매개 변 수 는 대부분 file,filelist 가 있 습 니 다.

file-list 는 일반적으로 computed 로 계산 해 야 할 수 있 습 니 다.편집 상태 에서 그림 링크 가 직접 있어 야 하기 때 문 입 니 다.

첫 번 째 파일 은 this.$refs.eventImage.uploadFiles[0].raw

를 통 해

검 사 를 할 때 file 의 값 저장 이 존재 하지 않 는 지 정확하게 판단 할 수 없 을 때 가 있 습 니 다.업로드 할 때마다 수 동 으로 규칙 을 설정 해 야 합 니 다.같은 그림 을 올 리 면 안 될 수 있 는 bug 는 올 릴 때마다 this.$refs[ref 명].value='

를 설정 해 야 합 니 다.

<el-upload ref="eventImage" accept="image/*" :auto-upload="false" action="" :limit="1" :file-list="fileListUploaded" list-type="picture-card" :on-exceed="exceedFile" :on-change="changeFile" :on-remove="removeImage" ></el-upload>

엘 리 먼 트 의 폼 요소 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 엘 리 먼 트 폼 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!