当前位置: 首页 > news >正文

el-tree 编辑后保持现有展开状态

  • 搜索时,找到对应结果,全部展开找到搜索项
  • 编辑时,保持原有样式
		<div class="search"><el-input size="small" placeholder="请输入部门名称" suffix-icon="el-icon-search" v-model="deptName" @keydown.enter.native="findDepartmentTree('checked')"></el-input><i class="el-icon-plus" @click="addDept"></i></div><el-tree :loading="laodingTree" :data="data" node-key="id" :default-expanded-keys="expandedKeys" :props="defaultProps" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" @node-click="handleNodeClick"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-dropdown @command="handleCommand(data, $event)"><span class="el-dropdown-link"><i class="el-icon-more"></i></span><el-dropdown-menu class="treeDropdown" slot="dropdown"><el-dropdown-item command="edit">编辑</el-dropdown-item><el-dropdown-item command="del">删除</el-dropdown-item></el-dropdown-menu></el-dropdown></span></span></el-tree>

一个小需求让我写这么多代码,可恶!

	data () {return {expandedKeys: []}}mounted () {this.findDepartmentTree()},async findDepartmentTree (expandedKeys = false) {this.laodingTree = trueconst currentExpandedKeys = [...this.expandedKeys]// checked 是根据input框查询时,是需要全部展开,找到搜索项,先清空expandedKeysif (expandedKeys === 'checked' && !this.deptName) {this.expandedKeys = []}// 调接口,树赋值this.data = res.datathis.$nextTick(() => {if (expandedKeys === 'checked' && !this.deptName) {this.expandedKeys = [-1]} else if (expandedKeys === 'checked') {// 根据input框查询,全部展开this.expandedKeys = this.getAllNodeKeys(this.data)} else {this.expandedKeys = currentExpandedKeys.length ? currentExpandedKeys : [-1]}})},// 全部展开getAllNodeKeys (nodes) {let keys = []nodes.forEach(node => {keys.push(node.id)if (node.children && node.children.length > 0) {keys = keys.concat(this.getAllNodeKeys(node.children))}})return keys},// 处理节点收起handleNodeCollapse (data, node) {const keysToRemove = new Set()keysToRemove.add(node.key) // 添加父节点 keythis.collectChildKeys(node, keysToRemove) // 递归收集所有子节点 keythis.expandedKeys = this.expandedKeys.filter(k => !keysToRemove.has(k))console.log('this.expandedKeys', this.expandedKeys)},// 递归收集所有子节点的 keycollectChildKeys (node, keysSet) {if (node.childNodes) {node.childNodes.forEach(child => {keysSet.add(child.key) // 无论子节点是否展开,都强制移除if (child.expanded) { // 若子节点自身已展开,则递归处理其子节点this.collectChildKeys(child, keysSet)}})}},// 节点展开时,将key加入数组handleNodeExpand (data, node) {if (!this.expandedKeys.includes(node.key)) {this.expandedKeys = [...this.expandedKeys, node.key]}console.log('this.expandedKeys', this.expandedKeys)},
http://www.dtcms.com/a/333334.html

相关文章:

  • 【多模态大模型】--BLIP3
  • Backblaze 2025 Q2硬盘故障率报告解读
  • [TryHackMe](知识学习)缓冲区溢出
  • week1-[顺序结构]大海
  • 继续记录面试题
  • 优维HAO案例:某金融机构CMDB升级改造项目
  • Linux学习-软件编程(进程与线程)
  • 前端基础知识版本控制系列 - 01( 对版本管理的理解)
  • 基于 AutoGen 框架实现 - 电商客服订单处理演示
  • 【Java虚拟机】垃圾回收机制
  • 从0开始跟小甲鱼C语言视频使用linux一步步学习C语言(持续更新)8.15
  • 安全防范方案
  • 网络安全蓝队常用工具全景与实战指南
  • 从C到C++入门:C++有而C语言没有的基础知识总结
  • 机器学习之 KNN 算法学习总结
  • CK_Label_v51(外接供电版)
  • C#WPF实战出真汁07--【系统设置】--菜品类型设置
  • OpenCV---morphologyEx形态学操作
  • MCP Server Java 开发框架的体验比较(spring ai mcp 和 solon ai mcp)和实现示例对比
  • Linux网络基础概念
  • Navicat 询问 AI | 轻松修复 SQL 错误
  • go应用注册到kong
  • Linux入门(十九)定时备份数据库
  • week1-[循环嵌套]画正方形
  • Java调用bat执行python脚本
  • 阿里云出里两款新的云服务器
  • 数据库(3)
  • 【Canvas与玻璃光】铝圈蓝底玻璃光按钮
  • 储能逆变器中的无功补偿,实现原理
  • 大数据分析:电商商品数据分析实操指南之获取淘宝商品数据API