vue treeselect 현재 선택 한 label 인 스 턴 스 가 져 오기

긴 말 안 할 게 요.그냥 코드 보 세 요~

<treeselect :placeholder="$t('taskManage.lockTask.selDeptId')"
               :options="deptTree"
               :normalizer="normalizer"
               v-model="formData.deptId"
               @select="selectDepart">
</treeselect>

//            
selectDepart(val) {
   console.log('selectDepart', val)
   this.formData.deptName = val.name
}

결 과 는 다음 과 같 습 니 다.현재 선택 한 항목 의 정 보 를 얻 을 수 있 습 니 다.

추가 지식:vue 에서 element-ui 트 리 컨트롤-트 리 노드 선택(현재 노드 를 선택 하여 현재 id 를 얻 고 부모 급 id 를 얻 습 니 다)
Element-ui 홈 페이지 에서 주 는 방법
getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); },
이 는 모든 하위 급 이 선 택 된 상태 에서 만 부모 급 id 를 얻 을 수 있 습 니 다.모든 하위 급 이 선택 되 지 않 으 면 가 져 온 id 는 하위 급 만 있 습 니 다.하지만 일반적으로 데 이 터 를 제출 할 때 백 엔 드 는 부모 id 가 필요 합 니 다.
두 가지 방법 으로 해결 할 수 있다.
1,항목 중의 ode 찾기modules\\element-ui\lib\\element-ui.common.js 파일
2.파일 에 있 는 TreeStore.prototype.getCheckedNodes 를 검색 하 는 방법 중

if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
     checkedNodes.push(child.data);
    }

3.

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
     checkedNodes.push(child.data);
    }

4.그리고 프로젝트 를 다시 시작 합 니 다.
console.log(this.$refs.tree.getCheckedKeys());부모 노드 의 ID 를 받 을 수 있 습 니 다.
두 번 째 방법:
코드:pid:xxx 가 있어 야 합 니 다.

 methods: {
   getCheckedNodes() {
    var rad=''
    var ridsa = this.$refs.tree.getCheckedKeys().join(',')//           [  ] -id,          
    var ridsb = this.$refs.tree.getCheckedNodes()//           {  }
    ridsb.forEach(ids=>{//          id
     rad+=','+ids.pid
    })
    rad=rad.substr(1) //         ','
    var rids=rad+','+ridsa
    var arr=rids.split(',')//          
    arr=[...new Set(arr)]; //     
    rids=arr.join(',')//          
    console.log(rids)
   }
  }

테스트 코드

<template>
 <div>
  <el-tree
 :data="data2"
 show-checkbox
 default-expand-all
 node-key="id"
 ref="tree"
 highlight-current
 :props="defaultProps">
</el-tree>

<div class="buttons">
 <el-button @click="getCheckedNodes">  </el-button>
 <el-button @click="resetChecked">  </el-button>
</div>
 </div>
 </template>
 <script>
 export default {
  methods: {
   getCheckedNodes() {
    var rad=''
    var ridsa = this.$refs.tree.getCheckedKeys().join(',')//           [  ] -id,          
    var ridsb = this.$refs.tree.getCheckedNodes()//           {  }
    ridsb.forEach(ids=>{//          id
     rad+=','+ids.pid
    })
    rad=rad.substr(1) //         ','
    var rids=rad+','+ridsa
    var arr=rids.split(',')//          
    arr=[...new Set(arr)]; //     
    rids=arr.join(',')//          
    console.log(rids)
   },
   resetChecked() {
    this.$refs.tree.setCheckedKeys([]);
   }
  },

  data() {
   return {
    data2: [{
     pid:0,
     path:xxxx,
     id: 1,
     label: '   1',
     children: [{
      pid:1,
      path:xxxx,
      id: 11,
      label: '   1-1'
     },
     {
      pid:1,
      path:xxxx,
      id: 12,
      label: '   1-2'
     },
     {
      pid:1,
      path:xxxx,
      id: 13,
      label: '   1-3'
     }]
    }],
    defaultProps: {
     children: 'children',
     label: 'label'
    }
   };
  }
 };
</script>
 </script>
 <style scoped>
 </style>

3 급 또는 다단 계 라면 응답 하 는 데이터 형식 은'path:xxxx'가 있어 야 부모 급 id 를 얻 을 수 있 습 니 다.
응답 하 는 데이터 형식

{
 "data": [
   {
     "id": 30,
     "path": xxxx,
     "children": [
       {
         "id": 101,
         "path": xxxx,
         "children": [
           {
             "id": 104,
             "path": xxxx,
             "children": [
               {
                 "id": 105,
                 "path": xxxx
               }
             ]
           }
         ]
       }
     ]
   }
 ],
 "meta": {
   "msg": "    ",
   "status": 200
 }
}

여 기 는 인용~
이 vue treeselect 에서 현재 선택 한 label 인 스 턴 스 를 가 져 오 는 것 은 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 할 수 있 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.