element-plus中的el-tree中的子不关联父


<template>
  <el-tree-v2 ref="qualityTree" :default-checked-keys="defaultCheckeys" @check="getCurrentNode" :check-strictly="true"
    style="max-width: 600px" :data="data" show-checkbox :props="props" :height="208" />
</template>
<script setup>

const defaultCheckeys = []
const qualityTree = ref(null)
const getKey = (prefix, id) => {
  return `${prefix}-${id}`
}

const createData = (
  maxDeep,
  maxChildren,
  minNodesNumber,
  deep = 1,
  key = 'node',
  
) => {
  let id = 0
  return Array.from({ length: minNodesNumber })
    .fill(deep)
    .map(() => {
      const childrenNumber =
        deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
      const nodeKey = getKey(key, ++id)
      return {
        id: nodeKey,
        label: nodeKey,
        parent:key==='node'?null:key,
        children: childrenNumber
          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
          : undefined,
      }
    })
}

const props = {
  value: 'id',
  label: 'label',
  children: 'children',

}
const data = createData(4, 5, 5)




const getCurrentNode = (currentObj, treeStatus) => {
  let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
   console.log('selected',selected)
  
  // 选中
  if (selected !== -1) {
    // 子节点只要被选中父节点就被选中
    selectedParent(currentObj)
    // 让子节点全部未选中
     
    uniteChildSame(currentObj, true)
  } else {
    // 未选中 让子节点全部未选中
    if (currentObj.children && currentObj.children.length !== 0) {
      uniteChildSame(currentObj, false)
    }
  }
}
// 统一处理子节点为相同的勾选状态
const uniteChildSame = (currentObj, isSelected) => {
  console.log('currentObj',currentObj)
  if (currentObj.children == null || currentObj.children.length == 0) {
    return;
  }
  for (var item of currentObj.children) {
    qualityTree.value.setChecked(item.id, isSelected)
    if(item.children){
      uniteChildSame(item,isSelected)
    }
  }

}


const selectedParent = (currentObj) => {
  const currentNode = qualityTree.value.getNode(currentObj);
  console.log('currentNode',currentNode)
  if (currentNode &&  currentNode.parent ) {
    qualityTree.value.setChecked(currentNode.parent.data.id, true);
    selectedParent(currentNode.parent.data.id);
  }
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值