element-ui Tree组件点击节点展开，其余节点收起功能

原创已于 2022-08-04 17:48:30 修改 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-05-12 18:21:39 首次发布

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用Vue和Element-UI库来控制Tree组件中指定节点的展开与收缩状态。通过设置`expanded`属性并结合节点的`label`，可以实现单个或多个节点的控制。然而，这种方法不适用于多级节点的情况。为了解决这个问题，文章提到了Element-UI的`accordion`属性，该属性允许每次只展开一个同级节点，简化了多级节点的管理。

效果展示：
在这里插入图片描述

<template>
  <el-tree :data="data" node-key="label" ref="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

this.$refs.tree.store.nodesMap[data.label].expanded = false 可以控制指定Tree树节点是展开还是收起。false收起，true展开

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }, {
            label: '二级 2-2',
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
          }, {
            label: '二级 3-2',
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data,node) {
        if(node.expanded){ //展开
            let other_nodes = this.$refs.tree.data.filter(item=>item.label !== data.label);
            other_nodes.forEach((item) => {
                this.$refs.tree.store.nodesMap[item.label].expanded = false;
            })
        }
      },
    },
  };
</script>