vue Treeselect 드 롭 다운 트 리 는 N 급 요소 구현 코드 만 선택 할 수 있 습 니 다.
2885 단어 vueTreeselect낙엽수선택 하 다.
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>드 롭 다운 트 리 설정 에 직접 추가 해 보 았 는데 성공 하 였 습 니 다.
[알림]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;
}
}마지막 으로 el-tree 구성 요소 에 check-strictly="true"가 부자 가 서로 관련 되 지 않 는 방법 을 엄 격 히 따 르 는 지 잊 지 마 세 요.
이상 의 vue Treeselect 드 롭 다운 트 리 는 N 급 요소 만 선택 할 수 있 습 니 다.실현 코드 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
