作者：turneerpelliccia_291 | 来源：互联网 | 2023-07-24 09:46
原标题：【Vue】自定义树形控件
效果图：
数据结构：
tree: {
title: '', // 标www.yii666.com题（姓名）
key: '0',
head: '', // 头像
selectStatus: false, // checkBox选中状态
children: [
{
title: '旺旺一部',
key: '0-0',
head: '',
selectStatus: false,
children: [
{
key: '0-0-0',
title: '旺仔1',
head: require('@/assets/wan.jpg'),
selectStatus: false
}
]
},
{
title: '旺旺二部',
key: '0-1',
head: '',
selectStatus: false,
children: [
{
title: '旺旺二部一队',
key: '0-1-0',
head: '',
selectStatus: false,
children: [
{
title: '旺旺二部一队一班',
key: '0-1-0-2',
head: '',
selectStatus: false,
文章来源站点https://www.yii666.com/ children: [
{
title: '旺仔3',
key: '0-1-0-2-0',
head: require('@/assets/wan.jpg'),
selectStatus: false
}
]
}
]
}
]
}
]
},
思路：
/*自定义树形控件的核心就是“组件自己调用自己” 这里将树形控件封装成一个子组件*/
//toggleChildren事件为“展开内容”、“关闭内容”的控制事件
/*
这里是递文章来源地址49325.html归数据显示的具体内容
例如：本项目递归的具体内容从效果图上看就是“图片/头像”、“标题/名字”、“null/CheckBox”
效果图显示逻辑是：
//如果没有头像图片有标题，则显示 “箭头-标题”样式
//如果有头像图片，则显示 “头像-姓名-checkBox”样式
*/
v-for="children in treeData"
v-if="showChildren" // 根据 toggleChildren事件 判断是否展开内容
:treeData="children.children" // 下面都是一些属性，应该都能看懂吧！不多说了！
:label="children.title"
:headImg="children.head"
:pkid="children.key"
:depth="depth+1" // 这个是用来控制每行缩进的样式，可移步下方=>indent ()看具体用处
:selectStwww.yii666.comatus="children.selectStatus"
v-bind="$attrs" // 这两个是用来实现祖孙组件通信的
v-on="$listeners"
>
/*组件调用方法*/
:label="tree.title"
:headImg="tree.head"
:treeData="tree.children"
:pkid="tree.key"
:depth="0"
:selectStatus="tree.selectStatus文章来源地址49325.html"
@addSelectedData="addSelectedData"
@deleteSelectedData="deleteSelectedData" />
来源于：【Vue】自定义树形控件
京公网安备 11010802041100号