解决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出现空格警告的原因及其解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解vue-cli 脚手架 安装

    详解vue-cli 脚手架 安装

    这篇文章主要介绍了vue-cli脚手架安装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue中组件间多种传值方式案例详解

    vue中组件间多种传值方式案例详解

    vue中每个组件都是隔离的,包括父组件和子组件,各组件之间需要数据通信,就涉及到了组件传值,本文给大家介绍vue中组件间多种传值方式案例,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue.js事件处理器与表单控件绑定详解

    Vue.js事件处理器与表单控件绑定详解

    这篇文章主要为大家详细介绍了Vue.js事件处理器与表单控件绑定详解的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于vue实现一个神奇的动态按钮效果

    基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-05-05
  • 详解vue中v-model和v-bind绑定数据的异同

    详解vue中v-model和v-bind绑定数据的异同

    这篇文章主要介绍了vue中v-model和v-bind绑定数据的异同,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Vue Router的手写实现方法实现

    Vue Router的手写实现方法实现

    这篇文章主要介绍了Vue Router的手写实现方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue 报错TypeError: this.$set is not a function 的解决方法

    Vue 报错TypeError: this.$set is not a function 的解决方法

    这篇文章主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法,分享给大家,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • HTML页面中使用Vue示例进阶(快速学会上手Vue)

    HTML页面中使用Vue示例进阶(快速学会上手Vue)

    Vue是用于构建用户界面的渐进式JavaScript框架。特色:构建用户界面—数据变成界面;渐进式—Vue可以自底向上逐层的应用。VUE有两种使用方式,一种实在html中直接使用vue做开发,一种是企业级的单页面应用。
    2023-02-02
  • Vue中引入swiper报错的问题及解决

    Vue中引入swiper报错的问题及解决

    这篇文章主要介绍了Vue中引入swiper报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论