element-ui cascader cascade selector, 객체 객체 가져오기(getCheckedNodes(), currentLabels)

element-ui의 cascading cascading selector는 공식 웹사이트 문서에서 현재 선택된 Object를 직접 가져오는 방법을 제공하지 않고 있으며, 여기서 element-ui의 버전에 특별한 주의를 기울여야 합니다.

버전 2.7.0 이전

this.$refs['cascader'].currentLabels를 사용하여 선택한 노드를 가져올 수 있습니다.

<el-cascader ref="groupList" :options="checkGroup" v-model="addForm.plot_group" @change="handleChange" :filterable="true" style="width: 100%" />   

//노드 레이블 내용 가져오기

   handleChange(value) {
    
    
      let nodesInfo = this.$refs["groupList"].currentLabels;
    },

설치된 element-ui 버전이 2.7.0보다 높기 때문에 currentLabels에서 얻은 노드 콘텐츠의 스크린샷이 없습니다.

버전 2.7.0 이상

this.$refs['cascader'].getCheckedNodes()를 사용하여 확인된 노드를 가져올 수 있습니다. currentLabels는 버전 2.7에서 제거되었습니다.

<el-cascader ref="groupList" :options="checkGroup" v-model="addForm.plot_group" @change="handleChange" :filterable="true" style="width: 100%" />   

// 선택한 노드의 모든 내용 가져오기

   handleChange(value) {
    
    
      let nodesInfo = this.$refs["groupList"].getCheckedNodes();
    },

//선택한 노드의 마지막 레벨 콘텐츠 가져오기(예: 라벨 가져오기)

   handleChange(value) {
    
    
      let nodesInfo = this.$refs["groupList"].getCheckedNodes()[0].label;
    },