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文章来源地址https://www.toymoban.com/news/detail-512744.html

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

到了这里,关于ElementUI中el-tree获取每个节点点击的选中状态的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自定义el-tree复选框选中状态vue elementUI

    :check-strictly属性:该属性默认false,表示严格遵循父子相互关联。父子相互关联(即选中父节点其所有子节点全部选中,取消选中父节点其子节点全部取消,且折叠、展开状态都一样)。 Attributes属性 参数 说明 类型 可选值 默认值 check-strictly 在显示复选框的情况下,是否严格

    2023年04月09日
    浏览(41)
  • vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree

    vue 项目中使用了element-ui 中 tree,选择了懒加载的模式 通过点击按钮,使得 tree 重新加载 通过点击重置按钮,使得tree 重新加载 解决的思路为:通过v-if 的显示隐藏来控制重新加载

    2024年02月12日
    浏览(52)
  • Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

    (1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据         重点: handleNodeClick方法、getTreeNode方法 (2) 选择el-breadcrumb-item设置el-tree节点选中             必须设置属性: current-node-key=\\\"currentNodeKey\\\"  、 node-key=\\\"id\\\"           重点: 设置树节点渲染 this.$refs.tree.set

    2024年02月16日
    浏览(50)
  • 【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法

    效果图这样的,会把所有的有这些的节点都展开 代码: 这里的逻辑就是通过递归循环把所有和匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把高亮标蓝 这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。 只不

    2024年02月15日
    浏览(74)
  • vue:el-tree 实现动态初始默认选中和全选

    官网链接:Element - The world\\\'s most popular Vue UI framework 涉及:1. 树结构转换一维数组             2. 与全选关联            3. 父子组件间传值      大家可以参考官网文档,写的还是挺清楚的。

    2024年02月12日
    浏览(44)
  • el-tree 实现节点高亮

    要实现显示  el-tree  节点高亮,可以使用  el-tree  提供的  highlight-current  属性和  current-node-key  属性,以及  el-tree-node  组件提供的  highlight  属性。 首先,在  el-tree  组件中设置  highlight-current  属性为  true ,表示启用高亮当前节点的功能: 然后,在  el-tree  组件中

    2024年02月08日
    浏览(52)
  • el-tree多个树进行节点同步联动(完整版)

    2024.1.11今天我学习了如何对多个el-tree树进行相同节点的联动效果,如图: 这边有两棵树,我们发现第一个树和第二个树之间会有重复的指标,当我们选中第一个树的指标,我们希望第二个树如果也有重复的指标也能进行勾选上,反之也是。 (1)要让父节点变成半选状态 这

    2024年01月24日
    浏览(38)
  • Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色

    el-tree默认选中的背景色是白色,有时候我们需求是一进入到页面就要发请求,并且设置默认选中的背景色改为蓝色,字体色为白色,然后选中的项也是背景色改为蓝色,字体色为白色,那这个时候我们可以给el-tree通过添加属性 highlight-current设为高亮,然后通过以下样式改变

    2024年02月13日
    浏览(76)
  • element-ui el-tree 设置指定级别节点显示复选框el-checkbox

            /deep/ .el-tree {         padding-top: 15px;         padding-left: 10px;         // 不可全选样式         .el-tree-node {           .is-leaf + .el-checkbox .el-checkbox__inner {             display: inline-block;           }           .el-checkbox .el-checkbox__inner {             display: none;    

    2023年04月08日
    浏览(63)
  • VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开(收起);一键全选(不全选)

    实现步骤: tree组件部分: ts部分: 页面效果: 默认状态 展开状态 折叠状态 全选状态 全不选状态 注意:以上方法会展开或折叠所有节点;全选或全不选节点。 问题:数据量过大以上操作会有明显卡顿;有高效解决方法的朋友可以交流。

    2024年04月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包