element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

 更新时间:2022年08月16日 11:11:23   作者:追极  
这篇文章主要介绍了element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,项目中用到了vue的element-ui框架,用到了el-tree组件,由于数据量很大,使用了数据懒加载模式,即异步树,需要的朋友可以参考下

背景

项目中用到了vue的element-ui框架,用到了el-tree组件。由于数据量很大,使用了数据懒加载模式,即异步树。异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或者方法可以使用。 经过调试与阅读elment-ui源码才发现有现成的方法可以进行结点展开。下面就介绍结点展开的实现!

1.监听复选框点击事件check

<el-tree
        :props="mulprops"
        :load="loadNode"
        lazy
        node-key="id"
        show-checkbox
        accordion
        @current-change="currentChange"
        :filter-node-method="filterNode"
        @check="handleCheck"
        ref="tree"
        :default-checked-keys="defaultCheckedNodes"
        :default-expanded-keys="defaultExpandedNodes"
    >
    </el-tree>

2.手动展开,使用node.expand()方法

handleCheck(nodeData,  treeChecked) {
      let node = this.$refs.tree.getNode(nodeData.id)
      //将选中的未展开的节点进行展开
      if(node.checked && !node.expanded){
        node.expand(function(){
          for(let i=0; i< node.childNodes.length; i++){
            node.childNodes[i].expand()
          }
        })
      }
    }

项目中的实现

一、复选框勾选后能自动展开并选中,先展开再勾选也可以自动展开

1.监听check-change事件

<el-tree
        :props="mulprops"
        :load="loadNode"
        lazy
        node-key="id"
        show-checkbox
        accordion
        @check-change="handleCheckChange"
        :filter-node-method="filterNode"
        ref="tree"
        :default-checked-keys="defaultCheckedNodes"
        :default-expanded-keys="defaultExpandedNodes"
    >
    </el-tree>

2.编写展开勾选结点方法

handleCheckChange(nodeData, nodeSelected) {
      let tree = this.$refs.tree;
      let node = tree.getNode(nodeData.id)

      //展开选中的未展开的节点
      this.expandCheckedNotExpandNodes(node);

      //具体业务实现
      console.log(nodeData, nodeSelected)
    },
    //展开选中的未展开的节点
    expandCheckedNotExpandNodes(node) {
      let tree = this.$refs.tree;
      if (node.checked && !node.expanded && !node.isLeaf) {
        node.expand(function () {
          let childNodes = node.childNodes;
          for (let i = 0; i < childNodes.length; i++) {
            let childNode = childNodes[i];
            //手动触发check-change事件,事件处理函数中回继续调用此函数,形成递归展开
            tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
          }
        })
      }
    },

二、 展开指定结点

 <el-input type="text" v-model='nodeDataIds' placeholder="请输入结点数据ID(多个以逗号分割)"> ></el-input>
    <el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展开指定结点</el-button>
//展开匹配的结点,根结点默认展开
    expandNodes(nodeDataIds){
        let that = this;
        let tree = this.$refs.tree;
        let rootNode = tree.root;
        this.expandNode(rootNode, nodeDataIds);
    },
    //展开指定结点下匹配的结点
    expandNode(node, nodeDataIds){
        let that = this;
        //当前结点需要展开未展开,则展开(根结点默认展开)
        if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
           //展开孩子结点
           let expandChildren = function(){
               let childNodes = node.childNodes;
               for (let i = 0; i < childNodes.length; i++) {
                  let childNode = childNodes[i];
                  //递归展开孩子结点
                  that.expandNode(childNode, nodeDataIds);
               }
           }
           if(!node.expanded){
               //当前结点未展开则先展开,展开后再展开孩子结点
               node.expand(function(){
                    expandChildren();
               });
           }else{
                //当前结点已展开,直接展开孩子结点
                expandChildren();
           }
        }
    },

三. 勾选指定结点

1.异步树,需先展开指定结点,然后有数据了才能勾选上(即:展开父结点,子节点有了数据才能勾选上)

  <el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">选中指定结点</el-button>
expandNodes(nodeDataIds)
展开完成的时机比较难判断
 checkNodes(nodeDataIds){
         let tree = this.$refs.tree;
         tree.setCheckedKeys(nodeDataIds, false)
    }

2.设置默认勾选的结点,再调用展开方法会自动勾选上,适合写数据回显

default-checked-keys=['node001','node002']
expandNodes(nodeDataIds)

四、展开并勾选结点(支持异步树)牛逼版,实现展开回调

