vue 树结构,vue树结构自定义树节点内容
这篇文章主要为大家详细介绍了某视频剪辑软件实现目录树结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现目录树结构的具体代码，供大家参考，具体内容如下
效果图
代码
组件部分components/leftTree.vue
模板
差异
ul class=所有列表
li v-for=(item，i) in list :key=item.key
！-安特的双击功能这个看个人需求，不需要的话把div class=tree-item expend/div 提取出来就可以了-
下拉菜单：trigger=[上下文菜单]
菜单槽=覆盖
菜单项键=1
打开文件
/a-菜单项
菜单项键=2
新建文件
/a-菜单项
菜单项键=3
保存
/a-菜单项
菜单项键=4
删除
/a-菜单项
/a-菜单
div class=树项目支出
差异
v-if= item。icon=== file item。icon=== openfile
class=icon-size
:class=
openArr.includes(i)？缩减图标:扩展图标
@click=切换一
/div
i v-if=item.icon===file
img src=./assets/file.png
//我
i v-if=item.icon===openfile
img src=./assets/openfile.png
//我
i v-if=item.icon===vue
img src=./assets/Vue.png
//我
i v-if=item.icon===js
img src=./assets/js.png
//我
i v-if=item.icon===react
img src=./assets/React.png
//我
i v-if=item.icon===sass
img src=./assets/Sass.png
//我
i v-if=item.icon===vim
img src=./assets/vimeo.png
//我
i v-if=item.icon===ts
img src=./assets/ts.png
//我
i v-if=item.icon===php
img src=./assets/php.png
//我
i v-if=item.icon===less
img src=./assets/less.png
//我
i v-if=item.icon===java
img src=./assets/java.png
//我
i v-if=item.icon===c
img src=./assets/c .png
//我
i v-if=item.icon===减价
img src=./assets/markdown.png
//我
i v-if=item.icon===py
img src=./assets/py.png
//我
i v-if=item.icon===go
img src=./assets/go.png
//我
span class= content @ click= change active(item，i){{
项目。标题
} span
/div
/a-下拉列表
！-递归-
差异
v-show=openArr.includes(i)
v-if= item。儿童项目。孩子。长度
左树class= item :list= item。子树/左树
/div
/李
/ul
/div
/模板
脚本
导出默认值{
名称："左树",
data() {
返回{
openArr: []，
checkboxIds: []，
};
},
道具：{
列表：{
类型：数组，
},
},
方法：{
切换{
if (this.openArr.includes(i)) {
设指数=这个。打开arr。指数(一)；
this.openArr.splice(索引，1);
}否则{
这个。打开arr。推(一)；
}
},
变更活动(项目，i) {
如果(!item.children) {
if (item.icon===file) {
这个。切换(一)；
item.icon= openfile
} else if(项。icon=== openfile ){
这个。切换(一)；
item.icon= file
}否则{
警报(最后一个文件);
}
}否则{
if (item.icon===file) {
这个。切换(一)；
item.icon= openfile
} else if(项。icon=== openfile ){
这个。切换(一)；
item.icon= file
}
}
},
},
};
/脚本
style lang=less 范围
我{
行高：0;
img {
宽度：16px
高度：16px
}
}。项目{
左填充：4px
}。粗体{
字体粗细：粗体；
}
ul {
行高：1.5厘米；
列表样式类型：无；
空白：nowrap
位置：相对；
}
李{
列表样式类型：无；
填充：4px
用户选择：无；
}。树项目{
显示器：flex
对齐-项目：居中；
}。花费{
位置：相对；
}。花费：在{
内容："";
位置：绝对；
宽度：6px
左：9px
top:10px；
上边框：1px虚线# c3c5c8
}。所有-列表：之前{
内容："";
位置：绝对；
宽度：1px
高度：calc(100%-40px)；
左：48px
top:20px；
左边边框：1px虚线# c3c5c8
}。项目。花费：在{
内容："";
位置：绝对；
宽度：6px
左：-11px；
top:10px；
上边框：1px虚线# c3c5c8
}。项目。所有-列表：之前{
内容："";
位置：绝对；
宽度：1px
高度：calc(100%-12px)；
左：20px
top:0；
左边边框：1px虚线# c3c5c8
}。项目ul {
左填充：2em
}。内容{
左填充：4px
过渡：全0.2秒线性；
：悬停{
背景：# C3 C5 c8；
}
}。间距{
显示：内嵌-块；
宽度：18.5像素
身高：1em
}。图标大小{
显示：内嵌-块；
宽度：16px
高度：16px
右边距：4px
}。扩展图标{
背景：url(./assets/plus . png’)无重复中心；
背景-尺寸：封面；
宽度：9px
高度：9px
}。缩小图标{
背景：url(./assets/minus.png )无重复中心；
背景-尺寸：封面；
宽度：9px
高度：9px
}。表示“反”下拉菜单{
宽度：180像素
背景：# 353b44
李{
颜色：# fff
填充：2px 10px
：悬停{
背景：rgb(13，89，175)；
}
}
}
/风格
引用区域views/home.vue
模板
div class=home
树：list=line /
/div
/模板
脚本
从" @/components/leftTree.vue "导入树；
导出默认值{
姓名：家，
组件：{
树，
},
data() {
返回{
行：[
{
标题："项目",
类型：1,
键："1",
图标："文件",
儿童：[
{
标题： index.vim ，
按键："1-1",
类型：3,
图标：“vim”，
},
],
},
{
标题："菜单",
类型：1,
键："2",
图标："文件",
},
{
标题："组件",
类型：1,
密钥："3",
图标："文件",
儿童：[
{
标题："索引",
类型：2,
关键："3-1",
图标："文件",
儿童：[
{
标题： index.vue ，
类型：3,
按键："3-1-1",
图标：“vue”，
},
{
标题：" index.react "，
类型：3,
按键："3-1-2",
图标："反应",
},
{
标题：“js”，
类型：2,
按键："3-1-3",
图标："文件",
儿童：[
{
标题： index.js ，
类型：3,
关键："3-1-1-1-1",
图标：“js”，
},
],
},
{
标题： index.sass ，
类型：3,
按键："3-1-4",
图标：“萨斯”，
},
{
标题：" index.less "，
类型：3,
关键："3-1-5",
图标："更少",
},
],
},
{
标题：“index.php”，
类型：3，
关键：“3-2”，
图标：“php”，
},
],
},
{
标题：“节点模块”，
类型：1，
关键字：“4”，
图标：“文件”，
儿童：[
{
标题： index.java ，
关键：“4-1”，
类型：3，
图标：“java”，
},
{
标题： index.go ，
关键：“4-2”，
类型：3，
图标：“开始”，
},
{
标题： index.py ，
关键：“4-3”，
类型：3，
图标：“py”，
},
{
标题： index.c ，
关键：“4-4”，
类型：3，
图标：“c”，
},
{
标题： README.md ，
关键： 4-5 ，
类型：3，
图标：“降价”，
},
],
},
],
};
},
};
/脚本
Ps:我是一个前端小白，发帖只是为了做笔记，代码可能有很大的优化空间，希望能帮助到其他有需要的朋友。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。