element UI 中 el-tree 树形菜单全选及半全选时给后端传递子父级结构数据
·
今天接到一个需求,后端需要接收子父级结构的参数,苦思冥想之后最终使用以下方法实现了
第一步:
<el-tree
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
第二步:
export default {
data () {
return {
treeData: [
{
id: 1, label: 'ALL',
children: [
{
id: 2, type: 'pid', label: 'Total Equipment Cost',
children: [
{id: 8, pid: 2, type: 'child', label: 'Total Price'},
{id: 9, pid: 2, type: 'child', label: '占比'},
]
},
{
id: 3, type: 'pid', label: 'Processing Cost Breakd',
children: [
{id: 10, pid: 3, type: 'child', label: 'Total Hours'},
{id: 11, pid: 3, type: 'child', label: 'Total Cost'},
]
},
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
checkboxData: [], // 已选择的数据
}
}
}
第三步:
methods: {
Results(){
let data = this.$refs.tree.getCheckedNodes() // 获取选择的数据
let pidList = []; // 存储pid集合
let childList = []; // 存储子数据集合
// 循环已选择的数组,将pid和子数据进行分组
data.map((item) => {
if(item.type === 'child'){
pidList.push(item.pid)
childList.push(item)
}else{
pidList.push(item.id)
}
})
pidList = [...new Set(pidList)] // 去重后的父id
// 获取父级数据
let parentObj = []; // 存储获取到的父级数据
pidList.map((itm) => {
this.treeData[0].children.map((item) => {
if(itm === item.id){
let params = {}
params.id = item.id;
params.label = item.label;
params.type = item.type;
params.children = [];
parentObj.push(params)
}
})
})
// console.log(childList,'子数组集合');
// 遍历父数据集合,用子数据的pid和父级数据对象的id进行匹配,将匹配到的子数据存放到对应的父对象中
parentObj.map((item) => {
childList.map((itm) => {
if(item.id === itm.pid){
item.children.push(itm)
}
})
})
console.log(parentObj); // 最终结果
}
}
至此完成,感谢支持!!!
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)