使用el-tree 处理权限树父节点半选和子节点选中获取,及回显父节点不覆盖所以子节点处理

1 获取 父子节点 key  当前 key = id 设置el-tree 

                 <el-tree
                  v-if="isShowTree"
                  ref="treeRef2"
                  style="max-width: 260px"
                  :data="assistantListTree"
                  show-checkbox
                  :default-expand-all="isExpandAll"
                  node-key="id"
                  :check-strictly="false"
                  :props="{
                    children: 'children',
                    label: 'resourceName'
                  }"
                />


const assistantListTree = ref([])
const isExpandAll = ref(false)
const permissionIds  = ref([])

// 菜单节点全选及半选数据id - key
const getMenuAllCheckedKeys_ids = () => {
  // 目前被选中的菜单节点
  let checkedKeys = treeRef1.value!.getCheckedKeys()
  // 半选中的父级菜单节点
  let halfCheckedKeys = treeRef1.value!.getHalfCheckedKeys()

  permissionIds.value = [
    ...checkedKeys,
    ...halfCheckedKeys,
   
  ]
  // 2 渠道/助理暂无数据
}


2 回显示处理

2 权限父子关联 又不想父级会显导致 子节点全选处理

// 请求节点详情数据 api==> ids

 if (res.data?.code == 200) {
        const { name, id, permissionIds } =
          res.data?.data
        // 回显权限角色选中状态
        permissionIds &&
          permissionIds.forEach((key_id: number | string) => {
            // (key/data, checked, deep) 接收三个参数
            treeRef1.value!.setChecked(key_id, true, false) // 第三个参数false  父节点不会选中所以子节点

          })
        // 指定部门数据之间相互独立
      }

### 解决方案 为了实现在 `el-tree-select` 中子节点时自动回显父节点的功能,可以采用监听事件的方式,在每次选中子节点后通过编程方式设置父节点的状态。具体实现如下: #### 方法一:利用默认展开功能并自定义渲染逻辑 可以在初始化树结构时就设定好哪些节点应该被默认选中,并且在组件挂载完成后手动触发一次更新来确保视图同步。 ```javascript // 假设这是从服务器获取的数据列表 const defaultProps = { children: 'children', label: 'label' }; watch(() => props.modelValue, (newVal) => { nextTick().then(() => { handleCheckChange(newVal); }); }, { immediate: true }); function handleCheckChange(value){ let checkedNodes = refTree.value.getCheckedNodes(); let parentKeys = []; function getParentIds(node){ if (!node.parent || node.level === 0) return; parentKeys.push(node.parent.key); getParentIds(node.parent); } checkedNodes.forEach((item)=>{ getParentIds(item); }); // 移除重复项 [...new Set(parentKeys)].forEach(key=>{ refTree.value.setChecked(key,true,false); }) } ``` 此代码片段展示了如何遍历已选中的节点并通过递归函数找到它们各自的上级节点,最后调用 `setChecked()` 来标记这些父级节点为已状态[^1]。 #### 方法二:重写 getCheckedNodes setCheckedNodes 函数 另一种更彻底的方法是对原生 API 进行扩展或覆盖,默认情况下让 `getCheckedNodes` 仅返直接选中的叶子结点还包括间接影响到的非叶节点(即部分选中父节点)。这通常涉及到修改框架源码或者创建一个新的封装层来进行增强处理。 对于第二种方法来说,由于涉及到了对第三方库内部机制的理解以及可能存在的兼容性风险,建议优先考虑第一种解决方案除非有特殊需求确实需要这样做。 #### 注意事项 - 上述例子假设使用的是 Vue3 及 Composition API 的语法风格。 - 如果项目还在使用 Options API,则需相应调整生命周期钩子的位置名称。 - 对于大型复杂的应用程序而言,频繁的操作 DOM 或者大量改变 tree 结构可能会引起性能问题,因此实际开发过程中应当注意优化策略的择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值