解决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, [])

总结

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

相关文章

  • 详解mpvue开发小程序小总结

    详解mpvue开发小程序小总结

    这篇文章主要介绍了详解mpvue开发小程序小总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 关于Element-ui中table默认选中toggleRowSelection问题

    关于Element-ui中table默认选中toggleRowSelection问题

    这篇文章主要介绍了关于Element-ui中table默认选中toggleRowSelection问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能,感兴趣的朋友一起看看吧
    2019-10-10
  • vue滚动条滚动到顶部或者底部的方法

    vue滚动条滚动到顶部或者底部的方法

    这篇文章主要给大家介绍了关于vue滚动条滚动到顶部或者底部的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    构建工具使用vue3推荐的vite,下面这篇文章主要给大家介绍了关于如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue使用Swiper封装轮播图组件的方法详解

    Vue使用Swiper封装轮播图组件的方法详解

    Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配。本文将利用Swiper实现封装轮播图组件,感兴趣的可以了解一下
    2022-09-09
  • vue实现富文本编辑器详细过程

    vue实现富文本编辑器详细过程

    Vue富文本的实现可以使用一些现成的第三方库,如Quill、Vue-quill-editor、wangEditor等,这篇文章主要给大家介绍了关于vue实现富文本编辑器的相关资料,需要的朋友可以参考下
    2024-01-01
  • el-table表格动态合并行及合并行列实例详解

    el-table表格动态合并行及合并行列实例详解

    在使用el-table的时候经常会涉及到表格的列合并,包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue-cli3中如何引入ECharts并实现自适应

    Vue-cli3中如何引入ECharts并实现自适应

    这篇文章主要介绍了Vue-cli3中如何引入ECharts并实现自适应,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 如何使用el-table实现纯前端导出(适用于el-table任意表格)

    如何使用el-table实现纯前端导出(适用于el-table任意表格)

    我们日常做项目,特别是后台管理系统,常常需要导出excel文件,这篇文章主要给大家介绍了关于如何使用el-table实现纯前端导出的相关资料,本文适用于el-table任意表格,需要的朋友可以参考下
    2024-03-03

最新评论