解决elementUI中el-tree树形结构中节点过滤的问题

 更新时间:2023年04月23日 11:12:04   作者:木屋x  
这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

elementUI中el-tree树形结构中节点过滤

业务需求

vue项目,权限管理模块中经常遇到树形结构的处理,这篇文章我们讲一下树形结构的节点过滤问题。在权限管理中的菜单管理模块,当我们新增菜单是需要选择它的父级菜单或者目录(有这样一个需求,就是菜单下面是可以新增按钮的,所以新增按钮就需要选择它的父级菜单,菜单的父级当然只是目录),那么这里选择上级菜单或者目录时就需要对树形结构进行过滤。

需求分析

处理el-tree的树形结构过滤问题我们首先会想到遍历递归去给要过滤的节点的值置空,这样它既然是空置那么就不会被el-tree树形渲染,经过踩坑这里的答案是不行的,它虽然为空,但还是会占位显示为空。

这里我使用的是el-tree控件的filter-node-method 方法进行过滤。

解决方案

第一步是既然要过滤的节点置空不行,那么我们就给他设置一个特殊的过滤值,我用的是'undefined',所以在递归遍历的时候就给要过滤的节点的值设置为'undefined',然后再对树形数据进行过滤:

         // 树形数据过滤
          this.$nextTick(() => {
            this.$refs.menutree.filter('undefined')
          })

第二步,当已经执行树形数据过滤之后,然后在树形组件上绑定:filter-node-method="filterNode"方法对树形结构的节点进行过滤:

      // 树形节点过滤
      filterNode(value, data, node) {
        // if (!value) return true;
        // 当节点的data.resourcesName里面有值时展示它,否则过滤它
        if (data.resourcesName.includes(value)) {
          return false
        } else {
          return true
        }
      },

el-tree树形踩坑

需求:el-tree节点需要传选中的父级菜单给后台,而不是仅仅子节点。

比如说下方需要将系统管理的节点id也传过给后台。

处理方法

实现:简单,通过getCheckedNodes()即可,但是需要定义后面的参数半选节点为true

遍历拿到id

 let chooseArr = this.$refs.meauTree.getCheckedNodes(false,true);
 let idList = []
 chooseArr.forEach(item=>{
    idList.push(item.id);
 })

普通需求应该getCheckedKeys即可满足。

 let chooseArr = this.$refs.meauTree.getCheckedKeys();

回显菜单

问题来了,回显菜单的时候,后台返回的是包含父节点的id,于是需要过滤处理。

方法:

遍历el-tree数据,看是否有子节点,没有子节点则存下id

 resolveAllEunuchNodeId(json, idArr, temp) {
      for (let i = 0; i < json.length; i++) {
        const item = json[i]
        // 存在子节点,递归遍历;不存在子节点,将json的id添加到临时数组中
        if (item.children && item.children.length !== 0) {
          this.resolveAllEunuchNodeId(item.children, idArr, temp)
        } else {
          temp.push(idArr.filter(id => id === item.id))
        }
      }
      return temp
    }
 

使用:

  • menuData树形结构数据 
  • menuIds后台拿到的包含所有半选的节点id数组
 // 解析出所有的太监节点
this.menuIdList = this.resolveAllEunuchNodeId(this.menuData, menuIds, [])

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue 实现剪裁图片并上传服务器功能

    vue 实现剪裁图片并上传服务器功能

    这篇文章主要介绍了vue 实现剪裁图片并上传服务器功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • vue2.0+koa2+mongodb实现注册登录

    vue2.0+koa2+mongodb实现注册登录

    这篇文章主要介绍了vue2.0+koa2+mongodb实现注册登录功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • 深入浅析Vue中mixin和extend的区别和使用场景

    深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来给大家介绍Vue中mixin和extend的区别和使用场景,感兴趣的朋友一起看看吧
    2019-08-08
  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 详解vue中axios的使用与封装

    详解vue中axios的使用与封装

    这篇文章主要介绍了vue中axios的使用与封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • element-ui中Table表格省市区合并单元格的方法实现

    element-ui中Table表格省市区合并单元格的方法实现

    这篇文章主要介绍了element-ui中Table表格省市区合并单元格的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 实例教学如何写vue插件

    实例教学如何写vue插件

    本次小编通过一个简单的实例来教给大家如何写一个vue插件,以及需要注意的地方,如果有需要的读者跟着学习一下吧。
    2017-11-11
  • vue将文件/图片批量打包下载zip的教程

    vue将文件/图片批量打包下载zip的教程

    这篇文章主要介绍了vue将文件/图片批量打包下载zip的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue中el-table多层级嵌套的具体实现

    vue中el-table多层级嵌套的具体实现

    本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue/cli和vue版本对应及安装方式

    vue/cli和vue版本对应及安装方式

    这篇文章主要介绍了vue/cli和vue版本对应及安装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论