el-tree 勾选a节点之后b节点才能勾选,否则禁用

本文描述了一个在Vue项目中,如何通过el-tree组件实现A节点勾选影响B节点禁用状态的交互逻辑,包括数据处理、事件监听和状态更新的过程,以及作者对于优化此功能的初步尝试和反思。
摘要由CSDN通过智能技术生成

不知道大家有没有

遇到过yue的需求哦。

先看下效果的视频url

el-tree 勾选a节点之后b节点才能勾选,否则禁用-CSDN直播

下面会围绕着订单修改节点和COD修改的节点展开,所以我亲切的称为a节点,b节点哈。

需求说明,b节点默认是禁用的,当我勾选a节点的时候,b节点才能勾选,当我可以勾选b节点的时候,这时我把a节点取消勾选,理当b节点的选中状态也应取消,交互就是这样,接下来,我说思路哈。

后端返回的数据已经是树结构的了,所以我这边就不做处理了。

每一个item对象里面都有一个resourceCode ,可以理解为唯一标识。

饿了么文档关于el-tree的介绍,禁用状态是需要给子级追加一个disabled属性的

所以我们第一步就是给b节点,追加一个disabled的属性

CODDisabledHandle(data) {
      // 使用find方法查找特定节点
      const targetNode = data.find(node => {
        return node.childResources.find(child => child.resourceCode === 'CodUpdate')
      })

      // 如果找到了目标节点
      if (targetNode) {
        // 在childResources中找到具体的子节点并添加disabled属性
        const codUpdateNode = targetNode.childResources.find(child => child.resourceCode === 'CodUpdate')
        if (codUpdateNode) {
          codUpdateNode.disabled = false
        }
      }
      return data
    },

打印出来已经追加上了disabled属性。

所以第二步就是el-tree的change事件,如果当前勾选了a节点,那么我们要让b节点的disabled属性变为false。

通过check-change事件 

@check-change="checkChange"

我们需要定义一个变量记住当前a节点的勾选状态,作下一步使用,如果a节点勾选了,我们才能勾选b节点,其次,如果我们b节点已经勾选了,我们取消a节点的勾选,b节点是不是也要取消勾选对吧,这样逻辑才能闭环,要不然不就是bug了。

checkChange(data, checked, indeterminate) {
      
      if (data.resourceCode === 'OrdersUpdate') {
        this.checked = checked 
        if (!checked) {
          this.clearSingleNodeSelection()
        }
      }
    },

 我这边清空节点的逻辑是这样的,先获取当前tree的选中节点,这里的treeData就是接口返回的数据,筛选出来之后,然后通过setCheckedKeys方法再去主动勾选他。


    clearSingleNodeSelection() {
      const list = this.$refs['tree'].getCheckedNodes(false, true).map(v => {
        if (v.resourceCode !== 'CodUpdate') {
          return v.resourceCode
        }
      })
      const checkedList = list.join(',')
      const filteredChildResources = []
      this.treeData.forEach(item => {
        const filteredChildItems = item.childResources.filter(childItem => checkedList.includes(childItem.resourceCode)).map(item => item.resourceCode)
        filteredChildResources.push(...filteredChildItems)
      })
      this.$refs['tree'].setCheckedKeys(filteredChildResources)
    },

 这一步是勾选a节点的时候,我们把b节点的disabled为false,

@check="checkHandle"

通过check回调进行判断

 我这里是遍历treeData的数据找到b节点使他的disabled为a节点的checked的反值。

updateDisabledStatus(isChecked) {
      const codUpdateNode = this.treeData.find(node => {
        return node.childResources.some(child => child.resourceCode === 'CodUpdate')
      })
      if (codUpdateNode) {
        const codUpdateChildNode = codUpdateNode.childResources.find(child => child.resourceCode === 'CodUpdate')
        console.log('🚀 ~ file: editUser.vue:177 ~ updateDisabledStatus ~ codUpdateChildNode:', codUpdateChildNode)
        if (codUpdateChildNode) {
          codUpdateChildNode.disabled = !isChecked
        }
      }
    },

 这块的逻辑有点绕,可以稍微的理解一下,我当时做的时候确认费了很大的劲,试了很多的方法,也没有实现,日后有机会我会在优化一下的。

今天是2024.01.01 20:40  承上启下 愿我们2024都有一个好的开端。没有烦恼,开心最重要

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值