之前开源过一个简单的https://blog.csdn.net/weixin_39168678/article/details/102457894#comments树形连线组件当时没做业务剥离而且也不能无限展开,现在优化了一下。
效果
源码
主要是递归lineItem,稍微有点基础的应该一看就明白,不明白的按照项目路径copy过去就可以用了
lineItem
<template>
<div class="tree_item_box">
<div
class="column-start-start linkLine_default"
v-for="(item,s_index) in list"
:key="s_index"
:class="{
'linkLine_first': s_index===0&list.length>1,
'linkLine_half_top': s_index===0&&list.length===1,
'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
'third_layer':!item.children,
'second_layer':item.children
}"
>
<div
class="row-flex-start basic_banner"
@click="itemClick(item)"
:class="{
'active_color': item.expand
}"
>
<div
v-if="item.children"
class="reTree_icon"
:style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
:class="{
'reTree_default_icon': item.children.length===0,
'reTree_collapse_icon': item.expand && item.children.length>0,
'reTree_expand_icon': !item.expand && item.children.length>0,
}"
></div>
<div
class="layer_text nowrap"
:class="{
'active_color': item.expand
}"
>{
{
item.label}}</div>
</div>
<line-item
:list="item.children"
v-on="$listeners"
:size="size"
v-if="item.expand&&item.children&&item.children.length>0"
></line-item>
</div>
</div>
</template>
<script>
export default {
name: "line-item",
props: {
list: {
type: Array,
default: () => {
return [];
}
},
size: {
type: Number,
default: 14
}
},
methods: {
itemClick(item) {
item.expand = !item.expand;
this.$emit("itemClick", item);
if (!item.children) {
this.$emit("valClick", item);
}
}
}
}