＜el-tree＞标签问题

何中应2026-03-18 11:08

简介

前天介绍了 Element-UI 中提供的 el-tree 标签的使用，今天分享该标签使用时的一个问题，以及博主自己的解决方案，希望能给大家有所启发。

问题

如下，是一个 部门-用户 二级树状结构，可以在左侧选中用户，展示到右侧的选中列表中。

但现在的问题是，只有展开过的部门才能通过选中部门全选用户，没有展开过，就不能通过选部门全选用户，如下。

解决

我问了 AI，也让 TRAE 解决了半天，全选问题解决了，右侧移除用户时左侧的勾选框又不能同步了，反反复复就是不能完美解决。

感觉要自己手搓代码，写复杂的判断逻辑，根据选中部门、选中用户分开判断才行。

但我有点赖，于是我想到了一个办法。

在 el-tree 上加上 default-expand-all 属性，加载时全部展开（嘿嘿），这样不就能解决问题吗？

如下。

bash 复制代码

    <div class="left-section">
      <el-tree
          ref="tree"
          v-if="treeVisible"
          :props="props"
          :data="treeData"
          show-checkbox
          node-key="userId"
          @check-change="handleCheckChange"
          default-expand-all
          style="width: 300px;">
      </el-tree>
    </div>

看下效果，展示 部门-用户 结构时，全部展示，没有全选问题。

这种小技巧，AI 你就学去吧，我简直是天才。