话不多说,先上效果图
数据源
数据是后台存在mongodb数据库中,传给前端直接用的
"case_name": "案件名1", "task_id": ["10000", "10001"]
"case_name": "案件名2", "task_id": ["20000", "20001","20002"]
"case_name": "案件名3", "task_id": ["30000", "30001","30002","30003"]
实现代码
树形控件的添加
<el-tree ref="tree" :data="treeData" :props="defaultProps" highlight-current="true" default-expand-all="false" @node-click="handelNodeClick" />
json数据转为树形控件需要的类型的数据
id可以根据需要自行配置
getTreeData() {
const temp_list = []
for (var i = 0; i < this.tempList.length; i++) {
const obj = {
label: this.tempList[i].case_name,
id: i + 1,
children: []
}
if (this.tempList[i].task_id.length >= 1) {
let temp = this.tempList[i].task_id.length
while (temp > 0) {
// eslint-disable-next-line no-unused-vars
const obj_child = {
label: this.tempList[i].task_id[this.tempList[i].task_id.length - temp],
id: (i + 1) * 100 + this.tempList[i].task_id.length - temp
}
temp--
obj.children.push(obj_child)
}
}
temp_list.push(obj)
}
this.treeData = temp_list
},