Vue3에서 el-tree-select에 대해 역선택을 설정할 수 없는 문제를 해결하는 방법은 무엇입니까?

　환경: Vue3.2, Element Plus

　문제: 하위 구성 요소 설정.vue => 팝업 구성 요소 대화 상자 => 트리 선택 구성 요소 el-tree-select, 기본 선택 항목을 기본 확인 키로 설정할 수 없습니다

　 시나리오 : 백엔드 시스템 목록 페이지에서 데이터 행을 선택하고 설정 버튼을 클릭한 후 일부 기능을 할당합니다. 여기서 접근 방식은 설정 페이지를 하위 구성 요소에 캡슐화하고 하위 구성 요소에서 Element Plus의 Dialog 구성 요소를 사용하는 것입니다.                            ' ' s 엘의 ' ' s ' s ' s ' s 엘-트리의 '' el-tree-s-t-s-t-o-c t t t t t o 할당하기 전에 할당할 수도 있기 때문에 초기화를 해야 합니다. 단, 역선택을 설정해야 합니다

　처음에는 다음과 같이 직접 작성했습니다.

<template>
  <el-tree-select

　　 :data=" store().UserMenus"

:default-expanded-keys="['xxxxxxxx']" 
  />
</template>

　 그러다가 적용되지 않는 것을 발견했습니다. 금요일에 이유를 짐작할 수 있었는데, 데이터 바인딩은 pinia 전역 상태의 값입니다. 이 값은 컴포넌트 인스턴스화 시 로드되지 않았을 수 있으며, 따라서 기본 확장 키가 설정되면 노드 데이터를 찾을 수 없습니다. 구성 요소가 생성된 후 데이터에 값이 있지만 기본 확장 키는 다시 재설정되지 않아 구성 요소에 드롭다운이 표시됩니다. 하지만 역선택 효과는 없습니다.

처음에는 단순한 문제인 줄 알고 생각하다가 순서와 관련이 있다보니 자연스럽게 Life Cycle을 고려하게 되었고, 그래서 settings.vue에 onMounted를 추가하고 여기에 다시 할당했습니다.

// script ts
const list = ref()
const selectArr = ref([])
onMounted(() => {
　　list.value = store().UserMenus
　　selectArr.value = ['xxxxxxxx']
})
 
// setting.vue
<template>
  <el-tree-select 
　　　 :data="list"
    :default-expanded-keys="selectArr" 
  />

　 데이터 바인딩 목록 변수, 기본 확장 키는 selectArr을 바인딩합니다. 뭐, 괜찮다고 생각했는데, 결국 역선거는 성공하지 못했습니다. 그냥.. 터무니없어요~

보통 onMounted 함수는 이미 컴포넌트 생성을 완료하고 Dom을 생성한 상태인데 이때는 리스트의 값을 설정한 후 selectArr을 설정할 수 있어야 합니다. 그러나 현실적으로는 여전히 역선이 성공하지 못했다.

　이것은 여전히 ​​로딩에 문제가 있음을 보여줍니다. 연구 정신으로 setCheckedKeys 메소드인 el-tree-select의 API를 호출하여 기본값을 설정할 수 있다는 것을 알았습니다.

　 템플릿 참조를 통해 el-tree-select를 가져오고 이름을 tree로 지정한 다음 onMounted로 돌아가서 인쇄합니다: console.log(tree.value), 좋은 친구, 정의되지 않았습니다. 이는 settings.vue의 onMounted가 다음과 같다는 것을 보여줍니다. 전혀 그렇지 않습니다. 선택한 키를 설정할 수 없습니다. 그런데 이상한 점은 코드를 반복적으로 수정하면 핫 리로딩으로 인해 Vue 페이지가 그에 따라 업데이트되고 실제로 선택된다는 것입니다! 그런데 새로 고치자마자 역선택이 즉시 무효화되었습니다. enmmmm ..... 기본적으로 문제를 찾을 수 있습니다. OnMounted가 구성 요소를 얻을 수 없습니다. 나중에 onUnmounted를 시도하여 작동하는 것을 확인했지만 이는 내 초기화 논리이므로 onUnmounted에 쓸 수 없습니다.

이 문제를 일으키는 또 다른 요인은 Dialog가 기본적으로 표시되지 않는다는 것입니다. v-model="dialogVisible"에 바인딩된 변수를 통해 표시 및 숨김이 제어됩니다. 실패 이유, 예를 들어 처음에DialogVisible.value=true로 설정했기 때문에 역선택은 괜찮지만 여전히 true로 설정할 수 없어서 처음에 팝업 창이 표시되지 않습니다.

기본적으로 금요일 오후에 이곳에 갇혀 있었습니다. 주말 동안 휴식을 취한 후(캐니언 티미) 월요일 아침 출근길에 검토하고 Dialog 자체에서 답변을 찾아보기로 했습니다. 메소드는 API에서 개방형이며 Dialog는 애니메이션이 끝날 때 콜백을 열고 여기서 초기화를 수행하면 문제가 해결됩니다.

// Dialog
@opened="opened"

// script ts 
const opened = () => {
     selectArr.value = ['xxxxxxxx']
}

이 아이디어를 찾을 수 있는 또 다른 이유는 다음 형식도 시도했기 때문입니다. . 이전에는 양식의 제출 이벤트에서 항상 가능했지만, onMounted에서 얻을 수 있는지 확인하려고 했습니다. 버튼을 넣으면 버튼의 클릭 이벤트에서 구성 요소를 가져올 수 있습니다. 버튼을 클릭할 때 페이지의 모든 내용이 로드되기 때문입니다. 마찬가지로 대화 상자 열기 애니메이션이 끝날 때 콜백에서 페이지가 로드되어야 합니다. 이제 모든 값이 존재하므로 이때 초기화 과정에서 키를 찾지 못하는 문제는 없을 것입니다.

아아아아

위 내용은 Vue3에서 el-tree-select에 대해 역선택을 설정할 수 없는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!