element ui 树形结构(elementui树形表格全部展开)

效果如下：
最终效果图
首先用elemnetUI的桌子表格控件，将获取到的数据进行基本展示。获取数据：
数据结构
[{
classId’: 1，
类名’ : ‘一级工单，
parentId’: 0
},{
classId’: 2，
类名’ : ‘1-1 ‘,
parentId’: 1
},{
classId’: 3，
类名’ : ‘二级工单，
parentId’: 0
},{
classId’: 4，
类名’ : ‘2-1 ‘,
parentId’: 3
}]
定义一个优等生名单变量可以把上面的数据赋值给优等生名单变量
下面需要写个转换工具将优等生名单数据转换成树形数据代码如下
//类别列表数据转换树形数据导出函数listworkclassstree(list){ let root=null if(list list。length){ root={ classid : 0，parentId: null，children :[]} const group={ } for(let index=0；index list . length index=1){ if(list[index].parentId！==空列表[索引]。parentId！==未定义){如果(！组[列表[索引]。parentId]) { group[list[index].parentId]=[] } group[list[index].parentId].push(list[index])} } const queue=[]queue。push(root)while(queue。长度){常量节点=队列。shift()节点。children=group[node。class id]组[节点。classid].长度组[节点。classid]: null if(节点。儿童){队列。推送(.node.children) } } }返回根目录}注意：classId需要对应优等生名单里面页面引入jsimport { listworkclassstree }从’ @/utils/index ‘ this。class list=listworkclassstree(this。课程列表).孩子们转换后是数据
以上所述是给大家介绍的vue。j与元素-用户界面实现树形结构的解决方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！