Element 에서 el-date-picker 구성 요소 가 재 충전 되 지 않 는 상황 을 해결 합 니 다.

1.문제 설명
우리 가 Element UI 구성 요 소 를 사용 하여 프로젝트 를 완성 할 때 이러한 요 구 를 만 날 수 있 습 니 다.예 를 들 어:
새 이 벤트 를 만 들 려 면 이벤트 의 시간 범 위 를 정의 해 야 합 니 다.
따라서 저 희 는 새 활동 의 작업 과정 에서 일정 시간 구간 과 활동 이름 등 정 보 를 선택 하여 제출 하고 새로 완성 해 야 합 니 다.
홈 페이지 에 새로 만 든 이벤트 가 나 왔 습 니 다.다른 사람들 이 상세 한 정 보 를 보고 싶 어서 페이지 를 열 었 는데 시간 구간 이 채 워 지지 않 았 습 니 다!

2.문제 분석
시간 정보 가 채 워 지지 않 았 습 니 다.먼저 배경 데이터 반환 상황 과 페이지 의 필드 정보 에 차이 가 있 는 지 등 세부 사항 을 확인 해 야 합 니 다.
만약 이상 의 상황 이 없다 면,그것 은 내 가 만난 이런 상황 이다.
백 엔 드 데이터 반환 에 차이 가 없고 페이지 필드 도 틀 리 지 않 으 며 다른 정보 도 정상적으로 재 작성 되 고 시간 만 재 작성 하지 않 으 며 한 번 의 재 작성 후속 재 작성 등 여러 가지 상황 도 수반 된다.요약 하면 페이지 와 데이터 가 일치 하지 않 습 니 다!
3.해결책
인쇄 해 보면 el-date-picker 구간 시간 구성 요소 의 데 이 터 는 사실 Array 입 니 다.

그래서 우 리 는 보통 배경 에서 데 이 터 를 받 은 후에 다음 과 같이 재 작성 작업 을 한다.

getDetails (obj){
 // form.daterange el-date-picker  v-model   
 this.form.daterange[0] = obj.startTime;
 this.form.daterange[1] = obj.endTime;
}

그러나 페이지 에 자주 표시 되 지 않 습 니 다.사실 우리 가 이렇게 하 는 것 도 문제 가 없습니다.이것 은 element UI 자체 에 존재 하 는 bug 입 니 다.날짜 만 구성 요 소 를 선택 하 는 것 이 문제 가 있 는 것 이 아니 라 가끔 드 롭 다운 상자 에 도 이런 현상 이 나타 날 수 있 습 니 다.그러나 우 리 는 조금 만 수정 하면 문제 가 없습니다.다음 과 같 습 니 다.

getData (obj) {
 this.form.daterange = [obj.startTime, obj.endTime]
}

이것 은 가장 간단 한 실현 이 고 다른 방법 도 가능 하 다.우리 의 수 요 를 실현 할 수 있다 면 가능 한 한 다른 방식 을 시도 할 수 있다.여기 서 일일이 열거 하지 않 는 다.
추가 지식:vue 에서 elementUI 의 드 롭 다운 상자(el-dropdown)를 사용 하여 이벤트 가 잘못된 해결 방안 을 추가 합 니 다.

이러한 방식 으로 사건 을 연결 하 는 것 이 무효 라 는 것 을 알 게 될 것 입 니 다.
올 바른 방식@click.native 바 인 딩 클릭 이벤트

이상 의 이 해결 Element 에서 el-date-picker 구성 요소 가 재 작성 되 지 않 는 상황 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 어 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.