如何配置 Vue Element UI 的 el-tree 组件以限制每个节点最多只允许展开一个一级分类？

在 Vue 中使用 Element UI 的 `el-tree` 组件限制每个节点最多只允许展开一个一级分类，你需要在组件的选项（options）或计算属性（computed properties）中设置一些策略。这里是一个简单的例子：

首先，安装 Element UI 和 vue-element-admin 如果还没安装：

npm install element-ui vue-element-admin

然后，在你的 `.vue` 文件中，你可以通过监听节点的 `expand` 事件并阻止默认行为来实现这个功能。例如，你可以创建一个自定义指令（custom directive）来处理这个需求：

<template>
  <el-tree :props="treeProps" @node-expand="handleNodeExpand" ref="treeRef">
    <!-- ... -->
  </el-tree>
</template>

<script>
export default {
  directives: {
    limitFirstLevelExpand: {
      inserted(el, binding) {
        el.addEventListener('node-expand', event => {
          const node = event.node;
          if (node.level === 1 && this.expandedNodes.includes(node)) {
            event.preventDefault();
            event.stopPropagation();
            // 显示提示信息，如果需要
            console.log('一级分类已展开，无法继续');
          }
        });
      },
      unbind(el) {
        el.removeEventListener('node-expand', this.handleNodeExpand);
      }
    }
  },
  data() {
    return {
      treeProps: {}, // 树节点的基本属性配置
      expandedNodes: [], // 存储已展开的一级节点
    };
  },
  methods: {
    handleNodeExpand(event) {
      this.expandedNodes.push(event.node); // 当节点展开时，添加到数组中
      // 如果是第一级且已展开，则阻止进一步展开
      if (event.node.level === 1 && this.expandedNodes.length > 1) {
        event.preventDefault();
      }
    }
  },
  mounted() {
    // 初始化状态，假设你有预设的一级节点列表
    this.expandedNodes = [/* 初始化的顶级节点ID */];
  }
};
</script>

在这个例子中，我们监听了 `node-expand` 事件，并检查当前点击的节点是否是一级节点并且已经在 `expandedNodes` 中。如果是，就阻止事件的默认行为（即展开操作）。同时，我们将展开的一级节点存储在 `expandedNodes` 数组中，以便于后续管理和控制。