vue 구성 요소 가로 트 리 구현 코드
코드:
<template>
<div class="tree">
<ul v-if="treeData && treeData.length">
<li v-for="(column,index) in treeData">
<span class="root">{{column.name}}</span>
<ul v-if="column.children && column.children.length">
<li v-for="(childrenColumn,index) in column.children">
<span>{{childrenColumn.name}}</span>
<ul v-if="childrenColumn.children && childrenColumn.children.length">
<li v-for="(grandChildrenColumn,index) in childrenColumn.children">
<span>{{grandChildrenColumn.name}}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'transverseTree',
props: {
treeData:{
type:Array,
default:[]
}
},
methods: {
editDom(){
if($('.root').siblings('ul').children('li').length==1){
let num = 26*($('.root').siblings('ul').children('li').find('li').length-1);
$('.root').css({ 'top': num });
$('.root').siblings('ul').children('li').css({ 'top': num });
$('.root').siblings('ul').find('ul').css({ 'top': -num });
if($('.root').siblings('ul').find('li').length > 1){
$('.root').siblings('ul').children('li').children('span').addClass('hasChild');
}
}else{
$('.root').css({ 'top': 26 * ($('.root').siblings('ul').children('li').length - 1) });
}
}
},
mounted() {
this.$nextTick(()=>{
this.editDom();
});
}
};
</script>
<style scope>
.tree{
position: relative;
margin: -16px -16px 0;
min-height: 400px;
padding-left: 11px;
overflow: auto;
}
.tree ul{
width: 210px;
height: 100%;
position: absolute;
}
.tree ul ul{
left: 226px;
top: 0;
}
.tree li{
float: left;
list-style-type: none;
position: relative;
padding: 16px 5px 0 5px;
}
.tree li span{
position: relative;
display: inline-block;
width: 200px;
height: 36px;
background: #F0F0F5;
border-radius: 4px;
text-decoration: none;
color: #2D2D2D;
font-size: 14px;
line-height: 36px;
text-align: center;
}
.tree li::before{
box-sizing:inherit;
content: '';
position: absolute;
top: 33px;
left: -7px;
border-top: 2px solid #D2D2D7;
width: 12px;
}
.tree li::after{
box-sizing:inherit;
content: '';
position: absolute;
top: 8px;
left: -9px;
height: 100%;
border-left: 2px solid #D2D2D7;
}
.tree li:first-child::after{
height: 51%;
border-left: 2px solid #D2D2D7;
border-top: 2px solid #D2D2D7;
top: 33px;
width: 1px;
border-top-left-radius: 4px;
}
.tree li:last-child::after{
height: 25px;
border-left: 2px solid #D2D2D7;
border-bottom: 2px solid #D2D2D7;
top: 8px;
width: 1px;
border-bottom-left-radius: 4px;
}
.tree li:only-child::after,
.tree li:only-child::before{
display: none;
}
.tree ul ul li:only-child::before{
display: inline-block;
}
.tree ul ul li:only-child span::before{
display: inline-block;
}
.tree li:only-child span.root::before,.tree li:only-child span.hasChild::before{
content: '';
position: absolute;
top: 17px;
right: -14px;
border-top: 2px solid #D2D2D7;
width: 14px;
}
.tree ul ul ul li:only-child span::before{
content: '';
position: absolute;
top: 17px;
left: -26px;
border-top: 2px solid #D2D2D7;
width: 26px;
}
</style>
부모 구성 요소 에서 import 를 사용 하여 이 구성 요 소 를 도입 합 니 다:
import transverseTree from './transverseTree'
등록 구성 요소:
components: { ifbpInfolistCard,transverseTree },
template 에서 사용:
<transverse-tree :treeData='treeData'></transverse-tree>
그 중에서 treeData 는 하나의 배열 로 data 에서 treeData 에 초기 값 을 줍 니 다.
treeData: [
{name:' 1',
children:[
{name:' 1',
children:[
{name:' 1'}
]},
{name:' 2',
children:[
{name:' 1'}
]},
{name:' 3',
children:[
{name:' 1'}
]},
]}
]
구현 효과:ps:특별한 설명 이 필요 한 것 은 현재 제 코드 는 이 두 가지 스타일 만 지원 합 니 다.즉,:
1.부모 노드-1 자 노드-1/다 손 노드 또는 1 부 노드-다 자 노드-1 손 노드,양식 은 jq 를 통 해 판단 하고 수정 한 것 이다.나중에 시간 이 있 으 면 최적화 연 구 를 해서 재 활용 성 이 강하 도록 한다.모두 에 게 도움 이 되 기 를 바 랍 니 다.
총결산
위 에서 말 한 것 은 작은 편집 이 여러분 에 게 소개 한 vue 구성 요소 의 가로 트 리 실현 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.작은 편집 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.