栏目分类:
子分类:
返回
文库吧用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
文库吧 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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字段标识是否选中

转载请注明:文章转载自 www.wk8.com.cn
本文地址:https://www.wk8.com.cn/it/1036743.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 wk8.com.cn

ICP备案号:晋ICP备2021003244-6号