element 中table树形表格根据子级取父级的数据
// row是自己所在行
const rowClick = (row:IManageQueryListChildrenItemExtend) => {
let parentInfo = {} as IManageQueryListListItemExtend;
tableData.value.forEach((item) => {
if (item.children) {
item.children.forEach((item2) => {
if (item2 === row) {
// return item;
parentInfo = item;
// console.log(item, 'item');
}
});
}
});
// console.log(parentInfo, 'item3');
return parentInfo;
};
树形表格父子联动,子父联动
const toggleSelection = (row: any, flag: boolean) => {
if (row) {
tableRef.value?.toggleRowSelection(row, flag);// 表格某行选中就勾上
}
};
const setChildren = (children: IManageQueryListChildrenItem[], flag: boolean) => {
children.forEach((v) => {
toggleSelection(v, flag);// 勾选子级的每一项
});
};
const handleSelectAll = (selections: any[]) => {
const isSelect = selections.some((item) => { // 检测数组中是否含有某个值。选中父级为true
const tableDataIds = tableData.value.map(v => v.projectName);// 遍历表格每一行,将其项目名称值赋给tableDataIds
return tableDataIds.includes(item.projectName);// 判断表格中是否包含选中的项目名称,判断勾中的是父级还是自己
});
const isCancel = !tableData.value.every((item) => { // 检测数组所有元素是否都符合指定条件
const selectIds = selections.map(v => v.projectName);
return selectIds.includes(item.projectName);
});
if (isSelect) {
selections.forEach((item) => {
if (item.children && item.children.length > 0) {
setChildren(item.children, true);
}
});
}
if (isCancel) {
tableData.value.forEach((item) => {
if (item.children && item.children.length > 0) {
setChildren(item.children, false);
}
});
}
console.log(selections, 'selections');
};
// 多选 选择的行有两种数据类型故用any
// 多选Ids
const checkList = ref<IManageQueryListChildrenItem[]>([]);
const handleSelectionChange = (selection:any[]) => {
checkList.value = [];
// const isSelect = ref<boolean>();
selection.forEach((item: any) => {
if (item.children?.length) {
// console.log('item', item);
// checkList.value.push(...item.children);
// checkList.value = checkList.value.concat(item);
} else if (!item.children) {
checkList.value.push(item);
// console.log(checkList.value, item.firstLevelMenu);
}
});
checkList.value = [...checkList.value];
};
watchEffect(() => {
console.log(checkList.value.length, checkList.value, 'yayayaya');
if (!checkList.value.length) {
tableRef.value?.clearSelection();
}
});
// 复选框点击事件
const handleSelect = (selections: any[], row: any) => {
const parentInfoItem = selections.map((e) => {
return rowClick(e);
});
// 父级状态联动子级状态
// console.log(row, 'row');
if (
selections.some((item) => { // 检测数组中是否有某一个值,返回布尔值,判断是父级
return row.projectName === item.projectName; // 判断勾选项的项目名称和这行的项目名称是否一样
})
) {
if (row.children) { // 判断这行有无子级,
nextTick(() => {
setChildren(row.children, true);// 有就勾选每个子级
toggleSelection(row, true);
});
}
} else {
nextTick(() => {
setChildren(row.children, false);// 反之
toggleSelection(row, false);
});
}
// 子级状态联动父级状态
// 获取选中行的父级数据,判断父级children的长度与selections的长度
// 去重选出需要半勾的父级
const neededParentInfoItem = Array.from(new Set(parentInfoItem)).filter(value => Object.keys(value).length !== 0);
tableRef.value?.clearSelection();
neededParentInfoItem.forEach((v) => {
v.children.forEach((item) => {
if (selections.includes(item)) {
toggleSelection(item, true);
}
});
// 判断每个父级下面的子级是否被全选了, 判断该父级下的子级是否都能在selections中找到
if (v.children.every(val => selections.includes(val))) {
console.log('selections', selections);
// 是,v全勾
toggleSelection(v, true);
} else {
// 否,v 半勾
toggleSelection(v, false);
console.log('父级要变了半勾选了');
}
});
// }
};