vue 目录树的展开与关闭

目录

  • 1、翻页方法中控制目录树节点的展开与关闭
  • 2、搜索目录树节点名称控制节点的展开与关闭

<el-tree:data="data_option"ref="tree":props="defaultProps"@node-click="handleNodeClick":default-expanded-keys="needExpandedKeys"node-key="type_id"highlight-current>
</el-tree>expandedKeys: [], //所有treenode的id
needExpandedKeys: [], //需要展开的treenode的id数组
needExpandedNodes:[],//需要展开的treenode的node数组

关键在于以下两行代码

 :default-expanded-keys="needExpandedKeys"  // needExpandedKeys数组,用来保存展开节点的唯一值node-key="type_id"  //每个节点的唯一值,这里我的唯一值是type_id

data_option 数组如果没有这个唯一值怎么办,给它加一个

//list 是目录树节点以及目录树节点下的文件所组成的一个数组
this.data_option = this.addTypeIdToTreeNode(list);  addTypeIdToTreeNode(lastList) {//传进去的list是有tree又有file//给每个node节点添加type_id,用来展开目录设置唯一值let treeData = lastList;const addIdToTree = (treeData) => {return treeData.map((node, index) => {if (!node._id) {  //根据自己目录树数组的实际情况修改,因为我这个_id有用所以需要判断const newNode = {...node,type_id: node.type_code == 0 ? "wfl000" : node.type_code,}; // 创建一个新的节点,包括原有的属性和新的 _id 属性if (node.childrens && node.childrens.length > 0) {newNode.childrens = addIdToTree(node.childrens); // 递归处理子节点}return newNode;} else {const newNode = { ...node, type_id: node._id }; // 创建一个新的节点,包括原有的属性和新的 _id 属性return newNode;}});};const treeDataWithId = addIdToTree(treeData);let str = [];const getStr = function (list) {list.forEach(function (row) {if (row.childrens) {str.push(row.type_id);getStr(row.childrens);} else {str.push(row.type_id);}});};getStr(treeDataWithId);this.expandedKeys = str;// console.log("需要展开的treenode", this.expandedKeys);// console.log("需要展开的treeDataWithId", treeDataWithId);return treeDataWithId;},

1、翻页方法中控制目录树节点的展开与关闭


this.$nextTick(() => {this.$refs.tree.setCurrentKey(this.userArr[0].type_id  //高亮当前节点,type_id 唯一值确定节点);//展开高亮文件的目录this.expandedKeys.forEach((node) => {if (//this.indexLocation 翻页之后是a文件,a文件的下标this.userArr[this.indexLocation].type_id.indexOf(node) !== -1  ) {this.needExpandedKeys.push(node);}});this.needExpandedKeys.forEach((node) => {this.$refs.tree.store.setCheckedNodes([node], true);});});

2、搜索目录树节点名称控制节点的展开与关闭

//搜索goToSearch(){let treedata = this.data_optionif(this.searchStr){//需要关闭所有节点 //除了上次搜索展开的节点还有自己点击展开的节点this.changeTreeNodeStatus(this.$refs.tree.store.root)this.needExpandedNodes = []this.needExpandedKeys = []//获取需要展开的节点数组this.findTypeCode(treedata, this.searchStr)this.needExpandedNodes.forEach(item=>{this.needExpandedKeys.push(item.type_id)})if(this.needExpandedKeys.length == 0){this.$message.error("没有找到您搜索的目录节点")}else{//模拟点击该节点,使其高亮,默认高亮搜索出的第一个节点this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))}console.log("needExpandedKeys",this.needExpandedKeys)}else{this.changeTreeNodeStatus(this.$refs.tree.store.root)this.needExpandedNodes = []this.needExpandedKeys = []}},//循环拿到需要展开的目录子节点findTypeCode(treeData, targetName) {// 遍历树结构for (let i = 0; i < treeData.length; i++) {const node = treeData[i];// 如果节点的 type_name 包含目标名称,返回该节点的 type_codeif (node.type_name.includes(targetName)) {// if (node.type_name==targetName) {console.log(node.type_id)if(node.type_id){this.needExpandedNodes.push(node)}}// 如果节点有子节点,递归调用自身进行深度优先搜索if (node.childrens && node.childrens.length > 0) {const result = this.findTypeCode(node.childrens, targetName);// 如果在子树中找到了匹配的节点,返回结果if (result) {return result;}}}// 如果没有找到匹配的节点,返回 null 或者适合您的默认值return null;},changeTreeNodeStatus(node) {node.expanded = falsefor (let i = 0; i < node.childNodes.length; i++) {// 改变节点的自身expanded状态node.childNodes[i].expanded = this.defaultExpand// 遍历子节点if (node.childNodes[i].childNodes.length > 0) {this.changeTreeNodeStatus(node.childNodes[i])}}},

记录一个比较重要的点:高亮某行目录树节点

this.handleNodeClick(this.needExpandedNodes[0],this.$refs.tree.getNode(this.needExpandedKeys[0]))//即:
this.handleNodeClick(node, this.$refs.tree.getNode(node))
//node为 目录树的一个节点,在我这儿比如data_option数组中的某个对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1、开发工具介绍及软件安装

软件安装 百度网盘链接&#xff1a;https://pan.baidu.com/s/1J7sgXntt9eLNBhI1Dc6MsQ?pwd2023 提取码&#xff1a;2023 # 一 Keil5安装步骤&#xff1a; 激活&#xff1a; STC-ISP安装步骤&#xff1a; STC-ISP.exe安装即用 安装CH340_CH341驱动程序 所有学习课程和资源…

【vue】ant-design-vue的树结构实现节点增删改查

根据业务需要&#xff0c;实现树结构的节点新增编辑删除功能&#xff0c;主要逻辑是利用树节点的scopedSlots属性对其进行自定义改造&#xff0c;监听悬停事件在节点右侧出现增删改对应图标&#xff0c;点击图标出现弹窗表单对内容进行修改&#xff0c;具体代码如下&#xff1a…

蓝桥杯每日一题2023.11.23

题目描述 题目分析 本题使用递归模拟即可&#xff0c;将每一个大格子都可以拆分看成几个小格子&#xff0c;先将最开始的数字进行填入&#xff0c;使每一个对应小格子的值都为大格子对应的数&#xff0c;搜索找到符合要求的即可 &#xff08;答案&#xff1a;50 33 30 41&am…

Vue3+ts学习笔记2

<script setup lang"ts"> import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from vueonBeforeMount(()>{console.log(---挂载之前---) })onMounted(()>{console.log(---挂载---) })onBeforeUpdate(()>{consol…

Python爬取京东商品销售数据进行数据分析示例代码,以口红为例

文章目录 一、准备工作驱动安装模块使用与介绍 二、流程解析三、完整代码四、效果展示关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资…

git代码提交命令(如何提交代码)

# 提交暂存区到仓库区 $ git commit -m [message]# 提交暂存区的指定文件到仓库区 $ git commit [file1] [file2] ... -m [message]# 提交工作区自上次commit之后的变化&#xff0c;直接到仓库区 $ git commit -a# 提交时显示所有diff信息 $ git commit -v# 使用一次新的commit…

2023年中国钒铁产量及行业进出口现状分析[图]

钒铁&#xff0c;银白色块状&#xff0c;一般分为桶装或吨袋包装&#xff0c;根据钒含量的不同分为50钒铁&#xff08;FeV50&#xff09;和80钒铁&#xff08;FeV80&#xff09;,通过炉外法或电炉法冶炼生产&#xff0c;北方多以炉外法制取&#xff0c;南方多为电炉法生产。 钒…

Chrome浏览器将从2024年6月开始限制广告拦截器

虽然一年前&#xff0c;谷歌公司已经暂停推出新的“Manifest V3”扩插件展格式&#xff0c;原因是这种新格式会对 Chrome 中一些最受欢迎的扩展插件造成严重损害&#xff1b;一年后今天&#xff0c;Google 正在重新启动该计划&#xff0c;逐步淘汰 Chrome 扩展程序当前的 Manif…

Faster R-CNN源码解析(一)

目录 前言训练脚本(train_mobilenetv2.py)自定义数据集(my_dataset.py) 前言 Faster R-CNN 是经典的two-stage目标检测模型&#xff0c; 原理上并不是很复杂&#xff0c;也就是RPNFast R-CNN&#xff0c;但是在代码的实现上确实有很多细节&#xff0c;并且源码也非常的多&…

chatglm3部署使用

chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下载chatglm3代码。Huggingface下载模型一直失败&#xff0c;所以用阿里的魔塔社区下载。 git clone https://github.com/THUDM/ChatGLM3.git git clone https://www.modelscope.cn/ZhipuAI/chatglm3…

docker常见问题汇总

docker常见问题 ❓问题1&#xff1a;启动docker容器时&#xff0c;报错Unknown runtime specified nvidia. 当我启动一个容器时&#xff0c;运行以下命令&#xff1a; docker run --runtimenvidia 。。。。 后面一部分命令没写出来&#xff0c;此时报错的信息如下&#xff1a;…

python-opencv划痕检测

python-opencv划痕检测 这次实验&#xff0c;我们将对如下图片进行划痕检测&#xff0c;其实这个比较有难度&#xff0c;因为清晰度太差了。 我们做法如下&#xff1a; &#xff08;1&#xff09;读取图像为灰度图像&#xff0c;进行自适应直方图均衡化处理&#xff0c;增强图…

thingsboard3.6的mailConfigTemplateController错误

1、bug内容 使用3.6版本的tb代码进行打包生成boot的jar包,在启动的时候会报错mailConfigTemplateController bean初始化找不到文件路径。 Error creating bean with name mailConfigTemplateController defined in URL [jar:file:/D:/yuxinwei/AE/thingsboard/thingsboard-3…

nuxt3项目修改端口号

nuxt的默认端口号是3000 一、修改开发环境端口号 方式一&#xff1a;使用环境变量配置,设置&#xff08;PORT 或 NUXT_PORT&#xff09; # .env PORT3001 #http://localhost:3001/ NITRO_PORT3001 #http://localhost:3001/ 方式二&#xff1a;nuxt.config.ts里配置…

vue2.0+elementui集成file-loader之后图标失效问题

背景 跑vue2elementUI项目时&#xff0c;由于前端这边需要在本地存放xlsx模板文件&#xff0c;供用户下载模板文件&#xff0c;所以需要在webpack构建的时候增加file-loader进行解析xlsx文件打包。 vue版本2.x element-ui 版本 2.13.x 注意 npm i -D file-loader版本号给vue项…

操作系统 day12(调度算法的评价指标)

评价指标 CPU利用率 系统吞吐量 周转时间 带权周转时间 等待时间 响应时间

vue中属性的基本用法

v-for指令的用法 v-for指令用于重复输出当前元素。 案例&#xff1a;写一个新的组件页面&#xff1a;For.vue 当访问&#xff1a; /for时看到它。 场景1 遍历字符串数组输出每一个列表项元素&#xff1a; data: {nav: [京东超市,京东家电,秒杀,拍卖,京东生鲜,PLUS会员] } …

【python学习】中级篇-TCP编程Socket模块:客户端与服务端

客户端 创建一个基于TCP连接的Socket AF_INET指定使用IPv4协议 AF_INET6指定使用IPv6协议 # 导入socket库: import socket# 创建一个socket: s socket.socket(socket.AF_INET, socket.SOCK_STREAM) # 建立连接: s.connect((www.sina.com.cn, 80))客户端要主动发起TCP连接 必…

2022-1-25 机器人运动规划方法综述 航空学报

论文PDF abstract 随着应用场景的日益复杂&#xff0c;机器人对旨在生成无碰撞路径&#xff08;轨迹&#xff09;的自主运动规划技术的需求也变得更加迫 切。虽然目前已产生了大量适应于不同场景的规划算法&#xff0c;但如何妥善地对现有成果进行归类&#xff0c;并分析不同…

Spark---基于Standalone模式提交任务

Standalone模式两种提交任务方式 一、Standalone-client提交任务方式 1、提交命令 ./spark-submit --master spark://mynode1:7077 --class org.apache.spark.examples.SparkPi ../examples/jars/spark-examples_2.11-2.3.1.jar 100 或者 ./spark-submit --master spark…