首页 > 其他分享 >vue 前端, 树形菜单的回显

vue 前端, 树形菜单的回显

时间:2023-02-09 13:45:54浏览次数:38  
标签:childrenData arr vue 回显 depthN childrenEach depth 树形

    //树菜单回显(多级)     changeDetSelect(key, treeData) {       let arr = []; // 在递归时操作的数组       let returnArr = []; // 存放结果的数组       let depth = 0; // 定义全局层级       // 定义递归函数       function childrenEach(childrenData, depthN) {         for (var j = 0; j < childrenData.length; j++) {           depth = depthN; // 将执行的层级赋值 到 全局层级           arr[depthN] = childrenData[j].id;           if (childrenData[j].id == key) {             returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组,截断并保存到结果数组,             break;           } else {             if (childrenData[j].children) {               depth++;               childrenEach(childrenData[j].children, depth);             }           }         }         return returnArr;       }       return childrenEach(treeData, depth);     },

标签:childrenData,arr,vue,回显,depthN,childrenEach,depth,树形
From: https://www.cnblogs.com/porter/p/17104974.html

相关文章

  • 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块
    第14章、内建组件和模块14.1KeepAlive组件的实现原理KeepAlive一词借鉴了HTTP协议。KeepAlive组件可以避免组件被频繁的销毁/重建。本质是缓存管理,再加上特殊的挂......
  • 【Vue】父子组件传值、方法引用
    父子组件值、方法引用1、值1.1父组件获取子组件值父组件<template><div><button@click="getChildValue">click</button><childref="child"></child>......
  • Vue 常用
    阅读目录​​Vue3中八个生命周期函数​​​​js动态添加对象属性​​​​js遍历对象​​​​第一种:for......in​​​​第二种​​​​第三种:使用Object.getOwnPropertyNa......
  • Vue 的优化技巧
    演示代码使用Vue3+ts+Vite编写,但是也会列出适用于Vue2的优化技巧,如果某个优化只适用于Vue3或者Vue2,我会在标题中标出来。代码优化v-for中使用key使用v......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件:E:\node\vue296\src\router\index.js入口:E:\node\vue296\src\main.js组件:E:\node\vue296\src\components\Count.vue......
  • Vue 中遇到的错误
    阅读目录解决VUE启动问题(Youmayusespecialcommentstodisablesomewarnings)两种方法解决方法一方法二安装vuex启动报错“export‘watch‘wasn......
  • [email protected]选项卡
    阅读目录<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>body{font-family:"Micr......
  • Vue 命令行工具 Vue-CLI 详解
    阅读目录阐述vue全家桶vue-cliVueCLI的安装①默认安装vue/cli脚手架3②默认安装失败,解决mode版本问题③nvm下载太慢问题解决④安装Node^12.0.0......
  • Vue界面渲染函数互相条用导致渲染失败的总结
    先说问题:界面上有一块区域是这样的  数据是取自一个map集合,后面的符号和过滤条件是按照对应的顺序去拿,没有直接关联,请求是按照顺序发的,但是渲染的界面有可能乱序像......
  • vue 项目中 文件对比 vue-code-diff 和 DiffMatchPatch
    vue项目中文件对比刚开始是用的  vue-code-diff安装npminstallvue-code-diff使用 <code-diffv-if="oldValue&&newValue":old-stri......