element中Tree组件更新后不自动收起

在使用element的Tree组件过程中，可能会遇到这样的需求，点击某个节点对树进行节点的增加、删除或者修改，树的节点更新后，会重新加载，所以展开的节点会重新关闭，但频繁的点击展开会增加操作负担，那么如何在树结构更新后不收起已经展开的节点呢？

官方文档

查找element官方文档后，发现有Tree有这样的属性和方法可以帮助解决问题：

default-expanded-keys ，默认展开的节点的 key 的数组；
getNode，根据 data 或者 key 拿到 Tree 组件中的 node；

解决思路

给el-tree设置默认展开节点，记录每次树更新前的展开节点，编辑新增或删除后，重新渲染时设置默认展开节点，即可实现树重新渲染后不收起的效果。

具体实现

在el-tree组件中设置:default-expanded-keys="expandedList",expandedList为默认展开节点的node-key数组；
写函数寻找所有展开节点，函数实现如下：

findExpandedNode() { // 寻找所有展开的节点idconst list = []this.allList.forEach(element => {if (this.$refs.SlotMenuList.getNode(element).expanded === true) {list.push(element)}})return list}

SlotMenuList为设置的el-tree的ref名称，allList为树结构中包含所有节点node-key的数组，getNode方法根据key获取节点信息，找到expanded为true即状态为展开的节点，将其放入数组中。

补充获取树结构中全部节点的函数

findChildren(data) { // 寻找该分组下所有分组idlet list = []if (data.children && data.children.length > 0) {list.push(data.id)data.children.forEach(element => {const newList = this.findChildren(element)list = list.concat(newList)})} else {list.push(data.id)}return list}

该示例中node-key为id，故寻找树结构中所有节点时将id放入数组中

在不希望收起树结构的位置调用获取展开节点的函数，为树结构设置默认展开节点。

this.expandedList = this.findExpandedNode()

总结

经过这样，就可以实现树结构重新渲染后不收起的效果啦~~~

element中Tree组件更新后不自动收起相关推荐

element-ui中tree组件双击事件的实现
文章目录前言代码实现总结前言近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
element中upload组件中的确认删除问题
element中upload组件中的确认删除问题问题原因 <el-uploadclass="upload-demo"dragaction="https://jso ...
华硕笔记本系统更新后开机自动蓝屏怎么U盘重装系统？
华硕笔记本系统更新后开机自动蓝屏怎么U盘重装系统?有用户将自己的华硕笔记本进行系统升级之后,遇到了开机自动蓝屏的情况.遇到这个问题我们怎么去进行解决呢?接下来一起来看看怎么通过U盘重装系统的方法解决此 ...
vm虚拟机中 Kali更新后不能自动适应窗口
先前使用的 apt-get install open-vm-tools-desktop fuse 来设置的自动适应窗口更新后无效尝试重新安装open-vm-tools-desktop依然无效解决 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
ElementUI中Tree组件兼容IE解决方案
更新时间:2021-08-21 v1.0 一.简介在软件开发初期阶段,经常会使用是市面上主流的浏览器进行功能开发,调试.为什么呢? 因为市面上主流的浏览器对W3C组织制定的标准更友好,同时对开发者. ...
修改Element-ui中tree组件最底层节点的样式
最近在项目中,设计将tree组件里最底层的节点布局设计成了多列,那要怎么实现呢? 首先用自定义节点的方式渲染节点,在渲染方法里给最底层节点添加class renderContent(h, { node ...
vue前端打包更新后客户端自动更新
vue单页面网页端项目前言(缓存) 项目之前已经通过webpack打包的时候都会把静态资源文件名加个哈希后缀,且index.html中引入的时候也加了相应的哈希后缀,这样每次打包都会是最新的,ind ...
Element 中图片预览后如何快速关闭
Element 中的图片有预览大图的功能,但是预览完毕后只能点击右上角的关闭图标才能关闭,有点不方便 mounted() {// 通过遮罩层关闭图片预览document.addEventListene ...

element中Tree组件更新后不自动收起

文章目录

element中Tree组件更新后不自动收起

官方文档

解决思路

具体实现

总结

element中Tree组件更新后不自动收起相关推荐

最新文章

热门文章