element-ui 의 드 롭 다운 상자 가 값 이 있 지만 선택 할 수 없 는 상황 을 해결 합 니 다.

질문 설명:
Vue 프레임 워 크 와 element-ui 를 사용 하여 개발 할 때 드 롭 다운 상자 에 문제 가 생 겼 습 니 다.함수 에서 페이지 의 특정한 값 을 바 꾸 었 습 니 다.함수 에서 보 는 것 은 수정 에 성 공 했 지만 페이지 에서 변 경 된 값 을 제때에 새로 고치 지 않 았 습 니 다.즉,드 롭 다운 상자 값 을 선택 할 수 없습니다.(몽 당 몽 당
코드 세그먼트:

<el-select v-model="value" placeholder="   " @change="change()">
   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

해결 방법:
이 문제 가 발생 한 것 은 드 롭 다운 상자 데 이 터 는 다른 인 터 페 이 스 를 순환 해서 얻 은 것 같 습 니 다.데이터 차원 이 너무 많 기 때문에 render 함수 가 자동 으로 업데이트 되 지 않 았 습 니 다.수 동 으로 강제로 새로 고침 해 야 하기 때문에 저 는 직접 값 을 강제로 새로 고침 했 습 니 다.forceUpdate 는 다시 render 입 니 다.
select 의 change 이벤트 에서 이 방법 을 사용 하여 this.$forceUpdate()를 사용 하여 강제로 새로 고침 하고 페이지 의 정상 적 인 값 을 선택 하 는 방법 을 쓰 십시오.

 change(){
   this.$forceUpdate()
 },

소결:
마찬가지 로 forceUpdate()이 방법 도 깊 은 구성 요소 state 가 바 뀌 었 을 때 이 구성 요소 에서 호출 하여 페이지 v-for 에서 item 속성 값 을 수정 한 후 페이지 값 이 바 뀌 지 않 는 문 제 를 해결 할 수 있 습 니 다.
추가 지식:element ui select 다 중 선택 드 롭 다운 상 자 를 해결 합 니 다.폼 기록 을 편집 할 때 데 이 터 를 표시 하지 않 습 니 다.기본적으로 선택 한 문제 입 니 다.
전단 에 vue 를 사용 합 니 다.프로젝트 에 서 는 element ui 구성 요 소 를 사용 합 니 다.select 드 롭 다운 상 자 를 많이 선택 할 때 기록 을 추가 할 때 select 드 롭 다운 상 자 를 많이 선택 하여 정상적으로 사용 합 니 다.문제 없습니다.그러나 기록 을 편집 할 때 편집 인터페이스 도 select 드 롭 다운 상자 에 값 을 부 여 했 지만 데 이 터 를 표시 하지 않 았 다.
먼저 select 를 놓 고 드 롭 다운 상 자 를 선택 하여 편집 할 때 데 이 터 를 올 바 르 게 불 러 오 는 디 스 플레이 효과 그림 을 보 여 줍 니 다.

드 롭 다운 상자 코드 는 다음 과 같 습 니 다:

<el-form-item prop="czfaIds" label="    ">
 <el-select v-model="form.czfaIds" multiple style="width:80%;" placeholder="   " clearable :disabled="showControl">
   <el-option
       v-for="item in czfas" 
       :key="item.value"
       :label="item.wsdFamc" 
       :value="item.id" 
    />
  </el-select>
</el-form-item>

드 롭 다운 상자 의 데이터 원본 czfas 는 배열 이 고 선택 한 값 도 배열 입 니 다.그러나 백 엔 드 에 저장 할 때 문자열 로 데이터베이스 에 저장 되 기 때문에 편집 인터페이스 에서 백 엔 드 에서 가 져 온 반환 값 은 문자열 입 니 다.이 문자열 을 배열 로 변환 하여 selection 의 v-model 속성 에 연결 하 는 것 이 좋 습 니 다.
코드 는 다음 과 같 습 니 다:

  //   
  queryEditRow(index, row) {
   this.titleInfo = '  '
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   //          ，   select   v-model   
   this.form.czfaIds = row.czfaIds.split(',')

   this.showbtn = true
   this.showControl = false
  },

그러나 문제 가 있 습 니 다.선택 한 프로젝트 의 id 값 을 표시 하고 선택 한 옵션 을 선택 하지 않 았 습 니 다.
다음 그림:

분석:select 선택 기 가 데이터 에 대한 표 시 는 select 드 롭 다운 상자 데이터 원본 에 대응 하 는 value 값 과 일치 할 때 해당 하 는 label 을 표시 합 니 다.일치 하지 않 으 면 이 value 를 표시 합 니 다.
드 롭 다운 상자 에 있 는 value 값 과 일치 하지 않 기 때문에 이 필드 의 값 을 직접 표시 합 니 다.
브 라 우 저 콘 솔 에서 데이터 원본 을 출력 하 는 데이터:

브 라 우 저 콘 솔 에서 출력 한 문자열 을 배열 로 변환 한 값:

select 드 롭 다운 상자 의 id 와 v-mode 에 연 결 된 id 의 데이터 형식 이 일치 하지 않 습 니 다.데이터 의 값 은 같 지만 하 나 는 문자열 이 고 하 나 는 정형 수치 입 니 다.백 엔 드 에서 돌아 오 는 문자열 을 배열 로 변환 할 때 성형 배열 로 변환 하고 드 롭 다운 상 자 를 정확하게 표시 합 니 다.
코드 는 다음 과 같 습 니 다:

  //   
  queryEditRow(index, row) {
   this.titleInfo = '  '
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   //          ，        
   var arrStringCzfaIds = row.czfaIds.split(',')
   //              Number，        
   var arrIntCzfaIds = []
   for (var arrInt in arrStringCzfaIds) {
    arrIntCzfaIds.push(parseInt(arrStringCzfaIds[arrInt]))
   }
   //    Number  ，   select   v-model 
   this.form.czfaIds = arrIntCzfaIds

   this.showbtn = true
   this.showControl = false
  },

이때 나타 난 효 과 는 바로 본 고의 시작 효과 이다.
이상 의 element-ui 를 해결 하 는 드 롭 다운 상자 가 값 이 있 지만 선택 할 수 없 는 상황 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.