树形table父子联动，子父联动实现

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('父级要变了半勾选了');
         }
       });
      // }
    };