//展开匹配的结点,根结点默认展开
    expandNodes(nodeDataIds){
        let that = this;
        let tree = this.$refs.tree;
        let rootNode = tree.root;
        this.expandNode(rootNode, nodeDataIds, function(){
            that.checkNodes(['node001','node002']);
        });
    },
    //展开指定结点下匹配的结点
    expandNode(node, nodeDataIds, callback){
        let that = this;
        //递归进入
        that.recursiveEnter();

        //当前结点需要展开未展开,则展开(根结点默认展开)
        if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
           //展开孩子结点
           let expandChildren = function(){
               let childNodes = node.childNodes;
               if(childNodes.length > 0){
                   for (let i = 0; i < childNodes.length; i++) {
                      let childNode = childNodes[i];
                      //递归展开孩子结点
                      that.expandNode(childNode, nodeDataIds, callback);
                   }
               }
           }
           if(!node.expanded){
               //当前结点未展开则先展开,展开后再展开孩子结点
               node.expand(function(){
                    //展开孩子结点
                    expandChildren();

                    //递归退出
                    that.recursiveExit(callback);
               });
           }else{
                //当前结点已展开,直接展开孩子结点
                expandChildren();

                //递归退出
                that.recursiveExit(callback);
           }
        }else{
            //递归退出
            that.recursiveExit(callback);
        }
    },
    //递归计入计数剩余递归次数
    recursiveEnter(){
        this.recursiveRemainCount++;
        console.log('enter recursiveRemainCount', this.recursiveRemainCount)
    },
    //递归退出计数剩余递归次数
    recursiveExit(callback){
       this.recursiveRemainCount--;
       console.log('exit recursiveRemainCount', this.recursiveRemainCount)
       if(this.recursiveRemainCount==0){
         if(callback){
            callback();
         }
       }
    },
    checkNodes(nodeDataIds){
         let tree = this.$refs.tree;
         tree.setCheckedKeys(nodeDataIds, false)
    }

到此这篇关于element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选的文章就介绍到这了,更多相关element-ui tree 异步树内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue动画事件详解及过渡动画实例

    Vue动画事件详解及过渡动画实例

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作
    2019-02-02
  • vue实现自定义全局右键菜单

    vue实现自定义全局右键菜单

    这篇文章主要为大家详细介绍了vue实现自定义全局右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue如何获取url路由地址和参数简单示例

    Vue如何获取url路由地址和参数简单示例

    这篇文章主要给大家介绍了Vue如何获取url路由地址和参数的相关资料,通过简单的代码示例,帮助读者快速掌握Vue路由的基本用法,需要的朋友可以参考下
    2023-03-03
  • vue3的介绍和两种创建方式详解(cli和vite)

    vue3的介绍和两种创建方式详解(cli和vite)

    这篇文章主要介绍了vue3的介绍和两种创建方式(cli和vite),vue3对比vue2带来的性能提升有很多优势,总体来说Vue 3在性能、开发体验和代码组织方面都有所改进,使得它更加适合于大型、复杂的应用程序开发,需要的朋友可以参考下
    2023-04-04
  • vue Proxy数据代理进行校验部分源码实例解析

    vue Proxy数据代理进行校验部分源码实例解析

    Proxy提供了强大的Javascript元编程,有许多功能,包括运算符重载,对象模拟,简洁而灵活的API创建,对象变化事件,甚至Vue 3背后的内部响应系统提供动力,这篇文章主要给大家介绍了关于vue Proxy数据代理进行校验部分源码解析的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vue利用dayjs封装实现时间实时刷新

    Vue利用dayjs封装实现时间实时刷新

    Day.js库本身专注于简化JavaScript日期和时间的操作,它的API设计直观,且功能强大,可以方便地格式化日期、添加或减去时间间隔、比较日期等,本文主要介绍了Vue利用dayjs封装实现时间实时刷新,需要的朋友可以参考下
    2024-07-07
  • Vue实现表格批量审核功能实例代码

    Vue实现表格批量审核功能实例代码

    这篇文章主要为大家详细介绍了Vue实现表格批量审核功能实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue element如何添加遮罩层

    vue element如何添加遮罩层

    这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • ant-design-vue中设置Table每页显示的条目数量方式

    ant-design-vue中设置Table每页显示的条目数量方式

    这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vuex中五大属性和使用说明(包括辅助函数)

    vuex中五大属性和使用说明(包括辅助函数)

    这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论