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

这篇具有很好参考价值的文章主要介绍了【前端】- 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

点击前效果：

el-tree 关闭展开,前端,javascript,elementui,vue.js,css

点击后效果：

el-tree 关闭展开,前端,javascript,elementui,vue.js,css

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

页面部分：这里是简单的数结构渲染，不多讲，$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);
        });
    }
}

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

el-tree 关闭展开,前端,javascript,elementui,vue.js,css

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

el-tree 关闭展开,前端,javascript,elementui,vue.js,css

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

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节点设置为关闭状态

el-tree 关闭展开,前端,javascript,elementui,vue.js,css