当前位置:首页 » 《关于电脑》 » 正文

【前端】- 在使用Element UI 的el-tree组件时,从底层去研究如何去实现一键展开/关闭【tree节点】的功能

15 人参与  2024年05月04日 10:59  分类 : 《关于电脑》  评论

点击全文阅读


第一步:首先我们先去查看element ui官方文档,发现并没有提供这个方法,没办法,只能手写一个了,先给大家看看功能

点击前效果:

点击后效果:

第二步:废话不多说直接上代码,然后我们简单解释下代码

页面部分:这里是简单的数结构渲染,不多讲,$refs.Reftree获取的是el-tree的实例,具体作用请看下面的方法。

 <div style="width: 500px;height: 300px;border: 5px solid #eee;overflow: auto;margin: 0 auto;">      <el-button type="primary" @click="El_treeExpand($refs.Reftree)">展开/折叠</el-button>      <el-tree       ref="Reftree"      :data="data"       :props="defaultProps" @node-click="handleNodeClick"></el-tree></div>
data: [{          label: '一级 1',          children: [{            label: '二级 1-1',            children: [{              label: '三级 1-1-1'            }]          }]        }, {          label: '一级 2',          children: [{            label: '二级 2-1',            children: [{              label: '三级 2-1-1'            }]          }, {            label: '二级 2-2',            children: [{              label: '三级 2-2-1'            }]          }]        }, {          label: '一级 3',          children: [{            label: '二级 3-1',            children: [{              label: '三级 3-1-1'            }]          }, {            label: '二级 3-2',            children: [{              label: '三级 3-2-1'            }]          }]        }],        defaultProps: {          children: 'children',          label: 'label'        },

方法部分:该方法传入el-tree实例,直接点击按钮即可实现展开或者关闭,这里简单讲解一下

1、ref.store.root.childNodes 通过实例来调用tree组件的方法,可以获取到所有的数据源

2、node.expanded 循环遍历出通过expanded属性来判断是否展开

3、expandNode 和 collapseNode 使用递归来进行控制展开属性

export function El_treeExpand(ref) {    if (!ref) {        this.$modal.alertWarning("未传入el-tree实例");        return;    }    ref.store.root.childNodes.forEach((node, index) => {           console.log(node.expanded);        if (node.expanded) {            collapseNode(node);        } else {            expandNode(node);        }    })}function expandNode(node) {    node.expanded = true;    if (node.childNodes) {        node.childNodes.forEach(childNode => {            expandNode(childNode);        });    }}function collapseNode(node) {    node.expanded = false;    if (node.childNodes) {        node.childNodes.forEach(childNode => {            collapseNode(childNode);        });    }}

第三步:此时我们已经设置成功,进入页面进行测试一下

本来节点1.2是打开,3关闭,点击后就变成了1.2关闭,3打开了,还不是我们想要的效果

第四步:对代码进行简单的修改,思路是根据第一个节点的展开状态来决定所有的 

1、用来记录第一个节点的状态    let record = null;   

2、循环的过程中添加index,在index=0的时候,保存第一个节点值的状态

  if (index == 0) {
            record = node.expanded
        }

//全局 展开\折叠 el-tree方法   //参数:ref (tree实例)export function El_treeExpand(ref) {    if (!ref) {        this.$modal.alertWarning("未传入实例,报错位置utils/rhis.js 495");        return;    }    let record = null; //记录第一个节点的状态    ref.store.root.childNodes.forEach((node, index) => {        //第一个是打开就所有打开,第一个是关闭就所有的关闭        if (index == 0) {            record = node.expanded        }        console.log(record);        if (record) {            collapseNode(node);        } else {            expandNode(node);        }    })}function expandNode(node) {    node.expanded = true;    if (node.childNodes) {        node.childNodes.forEach(childNode => {            expandNode(childNode);        });    }}function collapseNode(node) {    node.expanded = false;    if (node.childNodes) {        node.childNodes.forEach(childNode => {            collapseNode(childNode);        });    }}

修改完成,测试效果

我们将第1.3节点设置为展开状态,第2节点设置为关闭状态

点击展开/折叠按钮,此时按照逻辑,根据第一节点的展开状态,所以点击之后所有的节点都会关闭

通过反复测验:成功搞定,方法可以注册到全局,在使用的页面传入ref实例就行了

下面是作者推荐的几篇文章,都是基础知识,有兴趣的都可以试试呀,大家共同学习,都很简单,都很实用

1. 发布WebApi到IIS服务的基本操作,小白必看篇

WebApi发布到IIS服务器的流程-详细解析-百分之百成功_webapi服务器-CSDN博客

2.发布WebApi到IIS服务出现访问权限的问题,已解决,详细请看下面文章

解决:WebApi发布到IIS服务器时,出现的HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效。_无法访问请求的页面,因为该页的相关配置数据无效。-CSDN博客

3.(入门级)开发第一个Java程序,只需要跟着做一遍就能理解Java程序运行的原理了

(入门级)开发第一个Java程序,只需要跟着做一遍就能理解Java程序运行的原理了-CSDN博客


点击全文阅读


本文链接:http://www.zhangshiyu.com/post/103446.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1