ElementUI中el-tree如何获取每个节点点击的选中状态

 更新时间:2023年12月01日 09:57:01   作者:吉吉安  
ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧

ElementUI中el-tree获取每个节点点击的选中状态

有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值

          <el-tree
            :data="organizationData"
            :props="defaultProps"
            :check-strictly="isAssociate"
            node-key="organizationId"
            :expand-on-click-node="false"
            @check="getCurrentNode"
            ref="tree"
          >
          </el-tree>

1.绑定@check事件,我这里是getCurrentNode,函数名自己随便写
2.绑定ref

    getCurrentNode(nodeObj, nodeState) {
      //判断当前状态是选中还是取消选中
      const isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1
      console.log(isCheck)
   }

附属

element-ui el-tree 获取当前选中数据(含半选中的父节点)

  • 当不给el-tree组件设置check-strictly 属性时,默认为false,但是回显会有一些没有选中的节点都勾选上了,怎么解决呢?
  • 重新回到设置 check-strictly 为 true 时,父子级不互相关联,挨个点击用户体验不好的问题,同时也避免了出现半选的情况。
  • 需要简化用户操作:
  • (1)当点击复选框勾选父节点时,其父节点子节点会统一跟随选中,为选中状态
  • (1)当点击复选框勾选取消选中时,其父节点子节点会统一跟随为未选中状态
  • el-tree 标签属性
    node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的。标识节点唯一的键值名称。
	default-checked-keys:对应el-tree多选树组件初始化时默认选中ID
	check-strictly:是否严格的遵循父子不互相关联的做法,默认为false
	check:当复选框被点击的时候触发的方法
methods:{
	<el-tree
        ref="tree"
        @check="check"           //选中或取消选中都会执行该方法
        :check-strictly="true"  //这里需要设置为true,不设置会回显未选中的节点
        :data="datalist"  //数据源  拿接口数据赋值就可
        show-checkbox
        node-key="id"
        :default-checked-keys="midPwList"   //这里需要后台返回id集合数组 ,给它赋值即可
        :props="{children: 'children',label: 'menuName',value:'id',disabled:disabledFn}">
        <template #default="{node,data}">
            <span class="custom-tree-node" >
            <span>{{ node.label }}</span>
            <span>
                <el-tag closable size="mini" v-for="(item,index) in data.btnBean" @close="cancel(item.id)"  :key="index">{{item.btnname}}</el-tag>
            </span>
            </span>
        </template>
      </el-tree>
      <el-button type="text" size="medium" @click="quanxian(scope.row)">权限</el-button>
//调用check事件/下面三个方法都调用就可以实现,点击勾选父节点会跟随选中子节点/取消勾选父节点会跟随全部取消选中
check(currentObj, treeStatus) {
      // 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
      let selected = treeStatus.checkedKeys.indexOf(currentObj.id)
      //不等于-1当前是选中状态
      if (selected !== -1) {
        this.selectedParent(currentObj)
        //统一处理子节点为相同的勾选状态
        this.uniteChildSame(currentObj, true)
      }else {
        //等于 -1 是取消选中状态
        this.uniteChildSame(currentObj, false) //
      }
    },
    uniteChildSame(treeList, isSelected) {
      console.log(isSelected);
      this.$refs.tree.setChecked(treeList.id, isSelected)
      if (treeList.children) {
        for (let i = 0; i < treeList.children.length; i++) {
          this.uniteChildSame(treeList.children[i], isSelected)
        }
      }
    },
    selectedParent(currentObj) {
      let currentNode = this.$refs.tree.getNode(currentObj)
      console.log(currentNode);
      if (currentNode.parent.key !== undefined) {
        this.$refs.tree.setChecked(currentNode.parent, true)
        this.selectedParent(currentNode.parent)
      }
    },
    //回显勾选保存的数据
    quanxian(row){
     	 this.$nextTick(()=>{
         this.midPwList = JSON.parse(JSON.stringify(row.listRole));
       })
     }
}

到此这篇关于ElementUI中el-tree获取每个节点点击的选中状态的文章就介绍到这了,更多相关ElementUI el-tree获取选中状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中变量提升机制示例详解

    JavaScript中变量提升机制示例详解

    这篇文章主要给大家介绍了关于JavaScript中变量提升机制的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • video.js 实现视频只能后退不能快进的思路详解

    video.js 实现视频只能后退不能快进的思路详解

    这篇文章主要介绍了video.js 实现视频只能后退不能快进的思路详解,主要思路是点击进度条需要获取拖动前的时间点,具体实例代码大家跟随小编一起看看吧
    2018-08-08
  • 关于include标签导致js路径找不到的问题分析及解决

    关于include标签导致js路径找不到的问题分析及解决

    本文为大家详细介绍下关于使用jsp:include标签及<%@ include标签时要注意的事项以及实测发现问题并解决问题的全过程,感兴趣的各位可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 利用JavaScript实现创建虚拟键盘的示例代码

    利用JavaScript实现创建虚拟键盘的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现创建虚拟键盘,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-09-09
  • JS动态给对象添加事件的简单方法

    JS动态给对象添加事件的简单方法

    下面小编就为大家带来一篇JS动态给对象添加事件的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

    浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

    下面小编就为大家带来一篇浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS插件plupload.js实现多图上传并显示进度条

    JS插件plupload.js实现多图上传并显示进度条

    这篇文章主要为大家详细介绍了PHP结合plupload.js JS插件实现多图上传并显示进度条加删除实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Boostrap基础教程之JavaScript插件篇

    Boostrap基础教程之JavaScript插件篇

    Boostrap提供了12种JavaScript插件,在本文中给大家介绍了,不知道的朋友可以参考下,本文重点给大家介绍bootstrap基础之js插件,感兴趣的朋友一起学习吧
    2016-09-09
  • JavaScript缓冲运动实现方法(2则示例)

    JavaScript缓冲运动实现方法(2则示例)

    这篇文章主要介绍了JavaScript缓冲运动实现方法,简单分析了JavaScript缓冲运动的实现原理与相关运算技巧,并给出了两则实例代码予以总结分析,需要的朋友可以参考下
    2016-01-01
  • javascript 必知必会之closure

    javascript 必知必会之closure

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用,包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的.
    2009-09-09

最新评论