vue Treeselect 드 롭 다운 트 리 는 N 급 요소 구현 코드 만 선택 할 수 있 습 니 다.

오늘 프로젝트 에서 필요 한 것 이 있 습 니 다.바로 vue 드 롭 다운 트 리 는 세 번 째 옵션 만 선택 할 수 있 습 니 다.이 문 제 를 해결 하기 위해 공식 문 서 를 찾 아 보 았 습 니 다.
https://vue-treeselect.js.org/#disable-item-selection

그리고 isDisabled 속성 을 보면 선택 을 금지 할 수 있 습 니 다.구체 적 인 실현 코드 는 다음 과 같 습 니 다.

<treeselect 
  :disable-branch-nodes="true"
  :normalizer="normalizer" 
  v-model="formData.goodsTypeId" 
  :multiple="false" 
  :options="goodsType" 
  placeholder='   '>
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, 
   countClassName }">
     {{ node.label }}
  </label>
</treeselect>

어떻게 데이터 에 isDisabled 속성 을 추가 합 니까?
드 롭 다운 트 리 설정 에 직접 추가 해 보 았 는데 성공 하 였 습 니 다.
[알림]node 라 는 대상 이 포함 하 는 필드 를 인쇄 했 습 니 다.(이 데 이 터 는 배경 인터페이스 에서 제공 합 니 다)다음 그림 과 같 습 니 다.

[isLeaf]Y 는 잎 사 귀 노드 이 고 N 은 가지 노드[type:Level]제?등급

normalizer(node) {
  //  children=[] children  
  if(node.children && !node.children.length) {
   delete node.children;
  }
  if(node.isLeaf=='Y' && node.typeLevel!=3){
   node['isDisabled'] = true;
  }
  return {
   id: node.typeId,
   label: node.typeName,
   children: node.children,
  }       
},

보충 지식:Vue ElementUI 는 el-tree 를 사용 하여 잎 결점 만 허용 합 니 다.
el-tree 를 사용 할 때 여러 가지 기능 이 필요 합 니 다.el-tree 태그 에 show-checkbox 속성 을 추가 합 니 다.

그러면 가끔 이런 수 요 를 만 날 수 있 습 니 다.아버지 노드 는 더 이상 선택 하지 못 하 게 하고 많은 잎 을 선택 하여 점 을 만 들 수 있 습 니 다.그럼,이때 우 리 는 어떻게 바 꿀 까요?
디 버 깅 도구:

다 중 선택 상 자 는.el-checkbox 스타일 입 니 다.이 스타일 을 덮어 쓰 고 숨 기기 만 하면 됩 니 다.

/deep/ .el-tree-node{
   .is-leaf + .el-checkbox .el-checkbox__inner{
     display: inline-block;
   }
   .el-checkbox .el-checkbox__inner{
     display: none;
   }
 }

메모:/deep/는 강 한 관통 력 이 며,<<<<,현재 구성 요소 파일 에서 만 작 동 하 며,전체 페이지 스타일 을 바 꾸 지 않 습 니 다.
마지막 으로 el-tree 구성 요소 에 check-strictly="true"가 부자 가 서로 관련 되 지 않 는 방법 을 엄 격 히 따 르 는 지 잊 지 마 세 요.
이상 의 vue Treeselect 드 롭 다운 트 리 는 N 급 요소 만 선택 할 수 있 습 니 다.실현 코드 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.