1.首先搞懂什么是树形结构,以及树形结构的基本用法
树是n(n>=0)个结点的有限集。当n = 0时,称为空树。
在任意一棵非空树中应满足:
有且仅有一个特定的称为根的结点。
当n>1时,其余节点可分为m(m>0)个互不相交的有限集T1,T2,…,Tm,其中每个集合本身又是一棵树,并且称为根的子树。
2.树形结构的基本使用
讲一下element-ui里的Tree 树形控件用法
举了一个小例子,看这张图,就大概能理解了
模板代码
<el-tree :data="newList">
<template v-slot="{ data }">
<div class="top ">
<div class="name">{{ data.name }}</div>
<div class="manger">{{ data.manger }}</div>
<el-dropdown>
<span class="el-dropdown-link">
操作<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>增加子部门</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-tree>
data里的数据
data () {
return {
list: [
{
name: '总裁办',
manger: '大小林',
children: [
{
name: '深圳分公司',
manger: '管理员'
}
]
}
],
newList: []
}
},
3.树形结构转换
步骤
# 1.只取到第一层数据
# 2.将pid写成变量形参
# 3.给找出来的项加一个children:[]
# 4.使用递归找出子集,子集的pid是自己的id
完整代码
<template>
<div>
<el-tree :data="newList" :props="{ label: 'name' }" />
</div>
</template>
<script>
export default {
data () {
return {
list: [
{ name: '广东', id: 1, pid: '' },
{ name: '广州', id: 2, pid: 1 },
{ name: '深圳', id: 3, pid: 1 },
{ name: '宝安', id: 4, pid: 3 },
{ name: '广西', id: 5, pid: '' },
{ name: '石岩', id: 6, pid: 4 },
],
newList: []
}
},
created () {
// 只收第一层数据
// console.log(this.changeChannel(this.list));
this.newList = this.changeData(this.list, '')
console.log(this.newList);
},
methods: {
// 树形数据转换
changeData (arr, pid) {
return arr.filter(item => {
if (item.pid === pid) {
// 这个地方的item
item.children = this.changeData(arr, item.id)
return true
}
})
}
}
}
</script>
<style></style>