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

不知道大家有没有

遇到过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都有一个好的开端。没有烦恼，开心最重要