关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推

官方default-expand-all是否默认展开所有节点，这个在这里已经不够用了。

第一步：设置node-key属性，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。例如：node-key="id"

第二步：设置default-expanded-keys属性，默认展开的节点的 key 的数组。

实例如下：

（1）页面元素代码

<el-tree :data="deptOptions" :props="defaultProps" node-key="id" :expand-on-click-node="false" :default-expanded-keys="treeData" :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick" />

<el-tree :data="deptOptions" :props="defaultProps" node-key="id" :expand-on-click-node="false" :default-expanded-keys="treeData" :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick" />

上面标红的部分是关键设置

（2）在自己的数据结构中定义了一个数组treeData用于存放默认展开的节点的 key 的数组

data() {return {treeData:[]}}

（3）查询树形结构的地方给treeData赋值

 /** 查询部门下拉树结构 */getTreeselect() {treeselect().then((response) => {response.data.forEach(element => {this.treeData.push(element.id)});this.deptOptions = response.data;});},

效果：（效果默认展开一级，后面的以此类推）

关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推相关推荐

vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
Android 11.0 下拉状态栏通知栏的通知设置默认展开
1.概述在11.0 的产品定制化中,对于SystemUI的定制也是常用的功能,而在下拉状态栏中的通知栏部分也是极其重要的部分,每条通知实时更新在通知栏部分,由于通知栏高度的限制,每条通知是默认收缩的 ...
把数据转换为在内存中Tree(树形结构)。_备战秋招：一文搞定数据库常见面试题...
点击上方"蓝字",关注了解更多 1.数据库范式第一范式:列不可分,eg:[联系人](姓名,性别,电话),一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF: 第 ...
java 树结构_Java通用tree树形结构
前言现在大部分都是后端封装树形结构,第一次做的时候想从网上找通用,发现大部分都是要用类的get/set方法,不一样就要改,毕竟懒,改就改改,后来发现部门要,地区要,分类要,于是想着就把之前的用注解和 ...
element-plus2.5.10版本el-table树形数据设置自定义展开收起图标与插槽图标-第一级才设置索引
实现效果 template代码如下使用插槽方式设置文本前面的图片,区分有子数据和没有子数据的图片 <el-table:data="tree"stripeborderrow- ...
XML Tree(树形结构）
xml文档(xml document)使用树形结构表达,以根结点root为开始,逐渐向下发散.它使用一种可自我描述的简单的语法. 一个xml文档分为文件序言(declaration)和文件主体两个大的 ...
EasyUI之Tree树形结构(一)
官网地址:www.jeasyui.net/plugins/186- 前端代码: $("#menuTreegrid").treegrid({url: SysResource.URL. ...

关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推

关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推相关推荐

最新文章

热门文章