Vue Element UI：让树形子节点自动跟随父节点折叠

2023-09-05 14:26:36

当我们在使用 Vue Element UI 时，树形控件因其强大的数据结构可视化和操作能力，往往成为构建复杂数据结构界面的首选。然而，在某些场景下，我们需要实现子节点跟随父节点折叠的功能，以提供更直观的交互体验。在本篇文章中，我们将深入探讨如何使用 Vue Element UI 实现这一功能。

理解树形结构与折叠需求

在开始之前，让我们先来理解一下树形结构和折叠需求。树形结构是一种常见的数据结构，通常用于表示具有层次关系的数据。例如，在公司组织架构中，我们可以将董事长作为根节点，各部门经理作为子节点，如此层层展开，形成一个树形结构。

当我们使用树形控件来可视化数据时，往往需要对树形结构进行折叠操作，以减少页面上的数据量，并帮助用户专注于当前关心的部分。例如，在公司组织架构中，我们可以折叠掉已经展开的部门，只保留当前正在查看的部门。

实现子节点跟随父节点折叠

现在，让我们来探讨如何使用 Vue Element UI 实现子节点跟随父节点折叠的功能。这需要我们对 Element UI 的树形组件进行一些定制。

首先，我们需要为树形组件添加一个名为 collapse-on-parent 的属性。这个属性将负责检测父节点的折叠状态，并根据父节点的折叠状态对子节点进行折叠或展开。

其次，我们需要在树形组件的 node-click 事件中添加一些代码，以实现子节点跟随父节点折叠的功能。当用户点击一个父节点时，我们需要检查该父节点是否处于折叠状态。如果是，那么我们需要将该父节点的所有子节点折叠起来。如果不是，那么我们需要将该父节点的所有子节点展开。

最后，我们需要在 CSS 中添加一些样式，以确保折叠的子节点不会显示出来。

完整代码示例

以下是一个完整代码示例，演示如何使用 Vue Element UI 实现子节点跟随父节点折叠的功能：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '部门 1',
          children: [
            {
              id: 2,
              label: '子部门 1-1'
            },
            {
              id: 3,
              label: '子部门 1-2'
            }
          ]
        },
        {
          id: 4,
          label: '部门 2',
          children: [
            {
              id: 5,
              label: '子部门 2-1'
            },
            {
              id: 6,
              label: '子部门 2-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label',
        collapseOnParent: true
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.node.isCollapsed) {
        this.$refs.tree.expandAllNodes(data.node.path);
      } else {
        this.$refs.tree.collapseAllNodes(data.node.path);
      }
    }
  }
};
</script>

<style>
.el-tree-node--hidden {
  display: none !important;
}
</style>