el-tree全选父结点、半选当前结点获取
需求:全选时,只取父节点Id,半选时,只取当前选中节点id
思路:获取到当前所有选中节点的node,然后按照父级Id整合数据,过滤掉半选结点的node
// 根据parentNodeId,将相同父级id的数据放到一起
function listToTree(data:any) {
let arr = JSON.parse(JSON.stringify(data))
const listChildren = (obj:any, filter:any) => {
[arr, obj.children] = arr.reduce((res:any, val:any) => {
if (filter(val)) res[1].push(val)
else res[0].push(val)
return res
}, [
[],
[]
])
obj.children.forEach((val:any )=> {
if (arr.length) listChildren(val, (obj:any) => obj.parentNodeId === val.templateId)
})
}
const tree = {} as any;
listChildren(tree, (val:any) => arr.findIndex((i:any) => i.templateId === val.parentNodeId) === -1)
return tree.children;
}
function checkChangeFun() {
state.checkedArr = [];
state.a1Arr = [];
// 获取所有选中的节点
let getCheckedNodesArr = (reportTreeRef as any).value.getCheckedNodes(false,true);
// 获取半选节点数据
let getHalfCheckedNodesArr= (reportTreeRef as any).value.getHalfCheckedNodes();
getCheckedNodesArr.forEach((item:any)=>{
// 取出需要数据
state.checkedArr.push({
parentNodeId:item.parentNodeId,
templateId:item.templateId,
titleName:item.titleName || item.templateTitle
})
})
getHalfCheckedNodesArr.forEach((item2:any)=>{
// 取出需要数据
state.a1Arr.push({
parentNodeId:item2.parentNodeId,
templateId:item2.templateId,
titleName:item2.titleName || item2.templateTitle
})
})
if(state.a1Arr.length != 0) {
state.a1Arr.forEach((item3:any)=>{
// 过滤掉半选结点数据
state.checkedArr=state.checkedArr.filter((item4:any)=>{
return item4.templateId != item3.templateId
})
})
}
// 根据parentNodeId整合数据
state.moveIdArr = listToTree(state.checkedArr);
}
以上是目前水平能够想到的方法了,希望有大佬指点一二
el-tree全选与半选操作
本文介绍如何使用el-tree组件实现全选时仅获取父节点ID,半选时仅获取当前节点ID的功能。通过获取选中节点,并根据父节点ID整理数据,最终过滤掉半选节点。
1926

被折叠的 条评论
为什么被折叠?



