el-form에서 폼 동적 prop 검증

어느 날 요청이 들어왔습니다.페이지 데이터를 관리할 때 개별 필드 값은 다중 언어를 지원해야 합니다.전체 페이지 데이터는 한 부만 가능합니다
그래서 form에 대응하는 필드만 대상 형식으로 바꿀 수 있습니다

form: any = {
    name: "",
    url: "",
    title: {}
  };

위 코드에서 보듯이 타이틀 필드는 하나의 대상으로 각 언어에 대응하는 저장 필드를 넣을 준비를 하고 있다
그리고 언어는 동적으로 전환할 수 있기 때문에 저는 언어 변수currentLang으로만 쓸 수 있어요.

<el-form-item
  label="title"
  :prop="`title.${currentLang}`"
  :rules="rules.titleRule"
>
  <el-input
    size="small"
    v-model="form.title[currentLang]"
  ></el-input>
</el-form-item>

위의 prop 속성 값을 중점적으로 보면 form 아래의 검색 경로입니다. 예를 들어currentLang = "en-us", 그럼 prop은 "title.en-us"currentLang = "zh-cn"이고 prop은 "title입니다.zh-cn”
그리고 rules 제 코드는 사실...

rules = {
...
	titleRule: [
        {
          validator: this.titleValidate,
          trigger: "blur"
        }
      ]
}

//  
 titleValidate(rule, value, callback) {
   if (value) {
     ...
   } else {
     ...
   }
   callback();
 }

기본적으로 위의 문법에 따라 정상적인 검증 기능을 가질 수 있다.사실 이것에 따라form이 수조인 경우를 유추할 수 있는데, 단지 prop의 대상 경로를 수조의 읽기 경로로 바꾸면 된다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

element-ui 대화상자 기반el-dialog 초기화 검사 문제 해결

페이지를 새로 고치지 않고 el-dialog를 다시 열 때, rules나 어떤 값을 연결하려면required가 필요합니다. 자동으로 검사됩니다. 여러 개의 블로그를 살펴본 결과, 자주 사용하는 두 가지 해결 방법이 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

el-form에서 폼 동적 prop 검증

el-form에서 폼 동적 prop 검증

좋은 웹페이지 즐겨찾기