vue实现树形菜单,vue漂亮的树控件
本文主要详细介绍Vue自定义树控件的使用方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
在本文中，我们分享了Vue自定义树控件的使用方法，供大家参考。具体情况如下
效果图：
数据结构：
树：{
标题： ，//标题(名称)
密钥：“0”，
头像： ，//头像
SelectStatus: false，//复选框被选中。
儿童：[
{
标题：“旺旺一个”，
关键：“0-0”，
头像： ，
selectStatus: false，
儿童：[
{
关键：“0-0-0”，
标题：旺仔1 ，
头：require(@/assets/wan.jpg )，
selectStatus: false
}
]
},
{
标题：旺旺2号，
密钥：“0-1”，
头像： ，
selectStatus: false，
儿童：[
{
标题：旺旺二队一队，
密钥：“0-1-0”，
头像： ，
selectStatus: false，
儿童：[
{
题目：“一班，二队，旺旺”，
密钥：“0-1-0-2”，
头像： ，
selectStatus: false，
儿童：[
{
题目：《旺仔3》，
密钥：“0-1-0-2-0”，
头：require(@/assets/wan.jpg )，
selectStatus: false
}
]
}
]
}
]
}
]
},
想法：
/*自定义树控件的核心是“组件调用自身”。这里，树控件被封装到一个子组件*/
模板
差异
div class=树-自定义
div:style= indent @ click= toggle children //toggle children事件是“展开内容”和“关闭内容”的控件事件
/*
下面是递归数据显示的具体内容。
比如这个项目递归的具体内容是来自效果图的“图片/头像”、“标题/名称”、“空/复选框”。
渲染显示的逻辑是：
div v-if=！标题标签
//如果没有头像图片有标题，则显示“箭头标题”样式
/div
div v-if=headImg
//如果有头像图片，则显示“头像-姓名-复选框”样式。
/div
*/
/div
树-自定义//“呼叫自己”
:key= children . key //key/键值是唯一的
v-for= treeData中的孩子
V-if=showChildren //确定是否根据toggleChildren事件展开内容。
:treeData=children.children //下面是一些属性，应该能看懂！不要再说了！
:label=children.title
:headImg=children.head
:pkid=children.key
:depth=depth 1 //这是用于控制每行缩进的样式。你可以移动到下面的=indent()查看它的具体用法。
:select status= children . select status
V-bind=$attrs //这两个用来实现孙辈和孙辈之间的通信。
v-on=$listeners
/tree-自定义
/div
/div
/模板
脚本
导出默认值{
Name: TreeCustom ，//给我们的组件命名！不然怎么叫？
data () {
返回{
ShowChildren: true，//这是控制是否显示内容的数据~也就是展开和折叠！
CurrentInfoData: {} //这样做的目的是获取当前行的数据。为简洁起见，上面代码的具体用法被我删了~意思不大。
}
},
//对象的默认值应该由工厂函数返回，以避免挖坑。
道具：{
treeData: {
类型：数组，
默认值：()=[]
},
标签:{
类型：字符串，
默认值：()=
},
深度：{
类型：数量，
默认值：()=0
},
标题：{
类型：字符串，
默认值：()=
},
PKI id:{
类型：字符串，
默认值：()=
},
选择状态：{
类型：布尔型，
默认值：()=null
}
},
计算值：{
indent () { //定义不同层级的缩进样式
return { transform:` translate($ {(this。深度-1)* 15 }像素)`}
}
},
方法：{
toggleChildren () {
this.showChildren=！这个。显示儿童
},
复选框选择更改(e) {
检查的常量=e .目标.已检查
如果（选中){
//使用$听众方法调用祖辈的函数，因为这边是递归组件所以组件之间可能并不是严格的父子关系，所以$emit 、$parent等方法都是不合适的
这个$听众。addselecteddata(this。currentinfodata)
}
如果(!已检查){
这个$听众。deleteselecteddata(this。currentinfodata)
}
},
getCurrentInfo (label，headImg，pkid) {
this.currentInfoData={
密钥：pkid，
标题：标签，
头部：头部
}
}
}
}
/脚本
/*组件调用方法*/
div class=树滚动
树-习俗
:label=tree.title
:headImg=tree.head
:treeData=tree.children
:pkid=tree.key
：深度="0"
:选择状态=树。选择状态
@ addSelectedData= addSelectedData
@ deleteSelectedData= deleteSelectedData /
/div
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。