组件: Element(地址:http://element.eleme.io/#/zh-CN/component/tree):Tree树形控件
<el-tree
:data="dataRole"
show-checkbox
ref="tree"
node-key="id"
:check-strictly="true"
default-expand-all
:default-checked-keys="dataActive"
@check-change="getCheckedKeys"
:props="defaultProps">
</el-tree>
将获取的数据转换成组件所需要的格式:
let menuData = []
res.data.data.map(item => {
menuData.push({
"id": item.id,
"parentId": item.parentId,
"label": item.name,
"children": []
})
})
然后根据parentId生成树:
function setTree(data, Pid) {
let result = []
let child
for (let i = 0; i < data.length; i++) {
if (data[i].parentId == Pid) {
child = setTree(data, data[i].id)
if (child.length > 0) {
data[i].children = child
}
result.push(data[i])
}
}
return result
}
this.dataRole = setTree(menuData, 0) //rootid为0
最新评论