前言
需求要实现不固定深度并且深度不同的的树状结构，寻找了很多的资料和控件都不是我所需要的，所以最终决定自己封装一个。记录一下过程同时分享出来希望可以帮助到需要的人，作为前端小新也希望各位大佬提出自己宝贵的意见共同成长哦~
上代码
一、控件封装
treeNodeCollaose控件
页面部分
<div :class="fatherLevel == true ? 'tree-node-collaose-con' : ''">
<van-collapse v-model="activeNames" :border="!fatherLevel" @change="changeEvent(node)">
<van-collapse-item
:name="node.id"
:title="node.name"
:title-class="fatherLevel == true ? 'van-collapse-item-title-father' : 'van-collapse-item-value-sub'"
:is-link="node.children ? true : false" >
<--如果有子节点继续循环 -->
<div v-if="node.children">
<tree-node v-for="(child, index) in node.children" :node="child" :father-level=false :key="index"></tree-node>
</div>
</van-collapse-item>
</van-collapse>
</div>
script部分
<script>
let that;
export default {
name: "treeNodeCollaose",
data(){
that = this;
return{
activeNames: []
}
},
props: {
node: Object, //树状结构对象
fatherLevel: Boolean, //是否是父级
},
components: {
TreeNode: () => import('./treeNodeCollaose.vue')
},
methods:{
changeEvent(node){
if (!node.children){
//todo 所选节点处理
}
},
}
}
</script>
<style scoped>
.tree-node-collaose-con{
margin-bottom: 10px;
}
.tree-node-collaose-con .van-collapse-item-title-father{
color: #222222;
font-size: 14px;
padding-bottom: 5px;
margin-top: 5px;
}
.tree-node-collaose-con .van-collapse-item-value-sub{
color: #666666;
font-size: 14px;
}
.tree-node-collaose-con .van-collapse-item__content{
padding: 0 0 0 20px!important;
}
</style>
node的结构
{
id: ’父级唯一id‘,
name:’父级名字‘,
children:{ //子树结构
id: ’子一级唯一id‘,
name:’子一级名字‘,
children:{……}
}
}
or
{
id: ’父级唯一id‘,
name:’父级名字‘
children:{ //子树结构
id: ’子一级唯一id‘,
name:’子一级名字‘
}
}
or
……
二、父级使用
<tree-node v-for="(node,index) in dataSource"
:node="node"
:father-level=true
:key="index">
</tree-node>
效果如下
