el-tree 父子不关联,勾选父节点全选子节点,子节点仅勾选自己

需求:点击父节点勾选所有子节点,点击子节点仅勾选自己;全选情况下如果取消某个子节点,则父节点也取消勾选,但不影响其他子节点。以保证删除节点时层级关系不变
在这里插入图片描述

//el-tree绑定方法 @check="handleCheck"
handleCheck(data) {
      data.isChecked = !data.isChecked
      //递归修改子节点选中状态
      const changeNode= (node, ischecked) => {
        node.map(item => {
          this.$refs.tree.setChecked(item.id, ischecked)
          item.isChecked = ischecked
          if (item.children && item.children.length) changeNode(item.children, ischecked)
        })
      }
      if (data.children && data.children.length) {
        changeNode(data.children, data.isChecked)
      }
      //取消选中,遍历父节点链路,修改父节勾选状态
      if (!data.isChecked) { 
        let ancestors = data.ancestors.split(",")
        ancestors.map(item => {
          this.$refs.tree.setChecked(item, false)
          this.checkNode(item)
        })
      }
    },
    //递归查找父节点
    checkNode(id) {
      const findNode = (data) => {
        for (let item of data) {
          if (item.id == id) {
            item.isChecked = false
            return
          }
          if (item.children && item.children.length) {
            findNode(item.children)
          }
        }

      }
      findNode(this.treeData)
    },

数据结构:添加 isChecked字段标识是否选中
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值