el-tree 获取过滤后的树结构

正常来说element框架应该返回的,但实际上没有,只能自己处理了

递归处理,思路就是赋值,如果是自己过滤到的数据就push进去,不是就不要

bash 复制代码
let newCheckTree = []
let tree  = get_tree(treeData,newCheckTree); //获取过滤后的数据
function get_tree(treeData,newCheckTree,expandedList){
        for(var i = 0;i< treeData.length;i++){
          if(treeData[i].child.length){
            newCheckTree[i] = {...treeData[i]}  //把所有的值赋上,但是child要为空,不然就一模一样了
            newCheckTree[i].child = []
            newCheckTree[i].child = findChildren(treeData[i].child,newCheckTree[i].child) 
          }else{
            let val = treeData[i].jGMC.toUpperCase()
            if(val.indexOf(filterText) !== -1){
              newCheckTree.push(treeData[i])
              // console.log(expandedList,'that.expandedList')
              if(expandedList.indexOf(treeData[i].sid) == -1){
                expandedList.push(treeData[i].sid)
              }
            }
           
          }
        }
        return newCheckTree
      }
      function findChildren(treeData,newCheckTree){
        for(var i = 0;i< treeData.length;i++){
          if(treeData[i].child.length){
            newCheckTree[i] = {...treeData[i]}
            newCheckTree[i].child = []
            newCheckTree[i].child = findChildren(treeData[i].child,newCheckTree[i].child) 
          }
          let val = treeData[i].jGMC.toUpperCase()
          if(val.indexOf(filterText) !== -1){
            newCheckTree.push(treeData[i])
            // console.log(expandedList,'that.expandedList')
            if(expandedList.indexOf(treeData[i].sid) == -1){
              expandedList.push(treeData[i].sid)
            }
          }
        }
        return newCheckTree
      }

优化

其实这样拿到的数据虽然是过滤后的,但是也包括了父元素

比如一个父元素有七个子元素,这七个子元素都不是我们过滤到的,所以这时候应该连父元素一起都不要的

但是这个操作在递归里不好实现

所以还要再来一次处理

bash 复制代码
let newCheckTree  = get_tree1(JSON.parse(JSON.stringify(tree))); //删掉过滤后没有子元素的数据,深拷贝不然会被影响
function get_tree1(treeData){
        for(var i = 0;i< treeData.length;i++){
          if(treeData[i]){
            if(treeData[i].child.length){
              
              treeData[i].child = findChildren1(treeData[i].child)  
            }else{
            //如果没有子数据就删掉它
              treeData.splice(i,1)
              i--
            }
          }
        }
        return treeData
      }
      function findChildren1(treeData){
        for(var i = 0;i< treeData.length;i++){
          // console.log(treeData,'treeData')
          if(treeData[i]){
            if(treeData[i].child.length){
             
            }else{
              treeData.splice(i,1)
              i--
            }
           
          }
          
        }
        return treeData
      }
相关推荐
andr_gale1 小时前
02_uniapp自定义上凸效果的底部TabBar
前端·javascript·uni-app·移动端
倾听醉梦语2 小时前
React/Vite/Next.js 前端开发工具 SpotPatch:点击页面元素精准定位 JSX/TSX 源码
javascript·react·ai编程·vite·next.js·前端开发工具
2401_881828322 小时前
简易文本处理网页工具|AI 通识课第三次作业
前端·javascript·html
障碍的枫子3 小时前
Vue组件导出&渲染
前端·javascript·vue.js
Sterting3 小时前
组件通信:Props 与 Emit
前端·vue.js
喵个咪3 小时前
GoWind Shop 架构剖析:一个 REST 请求穿越三服务 BFF 的七环链路
vue.js·后端·go
喵个咪3 小时前
GoWind Shop 安全设计:JWT 鉴权、Ent 行级隔离、防篡改审计与四个真实漏洞修复
vue.js·后端·go
喵个咪3 小时前
GoWind Shop:一个 proto 文件如何生成后端、前端、文档、校验六路代码
vue.js·后端·go
喵个咪3 小时前
GoWind Shop 出海实战:多语言商品内容怎么存、怎么录、怎么按 locale 取
vue.js·后端·go
海带紫菜菠萝汤4 小时前
MSE (Media Source Extensions) 实战:流媒体分块加载与自适应码率
前端·javascript·音视频