vue 树结构,vue实现树形结构
这篇文章主要为大家详细介绍了某视频剪辑软件开发树形结构组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件开发树形结构组件的具体代码，供大家参考，具体内容如下
需求
一个页面，要显示商品分类，同时每个分类下面还拥有若干子类，子类也可以有子类。
要实现全选单选，子类被逐个全选父类也要标记选中。
第一反应就是树形结构，和递归调用。曾经在做数据绑定时记得有现成的组件，也学着写过对应的后台。这次我要自己写一个前端的组件了。
这只是我自己花了点时间写的一个某视频剪辑软件组件，尚可优化及拓展。仅此与大家分享一下。
效果
实现
模板
div id=TreeMenu
div v-for=(node，index)in nodes :class= { tree menu-row-border-bottom :深度}
div class=TreeMenu-row
树菜单-行-选择“src=”./assets/img/MembersPriceActivity/selected。png @ click= select node(0，node) v-show=node .IsSelected/
树菜单-行-选择“src=”./assets/img/MembersPriceActivity/select。png @ click= select node(1，node) v-show=！节点. IsSelected/
tree menu-row-first div :class= { tree menu-row-border-bottom :node .ChildTypeListnode。已展开} @ click=展开节点(！idspnonenote)。节点 IsExpanded，node)
标签v-text=节点。名称/标签
树菜单-行-箭头 src=./assets/img/MembersPriceActivity/top。png v-if=节点ChildTypeList v-show=！节点。扩展
树菜单-行-箭头 src=./assets/img/MembersPriceActivity/down。png v-if=节点子类型列表“v-show=”节点。扩展
/div
TreeMenu :nodes=node .子类型列表:父索引=索引:深度=深度1 v-on:selectFatherNode= selectFatherNode v-if= node .ChildTypeList v-show=！节点IsExpanded/TreeMenu
/div
/div
/div
/模板
js:
脚本
导出默认值{
名称：“TreeMenu”，
data () {
返回{
商品类型：{
ID: ，
ParentID:" "，
名称： ,
代码： ,
级别：0,
空值，
ChildTypeList: []
}
}
},
道具：{
节点：{
类型：数组，
默认值：()={
return []
}
},
父索引：{
类型：数量，
默认值：0
},
深度：{
类型：数量，
默认值：0
}
},
观察：{},
已创建(){},
已安装(){},
已销毁(){},
方法：{
//选中/取消当前节点
selectNode (choice，node) {
节点IsSelected=选择
这个。selectchildreNode(选择，节点.ChildTypeList [])
这个. emit(selectFatherNode ，choice，this.fatherIndex，this。节点。every((node)={返回节点.IsSelected===choice }))
},
//子节点修改选中状态
选择儿童节点(选择，节点，自身){
let _self=self 这个
nodes.forEach((node)={ node .IsSelected=choice_ self。selectchildreNode(选择，节点.ChildTypeList []，_self) })
},
//作为父级节点检查是否需要修改选中状态（仅用于子节点调用)
selectFatherNode (choice，index，childrenState) {
如果（选择){
//若其[索引]节点下子节点均为被选中状态，该[索引]节点就应该被选中
if (childrenState) {
this.nodes[index].IsSelected=选择
这个. emit(selectFatherNode ，choice，this.fatherIndex，this。节点。every((node)={返回节点.IsSelected===choice }))
}
}否则{
//若其[索引]节点下子节点有未被选中状态的，该[索引]节点就应该未选中
this.nodes[index].IsSelected=选择
这个emit(selectFatherNode ，choice，this.fatherIndex，false)
}
},
//展开/收起当前节点
expandNode (choice，node) {
节点IsExpanded=。选择
如果(!选择){
this.expandChildrenNode(choice，Node .子类型列表)
}
},
//子节点收起
expandChildrenNode (choice，nodes，self) {
let _self=self 这个
nodes.forEach((node)={ node .IsExpanded=choice_ self。expandchildrenNode(choice，Node .ChildTypeList []，_self) })
}
}
}
/脚本
CSS:
样式lang=scss 范围
#TreeMenu {。TreeMenu-row{
左边距：30px
字号：15px
填充：12px 0 0
}。TreeMenu-row-firstdiv{
高度：32px
左边距：30px
}。树形菜单-行-箭头{
浮动：对；
右边距：15px
宽度：13px
}。树形菜单-行选择{
浮动：左；
宽度：18px
垂直对齐：文本底部；
}。树形菜单-行-边框-底部{
边框-底部：实心1px # e6e6e6
}。树形菜单-行-边框-顶部{
边框-顶部：实心1px # e6e6e6
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。