接口形式和需要实现的效果分别
是这样的
如何能把数据填充进去呢
<el-tree
:data="treeList"
show-checkbox
node-key="id"
:default-expanded-keys="[2,3,4]"
:props="defaultProps">
</el-tree>
treeList:[{
id: 611,
label: '全景视图',
},{
id: 1,
label: '流量',
children: [{
id: 4,
label: '今日总览',
},
{
id: 64,
label: 'HTTP流量分析',
},
{
id: 54,
label: '流量追溯',
}]
}, {
id: 133,
label: '仪表盘',
},{
id: 144,
label: '主机安全',
},{
id: 155,
label: '资产',
},{
id: 2,
label: '漏洞管理',
children: [{
id: 5,
label: '漏洞列表'
}, {
id: 6,
label: '漏洞库'
}]
},{
id: 11,
label: '报告',
}, {
id: 53,
label: '后台管理',
children: [{
id: 7,
label: '威胁告警'
}, {
id: 8,
label: 'IP白名单'
},{
id: 9,
label: '账号管理'
}, {
id: 10,
label: '权限配置'
}, {
id: 28,
label: '公司架构'
},{
id: 29,
label: '系统日志'
}, {
id: 210,
label: '资产标签'
}]
}, {
id: 3,
label: '系统设置',
children: [{
id: 227,
label: '内部ip设置'
}, {
id: 228,
label: '静态过滤规则'
},{
id: 229,
label: '静态告警类型'
}, {
id: 2210,
label: '威胁类型'
}, {
id: 38,
label: '定时任务'
},{
id: 39,
label: '初始化'
}, {
id: 310,
label: '设置参数'
}]
},{
id: 311,
label: '资源',
}],
麻烦你吧 html模板发出来
这就是展现出来的代码
// 循环出父节点
export function toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点,pid是0
let parent = [];
for (let i = 0; i < data.length; i++) {
// console.log(data[i][pid])
if(data[i][pid] !== 0){
}else{
let obj = {
label: data[i][name],
id: data[i][id],
children: []
};
parent.push(obj);//数组加数组值
}
}
children(parent);
// 调用子节点方法,参数为父节点的数组
function children(parent) {
// console.log(parent)
if (data.length !== 0) {
for (let i = 0; i < parent.length; i++) {
for (let j = 0; j < data.length; j++) {
if (parent[i].id == data[j][pid]){
let obj = {
label: data[j][name],
id: data[j][id],
children: []
};
parent[i].children.push(obj);
}
}
children(parent[i].children);
}
}
}
return parent;
}
//树形列表
getTreeData() {
getTreeMenu('').then(res => {
this.loading = false;
let treeList = res.result;
const userStr = JSON.parse(treeList);//从一个字符串中解析出json对象
this.treeData = toTreeData(userStr,"id","pId","name")
//this.chils = JSON.stringify(result, null, '\t');//从一个对象解析出字符串
})
},