ElementUi 트리 구조에서 기본적으로 선택된 이벤트 해결 (완벽한 솔루션)

최근 ElementUi의 el-tree 구성 요소를 사용하여 선택 효과가있는 백그라운드 관리 시스템을 만들었습니다. 데이터를 수정할 때 원래 선택한 데이터를 트리 구조로 렌더링하고 데이터를 기본 확인해야합니다 .- 키의 데이터 배경에서 얻은 모든 데이터이므로 수정 작업을 수행 할 때 선택한 효과가 예상대로 반영되지 않습니다. 나중에 el-tree를 렌더링하기 전에 기본값을 가져와야한다는 것을 알게되었습니다. 체크 키, 그렇지 않으면 기본 선택된 상태가 렌더링되지 않습니다.

        <el-tree
                    v-if="isShowTree"
                    :data="zTree"
                    :props="defaultProps"
                    :default-checked-keys="defaultTree"
                    node-key="cDptCde"
                    ref="tree"
                    show-checkbox
                    @check-change="handledeptNodeClick"
                    class="div-border box-card">
            </el-tree>

그래서 저는 isShowTree 상태를 사용했습니다. 데이터 세부 정보를 얻고 기본 확인 키를 얻었을 때 isShowTree = true를 설정했습니다. props 속성을 사용하는 경우 데이터 데이터를 얻을 때까지 기다려야합니다. Render el-tree 즉, 데이터 데이터 && default-checked-keys 데이터를 동시에 가져와야 만 isShowTree를 설정할 수 있습니다. 그러면 선택한 효과로 트리 구조를 완벽하게 렌더링 할 수 있습니다. 해결할 수없는 문제가있는 경우 , 당신은 그것을 시도 할 수 있습니다. 사용하다

        computed: {
           /*从后台获取递归数据*/
            zTree() {
                return this.$store.getters.zTree.tree
            },
            /*是否展示机构数*/
            isShowTree(){
               // this.zTree.length --->如果leng>0,代表已获取到data的数据
               // this.isGetDetail--->如果isGetDetail为true，则说明已经获取到default-checked-keys的数据
                return this.zTree.length&&this.isGetDetail
            }